Add basic Image Group functions

Make the Upload Pannel usable on mobile
Remove useless code as Django had built-in functions to read the config
Remove useless JS code
Cleanup tempaltes

gallery/themes/default/components/elements/tags.sass

@@ -0,0 +1,24 @@
+.tag-icon
+    margin: 0
+    padding: 0.25rem 0.5rem
+
+
+    display: flex
+    align-items: center
+    justify-content: center
+    gap: 0.25rem
+
+    font-size: 1rem
+    font-weight: 500
+    text-decoration: none
+
+    border-radius: $rad-inner
+    background-color: $primary
+    color: $black
+    border: none
+
+    cursor: pointer
+
+    svg
+        width: 1.15rem
+        height: 1.15rem

gallery/themes/default/components/elements/upload-panel.sass

@@ -1,11 +1,11 @@
 .upload-panel
     position: fixed
-    top: 0
-    left: 0
+    left: 3.5rem
+    bottom: 0
 
     display: none
 
-    width: 100%
+    width: calc(100% - 3.5rem)
     height: 100vh
 
     background-color: rgba($black, 0)
@@ -98,8 +98,8 @@
         padding: 0.5rem
 
         position: absolute
-        top: 0
-        left: calc(-400px + 3.5rem)
+        bottom: 0
+        left: -400px
 
         width: 400px
         height: 100%
@@ -113,7 +113,7 @@
 
         z-index: +2
 
-        transition: left 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), opacity 0.25s cubic-bezier(0.76, 0, 0.17, 1)
 
     .upload-jobs
         display: flex
@@ -213,7 +213,27 @@
         background-color: rgba($black, 0.5)
 
         .container
-            left: 3.5rem
+            left: 0
             opacity: 1
 
-        
+@media (max-width: $breakpoint)
+    .upload-panel
+        width: 100%
+        height: calc(100vh - 3.5rem)
+
+        left: 0
+        bottom: 3.5rem
+
+        .container
+            padding: 1rem
+            
+            width: 100%
+            height: calc(100% - 10rem)
+            
+            left: 0
+            bottom: calc(-100vh + 3.5rem)
+
+        &.open
+            .container
+                left: 0
+                bottom: 0

gallery/themes/default/components/gallery.sass

@@ -44,7 +44,7 @@
         transform: scale(1.05) // scale up
         transition: all 0.3s cubic-bezier(.79, .14, .15, .86)
 
-        h2
+        > h2
             margin: 0
             padding: 0
 
@@ -59,7 +59,7 @@
             opacity: 0 // hide
             transition: all 0.2s ease-in-out
 
-        p
+        > p
             margin: 0
             padding: 0
 
@@ -101,7 +101,7 @@
             opacity: 1
             transform: scale(1)
 
-            h2, p
+            > h2, > p
                 opacity: 1
 
         img

gallery/themes/default/components/image-view/info-tab.sass

@@ -4,6 +4,7 @@
 
     display: flex
     flex-direction: column
+    gap: 0.5rem
 
     background-color: $black
 
@@ -93,7 +94,7 @@
 
     display: flex
     flex-direction: column
-    gap: 0.5rem
+    gap: 1rem
 
     color: $white
 
@@ -163,9 +164,6 @@
             padding-bottom: 0
 
 .img-colours
-    margin: 0
-    padding: 0
-
     width: 100%
 
     display: flex
@@ -182,5 +180,11 @@
         justify-content: center
         align-items: center
 
-        border-radius: $rad
-        border: 1px solid $white
+        border-radius: $rad-inner
+        // border: 1px solid $white
+
+.img-groups
+    width: 100%
+
+    display: flex
+    gap: 0.5rem

gallery/themes/default/components/image-view/view.sass

@@ -51,7 +51,6 @@
         padding: 0
 
     .info-container
-        gap: 0.5rem
         background: transparent
     
     .info-header

gallery/themes/default/style.sass

@@ -7,6 +7,7 @@
 @import "components/elements/notification"
 @import "components/elements/pop-up"
 @import "components/elements/upload-panel"
+@import "components/elements/tags"
 
 @import "components/navigation"
 @import "components/banner"
@@ -46,6 +47,30 @@ html, body
     background-color: $white
     color: $black
 
+.big-text
+    height: 60vh
+
+    display: flex
+    flex-direction: column
+    justify-content: center
+    align-items: center
+
+    color: $black
+
+    h1
+        margin: 0 2rem
+        
+        font-size: 4rem
+        font-weight: 900
+        text-align: center
+
+    p
+        margin: 0 2rem
+
+        max-width: 40rem
+        font-size: 1rem
+        font-weight: 400
+        text-align: center
 
 .error-page
     width: 100%
@@ -77,10 +102,50 @@ html, body
 
         color: $white
 
+footer
+    margin: 0
+    padding: 0.25rem 1rem
+
+    width: 100%
+
+    display: flex
+    justify-content: center
+    align-items: center
+    gap: 1rem
+
+    background-color: $white
+
+    p
+        margin: 0
+        padding: 0
+
+        font-size: 0.75rem
+        font-weight: 400
+        text-align: center
+
+        color: $black
+    
+    a
+        margin: 0
+        padding: 0
+
+        font-size: 0.75rem
+        font-weight: 400
+        text-align: center
+
+        color: $primary
+
+
 @media (max-width: $breakpoint)
     .wrapper
         padding: 0 0 3.5rem 0
 
+    .big-text
+        height: calc(75vh - 3.5rem)
+
+        h1
+            font-size: 3.5rem
+
     .error-page
         height: calc(100vh - 3.5rem)