Remove fullscreen in favour of hiding info panel

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

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

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

gallery/static/sass/components/image-view/view.sass

@@ -12,47 +12,63 @@
 
     position: relative
 
-    display: grid
+    display: flex
-    grid-template-areas: 'info image' 'info tools'
+    flex-direction: column
-    grid-template-columns: 25rem 1fr
+    gap: 0.5rem
-    grid-template-rows: 1fr auto
+    z-index: 3
+
+    .image-block
+        margin: 0 0 0 25rem
+        padding: 0
+
+        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)
 
-    &.collapse
+        .pill-row
-        grid-template-columns: 0rem 1fr
+            margin-bottom: 0.5rem
 
-#image-info
+    &.collapsed
-    grid-area: info
+        .image-block
-#image-tools
+            margin: 0
-    grid-area: tools
+            width: 100%
-    padding: 0 0 0.5rem 0
-#image-container
-    grid-area: image
 
 
 @media (max-width: 1100px)
     .image-grid
         padding: 0.5rem
+        height: auto
+
+        .image-block
+            margin: 0
+            width: 100%
+            height: auto
 
-        display: flex
-        flex-direction: column
             gap: 0.5rem
 
-        height: auto
+            transition: margin 0s, width 0s
 
             .image-container
                 margin: 0 auto
                 padding: 0
-
                 max-height: 69vh
 
                 img
                     max-height: 69vh
 
-    #image-tools
+            .pill-row
-        padding: 0
+                margin-bottom: 0
+
+                #fullscreenImage
+                    display: none
 
     .info-container
         background: transparent

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

gallery/templates/image.html

@@ -6,25 +6,6 @@
     <meta name="theme-color" content="rgb({{ image.colours.0.0 }}{{ image.colours.0.1 }}{{ image.colours.0.2 }})"/>
 
     <script type="text/javascript">
-        function imageFullscreenOff() {
-            document.querySelector("html").style.overflow = "auto";
-            let fullscreen = document.querySelector('.image-fullscreen')
-
-            fullscreen.classList.remove('active');
-
-            setTimeout(function() {
-                fullscreen.style.display = 'none';
-            }, 200);
-        }
-        function imageFullscreenOn() {
-            let fullscreen = document.querySelector('.image-fullscreen')
-
-            fullscreen.querySelector('img').src = '{{ url_for('api.file', file_name=image.filename) }}';
-
-            document.querySelector("html").style.overflow = "hidden";
-            fullscreen.style.display = 'flex';
-            setTimeout(function() { fullscreen.classList.add('active'); }, 5);
-        }
         function imageShare() {
             try {
                 navigator.clipboard.writeText(window.location.href)
@@ -33,18 +14,16 @@
                 addNotification("Failed to copy link! Are you on HTTP?", 2);
             }
         }
-        function infoCollapse() {
+        function fullscreen() {
             let info = document.querySelector('.info-container');
             let wrapper = document.querySelector('.image-grid');
 
             if (info.classList.contains('collapsed')) {
                 info.classList.remove('collapsed');
                 wrapper.classList.remove('collapsed');
-                btn.innerHTML = 'Collapse';
             } else {
                 info.classList.add('collapsed');
                 wrapper.classList.add('collapsed');
-                btn.innerHTML = 'Expand';
             }
         }
 
@@ -82,7 +61,7 @@
                     if (response.ok) {
                         window.location.href = '/';
                     } else {
-                        addNotification(`Image *clings*: ${response}`, 2);
+                        addNotification(`Image *clings*`, 2);
                     }
                 });
             }
@@ -111,7 +90,8 @@
     </div>
 
     <div class="image-grid">
-        <div class="image-container" id="image-container">
+        <div class="image-block">
+            <div class="image-container">
                 <img
                     src="{{ url_for('api.file', file_name=image.filename) }}?r=prev"
                     alt="{{ image.alt }}"
@@ -125,7 +105,7 @@
                 />
             </div>
 
-        <div class="pill-row" id="image-tools">
+            <div class="pill-row">
                 {% if next_url %}
                     <div>
                         <a class="pill-item" href="{{ next_url }}">
@@ -134,15 +114,12 @@
                     </div>
                 {% endif %}
                 <div>
