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

Added settings page

Browse source 
Added logging to a .log file
Fixed Images loosing colour and rotation on thumbnail generation
Added more info to README
This commit is contained in:
Michał Gdula 2023-03-01 23:29:34 +00:00
parent a9b13f1e39
commit 828167f762
36 changed files with 819 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

2
gallery/user/themes/default/ui/background.sass
View file

@ -26,6 +26,8 @@
width: 100%
height: 100%
background-color: $white
filter: blur(1rem)
transform: scale(1.1)

108
gallery/user/themes/default/ui/banner.sass Normal file
View file

@ -0,0 +1,108 @@
.banner
margin: 0
padding: 0
width: calc(100vw - 3.5rem)
height: 40vh
position: relative
top: 0
left: 3.5rem
background-color: $white
color: $black
background-image: linear-gradient(to right, darken($white, 1%) 15%, darken($white, 10%) 35%, darken($white, 1%) 50%)
background-size: 1000px 640px
animation: imgLoading 1.8s linear infinite forwards
overflow: hidden
transition: opacity 0.3s ease-in-out
img
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background-color: $white
object-fit: cover
object-position: center center
span
position: absolute
top: 0
left: 0
width: 100%
height: 100%
background: linear-gradient(to right, rgba($primary, 1), rgba($primary, 0))
z-index: +1
.banner__content
margin: 0
padding: 1rem
width: 100%
height: 100%
position: relative
display: flex
flex-direction: column
justify-content: flex-end
gap: 0.5rem
z-index: +2
h1
margin: 0
padding: 0
font-size: 6.9rem
font-weight: 700
line-height: 1
text-align: left
color: $black
p
margin: 0
padding: 0
font-size: 1rem
font-weight: 600
line-height: 1
text-align: left
color: $black
@media (max-width: $breakpoint)
.banner
width: 100vw
height: 25vh
left: 0
span
background-image: linear-gradient(to bottom, rgba($primary, 1), rgba($primary, 0))
.banner__content
padding: 0.5rem
display: flex
justify-content: center
align-items: center
h1
font-size: 3.5rem
text-align: center
p
font-size: 1.1rem
text-align: center

2
gallery/user/themes/default/ui/content.sass
View file

@ -1,5 +1,7 @@
@import "wrappers/index"
@import "wrappers/image"
@import "wrappers/settings"
@import "wrappers/error"
.content
width: calc(100% - 3.5rem)

44
gallery/user/themes/default/ui/gallery.sass
View file

@ -37,6 +37,17 @@
display: block
padding-bottom: 100%
&:hover
.gallery__item-info
opacity: 1
transform: scale(1)
h2, p
opacity: 1
.gallery__item-image
transform: scale(1.1)
.gallery__item-info
margin: 0
padding: 0.5rem
@ -58,7 +69,7 @@
opacity: 0 // hide
transform: scale(1.05) // scale up
transition: all 0.5s cubic-bezier(.79, .14, .15, .86)
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
h2
margin: 0
@ -90,28 +101,19 @@
opacity: 0 // hide
transition: all 0.2s ease-in-out
&:hover
opacity: 1
transform: scale(1)
h2, p
opacity: 1
.gallery__item-image
margin: 0
padding: 0
width: 100%
height: 100%
width: 100%
height: 100%
position: absolute
top: 0
left: 0
right: 0
bottom: 0
position: absolute
top: 0
left: 0
right: 0
bottom: 0
object-fit: cover
object-position: center
object-fit: cover
object-position: center
background-color: $white
//background-color: $black
border-radius: $rad
transition: all 0.3s cubic-bezier(.79, .14, .15, .86)

30
gallery/user/themes/default/ui/pop-up.sass
View file

