From 674b3968ae604b86f6807dc319c77ff977a065c2 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Sun, 9 Apr 2023 18:00:10 +0000
Subject: [PATCH] Remove useless Sass Fix styling

---
 .../components/elements/upload-panel.sass     |  8 ++--
 .../components/image-view/fullscreen.sass     | 42 -------------------
 .../sass/components/image-view/info-tab.sass  | 39 +++++------------
 .../sass/components/image-view/view.sass      |  3 +-
 gallery/templates/image.html                  | 26 +++---------
 5 files changed, 21 insertions(+), 97 deletions(-)
 delete mode 100644 gallery/static/sass/components/image-view/fullscreen.sass

diff --git a/gallery/static/sass/components/elements/upload-panel.sass b/gallery/static/sass/components/elements/upload-panel.sass
index 19325bb..4e1ed3d 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: -25rem
+        left: -27rem
 
-        width: 25rem
+        width: 27rem
         height: 100%
 
         display: flex
@@ -67,11 +67,10 @@
         gap: 1rem
 
         background-color: RGB($bg-200)
-        opacity: 0
 
         z-index: +2
 
-        transition: left 0.25s cubic-bezier(0.76, 0, 0.17, 1), bottom 0.25s cubic-bezier(0.76, 0, 0.17, 1), opacity 0.25s cubic-bezier(0.76, 0, 0.17, 1)
+        transition: left 0.25s cubic-bezier(0.76, 0, 0.17, 1), bottom 0.25s cubic-bezier(0.76, 0, 0.17, 1)
 
         #dragIndicator
             display: none
@@ -197,7 +196,6 @@
 
         .container
             left: 0
-            opacity: 1
 
 @media (max-width: $breakpoint)
     .upload-panel
diff --git a/gallery/static/sass/components/image-view/fullscreen.sass b/gallery/static/sass/components/image-view/fullscreen.sass
deleted file mode 100644
index f8e0fbc..0000000
--- a/gallery/static/sass/components/image-view/fullscreen.sass
+++ /dev/null
@@ -1,42 +0,0 @@
-.image-fullscreen
-    margin: 0
-    padding: 0
-
-    width: 100%
-    height: 100%
-    height: 100dvh
-
-    position: fixed
-    top: 0
-    left: 0
-
-    display: none
-    opacity: 0 // hide
-
-    background-color: $bg-transparent
-    z-index: 100
-
-    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)
\ No newline at end of file
diff --git a/gallery/static/sass/components/image-view/info-tab.sass b/gallery/static/sass/components/image-view/info-tab.sass
index 47c9d44..ceeddf4 100644
--- a/gallery/static/sass/components/image-view/info-tab.sass
+++ b/gallery/static/sass/components/image-view/info-tab.sass
@@ -1,5 +1,5 @@
 .info-container
-    width: 25rem
+    width: 27rem
     height: 100vh
 
     position: absolute
@@ -17,7 +17,7 @@
     transition: left 0.3s cubic-bezier(0.76, 0, 0.17, 1)
 
     &.collapsed
-        left: -25rem
+        left: -27rem
 
 .info-tab
     width: 100%
@@ -126,11 +126,6 @@
     .link
         margin: 0
         padding: 0
-        
-        font-size: 1rem
-        font-weight: 500
-        text-align: center
-        line-height: 1
 
         color: RGB($primary)
 
@@ -150,43 +145,31 @@
         border-collapse: collapse
 
         tr
-            margin: 0
-            padding: 0
-
-            width: 100%
-
             white-space: nowrap
 
             td
                 padding-bottom: 0.5rem
 
+                max-width: 0
+
+                font-size: 1rem
+                font-weight: 400
+
+                vertical-align: top
+
             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: 400
             td:last-child
-                padding: 0
-
                 width: 50%
-                max-width: 0
 
-                overflow: hidden
-                text-overflow: ellipsis
-                white-space: nowrap
-
-                font-size: 1rem
-                font-weight: 400
-
-            td.empty-table
-                opacity: 0.3
+                white-space: normal
+                word-break: break-word
 
         tr:last-of-type td
             padding-bottom: 0
diff --git a/gallery/static/sass/components/image-view/view.sass b/gallery/static/sass/components/image-view/view.sass
index 22e47fe..7ddf6a9 100644
--- a/gallery/static/sass/components/image-view/view.sass
+++ b/gallery/static/sass/components/image-view/view.sass
@@ -1,5 +1,4 @@
 @import 'background'
-@import 'fullscreen'
 @import 'info-tab'
 @import 'image'
 
@@ -18,7 +17,7 @@
     z-index: 3
 
     .image-block
-        margin: 0 0 0 25rem
+        margin: 0 0 0 27rem
         padding: 0
 
         width: calc(100% - 25rem)
diff --git a/gallery/templates/image.html b/gallery/templates/image.html
index 7f5b54c..0575c0a 100644
--- a/gallery/templates/image.html
+++ b/gallery/templates/image.html
@@ -85,10 +85,6 @@
         <span></span>
     </div>
 
-    <div class="image-fullscreen" onclick="imageFullscreenOff()">
-        <img src="" alt="{{ image.alt }}"/>
-    </div>
-
     <div class="image-grid">
         <div class="image-block">
             <div class="image-container">
@@ -145,22 +141,6 @@
         </div>
     
         <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>
-                        <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>
-                    </div>
-                </div>
-            {% endif %}
             <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="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>
@@ -181,6 +161,12 @@
                             <td>Upload date</td>
                             <td><span class="time">{{ image.created_at }}</span></td>
                         </tr>
+                        {% if image.description %}
+                            <tr>
+                                <td>Description</td>
+                                <td>{{ image.description }}</td>
+                            </tr>
+                        {% endif %}
                     </table>
                     <div class="img-colours">
                         {% for col in image.colours %}