diff --git a/gallery/static/sass/components/buttons/pill.sass b/gallery/static/sass/components/buttons/pill.sass
index 3259b4e..26e6897 100644
--- a/gallery/static/sass/components/buttons/pill.sass
+++ b/gallery/static/sass/components/buttons/pill.sass
@@ -64,11 +64,6 @@
color: RGB($primary)
- .tool-tip
- opacity: 1
- top: -2.3rem
- transform: translateX(calc(-50% + 1.25rem ))
-
.pill__critical
color: RGB($critical)
@@ -91,47 +86,6 @@
&:hover
color: RGB($fg-white)
-.tool-tip
- margin: 0
- padding: 0.35rem 0.7rem
-
- width: auto
-
- display: block
-
- position: absolute
- top: -1.7rem
- left: 0
- transform: translateX(calc(-50% + 1.25rem ))
-
- font-size: 0.9rem
- font-weight: 700
-
- background-color: #000000
- color: RGB($fg-white)
- opacity: 0
- border-radius: $rad-inner
-
- transition: opacity 0.2s cubic-bezier(.76,0,.17,1), top 0.2s cubic-bezier(.76,0,.17,1)
-
- pointer-events: none
-
- svg
- margin: 0
- font-size: 1rem
-
- width: 0.75rem
- height: 0.75rem
-
- display: block
-
- position: absolute
- left: 50%
- bottom: -0.46rem
- transform: translateX(-50%)
-
- color: #000000
-
@media (max-width: $breakpoint)
.tool-tip
display: none
\ No newline at end of file
diff --git a/gallery/static/sass/components/elements/upload-panel.sass b/gallery/static/sass/components/elements/upload-panel.sass
index 05e9824..692868a 100644
--- a/gallery/static/sass/components/elements/upload-panel.sass
+++ b/gallery/static/sass/components/elements/upload-panel.sass
@@ -57,9 +57,9 @@
position: absolute
bottom: 0
- left: -400px
+ left: -25rem
- width: 400px
+ width: 25rem
height: 100%
display: flex
diff --git a/gallery/static/sass/components/image-view/info-tab.sass b/gallery/static/sass/components/image-view/info-tab.sass
index 537d0f1..3cded6a 100644
--- a/gallery/static/sass/components/image-view/info-tab.sass
+++ b/gallery/static/sass/components/image-view/info-tab.sass
@@ -1,6 +1,10 @@
.info-container
width: 25rem
- height: 100%
+ height: 100vh
+
+ position: absolute
+ top: 0
+ left: 0
display: flex
flex-direction: column
@@ -9,10 +13,11 @@
background-color: RGB($bg-200)
overflow-y: auto
- transition: transform 0.3s cubic-bezier(.79, .14, .15, .86)
+ z-index: +4
+ transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1)
&.collapsed
- transform: translateX(-25rem)
+ left: -25rem
.info-tab
width: 100%
@@ -38,6 +43,9 @@
opacity: 0
.collapse-indicator
+ margin: 0
+ padding: 0
+
width: 1.25rem
height: 1.25rem
@@ -45,12 +53,14 @@
top: 0.6rem
right: 0.6rem
+ background-color: transparent
color: RGB($primary)
+ border: none
z-index: +2
transition: transform 0.15s cubic-bezier(.79, .14, .15, .86)
- user-select: none
+ cursor: pointer
.info-header
margin: 0
@@ -209,4 +219,14 @@
@media (max-width: 1100px)
.info-container
+ width: 100%
+ height: 100%
+
+ position: relative
+
+ display: flex
+ flex-direction: column
gap: 0.5rem
+
+ &.collapsed
+ left: unset
diff --git a/gallery/static/sass/components/image-view/view.sass b/gallery/static/sass/components/image-view/view.sass
index 5bc3da4..22e47fe 100644
--- a/gallery/static/sass/components/image-view/view.sass
+++ b/gallery/static/sass/components/image-view/view.sass
@@ -12,47 +12,63 @@
position: relative
- display: grid
- grid-template-areas: 'info image' 'info tools'
- grid-template-columns: 25rem 1fr
- grid-template-rows: 1fr auto
- gap: 0
-
+ display: flex
+ flex-direction: column
+ gap: 0.5rem
z-index: 3
- &.collapse
- grid-template-columns: 0rem 1fr
+ .image-block
+ margin: 0 0 0 25rem
+ padding: 0
-#image-info
- grid-area: info
-#image-tools
- grid-area: tools
- padding: 0 0 0.5rem 0
-#image-container
- grid-area: image
+ width: calc(100% - 25rem)
+ height: 100vh
+
+ position: relative
+
+ display: flex
+ flex-direction: column
+ gap: 0
+
+ z-index: 3
+ transition: margin 0.3s cubic-bezier(0.76, 0, 0.17, 1), width 0.3s cubic-bezier(0.76, 0, 0.17, 1)
+
+ .pill-row
+ margin-bottom: 0.5rem
+
+ &.collapsed
+ .image-block
+ margin: 0
+ width: 100%
@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
+ .image-block
+ margin: 0
+ width: 100%
+ height: auto
- max-height: 69vh
+ gap: 0.5rem
- img
- max-height: 69vh
+ transition: margin 0s, width 0s
- #image-tools
- padding: 0
+ .image-container
+ margin: 0 auto
+ padding: 0
+ max-height: 69vh
+
+ img
+ max-height: 69vh
+
+ .pill-row
+ margin-bottom: 0
+
+ #fullscreenImage
+ display: none
.info-container
background: transparent
diff --git a/gallery/static/sass/style.sass b/gallery/static/sass/style.sass
index 4b12d56..0d5fc4f 100644
--- a/gallery/static/sass/style.sass
+++ b/gallery/static/sass/style.sass
@@ -25,6 +25,8 @@
box-sizing: border-box
font-family: $font
+ scrollbar-color: RGB($primary) transparent
+
::-webkit-scrollbar
width: 0.5rem
::-webkit-scrollbar-track
diff --git a/gallery/templates/image.html b/gallery/templates/image.html
index 405157c..6265ecd 100644
--- a/gallery/templates/image.html
+++ b/gallery/templates/image.html
@@ -6,25 +6,6 @@
diff --git a/gallery/templates/layout.html b/gallery/templates/layout.html
index 8de8d1d..1588b8e 100644
--- a/gallery/templates/layout.html
+++ b/gallery/templates/layout.html
@@ -30,12 +30,12 @@
type="image/svg+xml"
media="(prefers-color-scheme: dark)"/>
- {% assets "js_pre" %}
+ {% assets "lib" %}
{% endassets %}
-
- {% assets "js_post" %}
-
+
+ {% assets "js" %}
+
{% endassets %}
{% assets "styles" %}