@ -32,6 +32,17 @@
transition: opacity 0.2s ease
.pop-up__click-off
width: 100vw
height: 100vh
height: 100dvh
position: absolute
top: 0
left: 0
z-index: +1
.pop-up-wrapper
margin: 0
padding: 0.5rem
@ -54,6 +65,7 @@
overflow: hidden
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
z-index: +2
.pop-up-content
margin: 0
@ -207,6 +219,14 @@
.pop-up-wrapper
transform: translate(-50%, 50%) scale(1)
.pop-up__hide
opacity: 0
transition: opacity 0.2s ease
.pop-up-wrapper
transform: translate(-50%, 50%) scaleY(0)
transition: transform 0.2s ease
@media (max-width: $breakpoint)
.pop-up
width: 100%
@ -241,4 +261,12 @@
top: unset
.pop-up-wrapper
transform: translateY(0)
transform: translateY(0)
.pop-up__hide
opacity: 0
transition: opacity 0.2s ease
.pop-up-wrapper
transform: translateY(5rem)
transition: transform 0.2s ease

35
gallery/user/themes/default/ui/wrappers/error.sass Normal file
View file

@ -0,0 +1,35 @@
.error-wrapper
display: flex
flex-direction: column
justify-content: center
align-items: center
background-color: $black
h1
margin: 0 2rem
font-size: 6.9rem
font-weight: 900
text-align: center
color: $primary
p
margin: 0 2rem
max-width: 40rem
font-size: 1.25rem
font-weight: 400
text-align: center
color: $white
@media (max-width: $breakpoint)
.error-wrapper
h1
font-size: 4.5rem
p
max-width: 100%
font-size: 1rem

30
gallery/user/themes/default/ui/wrappers/image.sass
View file

@ -43,16 +43,24 @@
transform: scale(0.8)
&__active
top: 0
.image-fullscreen__active
top: 0
opacity: 1 // show
opacity: 1 // show
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
transition: opacity 0.3s cubic-bezier(.79, .14, .15, .86)
img
transform: scale(1)
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
img
transform: scale(1)
transition: transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
.image-fullscreen__hide
opacity: 0 // hide
transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
img
transform: scaleY(0) // scale(0.8)
transition: transform 0.2s ease
.image-container
margin: auto
@ -114,16 +122,16 @@
margin: 0
padding: 0
width: 1.5rem
height: 1.5rem
width: 1.25rem
height: 1.25rem
display: flex
justify-content: center
align-items: center
position: absolute
top: 0.5rem
right: 0.5rem
top: 0.6rem
right: 0.6rem
cursor: pointer
z-index: +2

115
gallery/user/themes/default/ui/wrappers/settings.sass Normal file
View file

@ -0,0 +1,115 @@
@mixin settings-btn($color, $fill: false)
@if $fill
color: $white
background-color: $color
border: 2px solid $color
&:hover
background-color: $white
color: $color
@else
color: $color
background-color: $white
border: 2px solid $color
&:hover
background-color: $color
color: $white
@mixin settings-log($color)
font-size: 1rem
font-weight: 600
color: $white
background-color: $black
background-image: linear-gradient(120deg, rgba($color, 0.3), rgba($color, 0));
//border-left: 3px solid $color
.settings-wrapper
margin: 0
padding: 0.5rem
display: flex
flex-direction: column
gap: 0
.settings-nav
width: 100%
height: auto
position: sticky
top: 0
left: 0
display: flex
flex-direction: row
justify-content: center
gap: 0.5rem
background-color: $white
.settings-nav__item
margin: 0
padding: 0.5rem
width: 100%
height: 2.5rem
display: flex
justify-content: center
align-items: center
font-size: 1rem
font-weight: 600
text-align: center
line-height: 1
text-decoration: none
border-radius: $rad
cursor: pointer
transition: background-color 0.2s ease, color 0.2s ease
@include settings-btn($black)
&:focus
outline: none
.settings-nav__item-selected
@include settings-btn($black, true)
.settings-list
margin: 0
padding: 0
width: 100%
height: auto
display: flex
flex-direction: column
gap: 0.5rem
.log
margin: 0
padding: 1rem
height: auto
display: flex
flex-direction: column
gap: 0.5rem
border-radius: $rad
@include settings-log($critical)
@media (max-width: 450px)
.settings-nav
position: relative
flex-direction: column
gap: 0.5rem
.settings-wrapper
padding-bottom: 4rem