From 823d0877d023273c4652154c2487e999d93ce028 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Fri, 7 Apr 2023 14:51:37 +0000
Subject: [PATCH] Remove fullscreen in favour of hiding info panel

---
 .../static/sass/components/buttons/pill.sass  |  46 ------
 .../components/elements/upload-panel.sass     |   4 +-
 .../sass/components/image-view/info-tab.sass  |  28 +++-
 .../sass/components/image-view/view.sass      |  72 +++++----
 gallery/static/sass/style.sass                |   2 +
 gallery/templates/image.html                  | 149 ++++++++----------
 gallery/templates/layout.html                 |   8 +-
 7 files changed, 143 insertions(+), 166 deletions(-)

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 @@
     <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,70 +90,71 @@
     </div>
 
     <div class="image-grid">
-        <div class="image-container" id="image-container">
-            <img
-                src="{{ url_for('api.file', file_name=image.filename) }}?r=prev"
-                alt="{{ image.alt }}"
-                onload="imgFade(this)"
-                style="opacity: 0;"
-                onerror="this.src='{{ url_for('static', filename='error.png')}}'"
-                {% if "File" in image.exif %}
-                    width="{{ image.exif.File.Width.raw }}"
-                    height="{{ image.exif.File.Height.raw }}"
-                {% endif %}
-            />
-        </div>
-
-        <div class="pill-row" id="image-tools">
-            {% if next_url %}
-                <div>
-                    <a class="pill-item" href="{{ next_url }}">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
-                    </a>
-                </div>
-            {% endif %}
-            <div>
-                <button class="pill-item" onclick="imageFullscreenOn()">
-                    <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>
+        <div class="image-block">
+            <div class="image-container">
+                <img
+                    src="{{ url_for('api.file', file_name=image.filename) }}?r=prev"
+                    alt="{{ image.alt }}"
+                    onload="imgFade(this)"
+                    style="opacity: 0;"
+                    onerror="this.src='{{ url_for('static', filename='error.png')}}'"
+                    {% if "File" in image.exif %}
+                        width="{{ image.exif.File.Width.raw }}"
+                        height="{{ image.exif.File.Height.raw }}"
+                    {% endif %}
+                />
             </div>
-            {% if current_user.id == image.author_id %}
+
+            <div class="pill-row">
+                {% if next_url %}
+                    <div>
+                        <a class="pill-item" href="{{ next_url }}">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
+                        </a>
+                    </div>
+                {% endif %}
                 <div>
-                    <button class="pill-item pill__critical" onclick="imageDelete()">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg>
+                    <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 pill__critical" onclick="imageEdit()">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"></path></svg>
+                    <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>
-                </div>
-            {% endif %}
-            {% if prev_url %}
-                <div>
-                    <a class="pill-item" href="{{ prev_url }}">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
+                    <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>
                 </div>
-            {% endif %}
+                {% if current_user.id == image.author_id %}
+                    <div>
+                        <button class="pill-item pill__critical" onclick="imageDelete()">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z"></path></svg>
+                        </button>
+                        <button class="pill-item pill__critical" onclick="imageEdit()">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z"></path></svg>
+                        </button>
+                    </div>
+                {% endif %}
+                {% if prev_url %}
+                    <div>
+                        <a class="pill-item" href="{{ prev_url }}">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
+                        </a>
+                    </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">
-                            <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 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">
-                        <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 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">
-                            <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 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() {
-                this.parentNode.classList.toggle('collapsed');
+            infoTab[i].querySelector('.collapse-indicator').addEventListener('click', function() {
+                infoTab[i].classList.toggle('collapsed');
             });
         }
     </script>
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" %}
         <script type="text/javascript" src="{{ ASSET_URL }}"></script>
     {% endassets %}
-    
-    {% assets "js_post" %}
-        <script type="text/javascript" src="{{ ASSET_URL }}" defer></script>
+
+    {% assets "js" %}
+        <script type="text/javascript" src="{{ ASSET_URL }}"></script>
     {% endassets %}
 
     {% assets "styles" %}