-                <button class="pill-item" onclick="imageFullscreenOn()">
+                    <button class="pill-item" onclick="fullscreen()" id="fullscreenImage">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48V96a8,8,0,0,1-16,0V67.31l-50.34,50.35a8,8,0,0,1-11.32-11.32L188.69,56H160a8,8,0,0,1,0-16h48A8,8,0,0,1,216,48ZM106.34,138.34,56,188.69V160a8,8,0,0,0-16,0v48a8,8,0,0,0,8,8H96a8,8,0,0,0,0-16H67.31l50.35-50.34a8,8,0,0,0-11.32-11.32Z"></path></svg>
                     </button>
                     <button class="pill-item" onclick="imageShare()">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,112v96a16,16,0,0,1-16,16H56a16,16,0,0,1-16-16V112A16,16,0,0,1,56,96H80a8,8,0,0,1,0,16H56v96H200V112H176a8,8,0,0,1,0-16h24A16,16,0,0,1,216,112ZM93.66,69.66,120,43.31V136a8,8,0,0,0,16,0V43.31l26.34,26.35a8,8,0,0,0,11.32-11.32l-40-40a8,8,0,0,0-11.32,0l-40,40A8,8,0,0,0,93.66,69.66Z"></path></svg>
                     </button>
-                <button class="pill-item" onclick="infoCollapse()">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
-                </button>
                     <a class="pill-item" href="/api/file/{{ image.filename }}" download onclick="addNotification('Download started!', 4)">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Zm-42.34-61.66a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L120,164.69V120a8,8,0,0,1,16,0v44.69l10.34-10.35A8,8,0,0,1,157.66,154.34Z"></path></svg>
                     </a>
@@ -165,16 +142,19 @@
                     </div>
                 {% endif %}
             </div>
+        </div>
     
-        <div class="info-container" id="image-info">
+        <div class="info-container">
             {% if image.post_description %}
                 <div class="info-tab">
                     <div class="info-header">
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,160H40V56H216V200ZM184,96a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,96Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,128Zm0,32a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h96A8,8,0,0,1,184,160Z"></path></svg>
                         <h2>Description</h2>
-                        <svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
+                        <button class="collapse-indicator">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
                                 <path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
                             </svg>
+                        </button>
                     </div>
                     <div class="info-table">
                         <p>{{ image.post_description }}</p>
@@ -185,9 +165,11 @@
                 <div class="info-header">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm16-40a8,8,0,0,1-8,8,16,16,0,0,1-16-16V128a8,8,0,0,1,0-16,16,16,0,0,1,16,16v40A8,8,0,0,1,144,176ZM112,84a12,12,0,1,1,12,12A12,12,0,0,1,112,84Z"></path></svg>
                     <h2>Info</h2>
-                    <svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
+                    <button class="collapse-indicator">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
                             <path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
                         </svg>
+                    </button>
                 </div>
                 <div class="info-table">
                     <table>
@@ -236,9 +218,11 @@
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M110.66,147.56a8,8,0,0,0-13.32,0L76.49,178.85l-9.76-15.18a8,8,0,0,0-13.46,0l-36,56A8,8,0,0,0,24,232H152a8,8,0,0,0,6.66-12.44ZM38.65,216,60,182.79l9.63,15a8,8,0,0,0,13.39.11l21-31.47L137.05,216Zm175-133.66-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v96a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48V216h-8a8,8,0,0,0,0,16h8a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160Z"></path></svg>
                             <h2>{{ tag }}</h2>
                         {% endif %}
-                        <svg class="collapse-indicator" xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
+                        <button class="collapse-indicator">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -8 24 24" fill="currentColor">
                                 <path d="M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z"></path>
                             </svg>
+                        </button>
                     </div>
                     <div class="info-table">
                         <table>
@@ -269,9 +253,10 @@
 {% block script %}
     <script type="text/javascript">
         let infoTab = document.querySelectorAll('.info-tab');
+
         for (let i = 0; i < infoTab.length; i++) {
-            infoTab[i].querySelector('.info-header').addEventListener('click', function() {
+            infoTab[i].querySelector('.collapse-indicator').addEventListener('click', function() {
-                this.parentNode.classList.toggle('collapsed');
+                infoTab[i].classList.toggle('collapsed');
             });
         }
     </script>

gallery/templates/layout.html

@@ -30,12 +30,12 @@
         type="image/svg+xml"
         media="(prefers-color-scheme: dark)"/>
 
-    {% assets "js_pre" %}
+    {% assets "lib" %}
         <script type="text/javascript" src="{{ ASSET_URL }}"></script>
     {% endassets %}
 
-    {% assets "js_post" %}
+    {% assets "js" %}
-        <script type="text/javascript" src="{{ ASSET_URL }}" defer></script>
+        <script type="text/javascript" src="{{ ASSET_URL }}"></script>
     {% endassets %}
 
     {% assets "styles" %}