Galleries/PythonGallery
1
0
Fork 0
mirror of https://github.com/Derpy-Leggies/OnlyLegs.git synced 2025-06-29 11:36:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Remove theme manager in favour of webassets

Browse source
This commit is contained in:
Michał Gdula 2023-04-03 00:58:22 +00:00
parent c89df1613d
commit f540c234f3
26 changed files with 7 additions and 90 deletions
Download patch file Download diff file Expand all files Collapse all files

42
gallery/static/sass/components/image-view/background.sass Normal file
View file

@ -0,0 +1,42 @@
.background
width: 100%
height: 100vh
position: fixed
top: 0
left: 0
background-color: RGB($bg-300)
background-image: linear-gradient(to right, RGB($bg-400) 15%, RGB($bg-200) 35%, RGB($bg-400) 50%)
background-size: 1000px 640px
animation: imgLoading 1.8s linear infinite forwards
user-select: none
overflow: hidden
z-index: 1
img
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: RGB($fg-white)
filter: blur(1rem)
transform: scale(1.1)
object-fit: cover
object-position: center center
span
position: absolute
top: 0
left: 0
width: 100%
height: 100%
z-index: +1

42
gallery/static/sass/components/image-view/fullscreen.sass Normal file
View file

@ -0,0 +1,42 @@
.image-fullscreen
margin: 0
padding: 0 0 0 3.5rem
width: 100%
height: 100%
height: 100dvh
position: fixed
top: 0
left: 0
display: none
opacity: 0 // hide
background-color: $bg-transparent
z-index: 21
box-sizing: border-box
transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
img
margin: auto
padding: 0
width: auto
height: auto
max-width: 100%
max-height: 100%
object-fit: contain
object-position: center
transform: scale(0.8)
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
&.active
opacity: 1 // show
img
transform: scale(1)

21
gallery/static/sass/components/image-view/image.sass Normal file
View file

@ -0,0 +1,21 @@
.image-container
margin: auto
padding: 0.5rem
width: 100%
height: 100%
display: flex
overflow: hidden
img
margin: auto
padding: 0
width: auto
height: auto
max-width: 100%
max-height: 100%
object-fit: contain
object-position: center

208
gallery/static/sass/components/image-view/info-tab.sass Normal file
View file

@ -0,0 +1,208 @@
.info-container
width: 100%
height: 100%
display: flex
flex-direction: column
gap: 0
background-color: RGB($bg-200)
overflow-y: auto
.info-tab
width: 100%
display: flex
flex-direction: column
position: relative
background-color: RGB($bg-200)
border-radius: $rad
transition: max-height 0.3s cubic-bezier(.79, .14, .15, .86)
&.collapsed
height: 2.5rem
.collapse-indicator
transform: rotate(90deg)
.info-table
padding: 0
opacity: 0
.collapse-indicator
width: 1.25rem
height: 1.25rem
position: absolute
top: 0.6rem
right: 0.6rem
color: RGB($primary)
z-index: +2
transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
user-select: none
.info-header
margin: 0
padding: 0.5rem
width: 100%
height: 2.5rem
display: flex
justify-content: start
align-items: center
gap: 0.5rem
position: sticky
top: 0
z-index: +1
background-color: RGB($bg-200)
svg
margin: 0
padding: 0
width: 1.25rem
height: 1.25rem
fill: RGB($primary)
h2
margin: 0
padding: 0
font-size: 1.1rem
font-weight: 600
color: RGB($primary)
text-overflow: ellipsis
overflow: hidden
.info-table
margin: 0
padding: 0.5rem
display: flex
flex-direction: column
gap: 1rem
color: RGB($fg-white)
overflow-x: hidden
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 500
text-overflow: ellipsis
overflow: hidden
.link
margin: 0
padding: 0
font-size: 1rem
font-weight: 500
text-align: center
line-height: 1
color: RGB($primary)
cursor: pointer
text-decoration: none
&:hover
text-decoration: underline
table
margin: 0
padding: 0
width: 100%
overflow-x: hidden
border-collapse: collapse
tr
margin: 0
padding: 0
width: 100%
white-space: nowrap
td
padding-bottom: 0.5rem
td:first-child
padding-right: 0.5rem
width: 50%
max-width: 0
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
font-size: 1rem
font-weight: 500
td:last-child
padding: 0
width: 50%
max-width: 0
overflow: hidden
text-overflow: ellipsis
white-space: nowrap
font-size: 1rem
font-weight: 500
td.empty-table
opacity: 0.3
tr:last-of-type td
padding-bottom: 0
.img-colours
width: 100%
display: flex
gap: 0.5rem
span
margin: 0
padding: 0
width: 1.5rem
height: 1.5rem
display: flex
justify-content: center
align-items: center
border-radius: $rad-inner
// border: 1px solid RGB($white)
.img-groups
width: 100%
display: flex
flex-wrap: wrap
gap: 0.5rem
@media (max-width: 1100px)
.info-container
gap: 0.5rem

65
gallery/static/sass/components/image-view/view.sass Normal file
View file

@ -0,0 +1,65 @@
@import 'background'
@import 'fullscreen'
@import 'info-tab'
@import 'image'
.image-grid
padding: 0
position: relative
display: grid
grid-template-areas: 'info image' 'info tools'
grid-template-columns: 25rem 1fr
grid-template-rows: 1fr auto
gap: 0
height: 100vh
z-index: 3
#image-info
grid-area: info
#image-tools
grid-area: tools
padding: 0 0 0.5rem 0
#image-container
grid-area: image
@media (max-width: 1100px)
.image-grid
padding: 0.5rem
display: flex
flex-direction: column
gap: 0.5rem
height: auto
.image-container
margin: 0 auto
padding: 0
max-height: 69vh
img
max-height: 69vh
#image-tools
padding: 0
.info-container
background: transparent
.info-header
border-radius: $rad $rad 0 0
.info-tab.collapsed .info-header
border-radius: $rad
@media (max-width: $breakpoint)
.image-fullscreen
padding: 0 0 3.5rem 0