From c7e38dfcfb273d7bb126bc5f497ac9943abf6e3a Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Sun, 2 Apr 2023 21:15:51 +0000
Subject: [PATCH] Change navbar colour in image groups

---
 gallery/templates/groups/group.html           | 14 ++++
 gallery/templates/layout.html                 | 14 ++--
 gallery/themes/default/components/banner.sass | 70 ++++++++++++-------
 .../themes/default/components/gallery.sass    | 10 +--
 .../themes/default/components/navigation.sass | 16 ++---
 5 files changed, 78 insertions(+), 46 deletions(-)

diff --git a/gallery/templates/groups/group.html b/gallery/templates/groups/group.html
index 9556124..3f388c8 100644
--- a/gallery/templates/groups/group.html
+++ b/gallery/templates/groups/group.html
@@ -3,6 +3,9 @@
 {% block head %}
     <style>
         {% if images %}
+            .banner::after {
+                box-shadow: 0 calc(var(--rad) * -1) 0 0 rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }});
+            }
             .banner-content p {
                 color: {{ text_colour }} !important;
             }
@@ -18,6 +21,17 @@
                     background: linear-gradient(180deg, rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.8), rgba({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}, 0.5)) !important;
                 }
             }
+
+            .navigation {
+                background-color: rgb({{ images.0.image_colours.0.0 }}, {{ images.0.image_colours.0.1 }}, {{ images.0.image_colours.0.2 }}) !important;
+            }
+            .navigation-item > svg {
+                fill: {{ text_colour }} !important;
+                color: {{ text_colour }} !important;
+            }
+            .navigation-item.selected::before {
+                background-color: {{ text_colour }} !important;
+            }
         {% endif %}
     </style>
 {% endblock %}
diff --git a/gallery/templates/layout.html b/gallery/templates/layout.html
index 70cb4a0..9e776fc 100644
--- a/gallery/templates/layout.html
+++ b/gallery/templates/layout.html
@@ -58,11 +58,11 @@
     <div class="wrapper">
 
         <div class="navigation">
-            <img src="{{url_for('static', filename='icon.png')}}" alt="Logo" class="logo" onload="this.style.opacity=1;" style="opacity:0">
+            <!--<img src="{{url_for('static', filename='icon.png')}}" alt="Logo" class="logo" onload="this.style.opacity=1;" style="opacity:0">-->
 
             <a href="{{url_for('gallery.index')}}" class="navigation-item {% block nav_home %}{% endblock %}">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M208,32H80A16,16,0,0,0,64,48V64H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V192h16a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM80,48H208v69.38l-16.7-16.7a16,16,0,0,0-22.62,0L93.37,176H80Zm96,160H48V80H64v96a16,16,0,0,0,16,16h96ZM104,88a16,16,0,1,1,16,16A16,16,0,0,1,104,88Z"></path></svg>
-                <span>
+                <span class="tool-tip">
                     Home
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
                 </span>
@@ -70,7 +70,7 @@
 
             <a href="{{url_for('group.groups')}}" class="navigation-item {% block nav_groups %}{% endblock %}">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M245,110.64A16,16,0,0,0,232,104H216V88a16,16,0,0,0-16-16H130.67L102.94,51.2a16.14,16.14,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V208h0a8,8,0,0,0,8,8H211.1a8,8,0,0,0,7.59-5.47l28.49-85.47A16.05,16.05,0,0,0,245,110.64ZM93.34,64l27.73,20.8a16.12,16.12,0,0,0,9.6,3.2H200v16H146.43a16,16,0,0,0-8.88,2.69l-20,13.31H69.42a15.94,15.94,0,0,0-14.86,10.06L40,166.46V64Z"></path></svg>
-                <span>
+                <span class="tool-tip">
                     Groups
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
                 </span>
@@ -79,7 +79,7 @@
             {% if g.user %}
                 <button class="navigation-item {% block nav_upload %}{% endblock %}" onclick="toggleUploadTab()">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M74.34,77.66a8,8,0,0,1,0-11.32l48-48a8,8,0,0,1,11.32,0l48,48a8,8,0,0,1-11.32,11.32L136,43.31V128a8,8,0,0,1-16,0V43.31L85.66,77.66A8,8,0,0,1,74.34,77.66ZM240,136v64a16,16,0,0,1-16,16H32a16,16,0,0,1-16-16V136a16,16,0,0,1,16-16h68a4,4,0,0,1,4,4v3.46c0,13.45,11,24.79,24.46,24.54A24,24,0,0,0,152,128v-4a4,4,0,0,1,4-4h68A16,16,0,0,1,240,136Zm-40,32a12,12,0,1,0-12,12A12,12,0,0,0,200,168Z"></path></svg>
-                    <span>
+                    <span class="tool-tip">
                         Upload
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
                     </span>
@@ -91,7 +91,7 @@
             {% if g.user %}
                 <a href="{{url_for('gallery.profile')}}" class="navigation-item {% block nav_profile %}{% endblock %}">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M231.73,221.94A8,8,0,0,1,224,232H160A8,8,0,0,1,152.27,222a40,40,0,0,1,17.11-23.33,32,32,0,1,1,45.24,0A40,40,0,0,1,231.73,221.94ZM216,72H130.67L102.93,51.2a16.12,16.12,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V200a16,16,0,0,0,16,16h80a8,8,0,0,0,0-16H40V64H93.33l27.74,20.8a16.12,16.12,0,0,0,9.6,3.2H216v32a8,8,0,0,0,16,0V88A16,16,0,0,0,216,72Z"></path></svg>
-                    <span>
+                    <span class="tool-tip">
                         Profile
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
                     </span>
@@ -99,7 +99,7 @@
             
                 <a href="{{url_for('settings.general')}}" class="navigation-item {% block nav_settings %}{% endblock %}">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M216,130.16q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.6,107.6,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.29,107.29,0,0,0-26.25-10.86,8,8,0,0,0-7.06,1.48L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.6,107.6,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06ZM128,168a40,40,0,1,1,40-40A40,40,0,0,1,128,168Z"></path></svg>
-                    <span>
+                    <span class="tool-tip">
                         Settings
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
                     </span>
@@ -107,7 +107,7 @@
             {% else %}
                 <button class="navigation-item {% block nav_login %}{% endblock %}" onclick="showLogin()">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M141.66,133.66l-40,40A8,8,0,0,1,88,168V136H24a8,8,0,0,1,0-16H88V88a8,8,0,0,1,13.66-5.66l40,40A8,8,0,0,1,141.66,133.66ZM192,32H136a8,8,0,0,0,0,16h56V208H136a8,8,0,0,0,0,16h56a16,16,0,0,0,16-16V48A16,16,0,0,0,192,32Z"></path></svg>
-                    <span>
+                    <span class="tool-tip">
                         Login
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M168,48V208a8,8,0,0,1-13.66,5.66l-80-80a8,8,0,0,1,0-11.32l80-80A8,8,0,0,1,168,48Z"></path></svg>
                     </span>
diff --git a/gallery/themes/default/components/banner.sass b/gallery/themes/default/components/banner.sass
index 97aa3a7..177be60 100644
--- a/gallery/themes/default/components/banner.sass
+++ b/gallery/themes/default/components/banner.sass
@@ -1,32 +1,43 @@
 .banner
     width: 100%
-    height: 50vh
+    height: 30rem
 
     position: relative
 
     background-color: RGB($bg-300)
     color: RGB($fg-white)
 
-    overflow: hidden
     transition: opacity 0.3s ease-in-out
 
+    &::after
+        content: ''
+
+        width: $rad
+        height: calc(#{$rad} * 2)
+
+        position: absolute
+        bottom: calc(#{$rad} * -2)
+        left: 0
+
+        background-color: RGB($bg-bright)
+        border-radius: $rad 0 0 0
+        box-shadow: 0 calc(#{$rad} * -1) 0 0 RGB($bg-100)
+
     img
         position: absolute
-        top: 0
-        left: 0
+        inset: 0
 
         width: 100%
         height: 100%
 
-        background-color: RGB($bg-300)
+        background-color: inherit
 
         object-fit: cover
         object-position: center center
 
     .banner-filter
         position: absolute
-        top: 0
-        left: 0
+        inset: 0
 
         width: 100%
         height: 100%
@@ -39,9 +50,10 @@
         padding: 1rem
 
         width: 100%
-        height: inherit
+        height: 100%
 
-        position: relative
+        position: absolute
+        inset: 0
 
         display: flex
         flex-direction: column
@@ -49,24 +61,26 @@
 
         z-index: +2
 
-        h1
+        h1, p
             margin: 0
             padding: 0
 
+            width: 100%
+
+            white-space: nowrap
+            text-overflow: ellipsis
+            overflow: hidden
+            text-align: left
+
+        h1
             font-size: 6.9rem
             font-weight: 800
-            text-align: left
 
             color: RGB($primary)
 
         p
-            margin: 0
-            padding: 0
-
             font-size: 1rem
             font-weight: 600
-            line-height: 1
-            text-align: left
 
     &.small
         height: 3.5rem
@@ -81,18 +95,21 @@
             gap: 1rem
 
             h1
+                width: auto
                 padding-bottom: 0.25rem
                 font-size: 1.5rem
-                text-align: left
 
             p
+                width: auto
                 font-size: 0.9rem
-                text-align: left
 
 @media (max-width: $breakpoint)
     .banner
-        width: 100vw
-        height: 25vh
+        width: 100%
+        height: 17rem
+
+        &::after
+            display: none
 
         .banner-content
             padding: 0.5rem
@@ -109,11 +126,12 @@
                 font-size: 1.1rem
                 text-align: center
         
-        &.small .banner-content
-            justify-content: center
+        &.small
+            .banner-content
+                justify-content: center
 
-            h1
-                text-align: center
+                h1
+                    text-align: center
 
-            p
-                display: none
\ No newline at end of file
+                p
+                    display: none
diff --git a/gallery/themes/default/components/gallery.sass b/gallery/themes/default/components/gallery.sass
index ee6a18d..19885f3 100644
--- a/gallery/themes/default/components/gallery.sass
+++ b/gallery/themes/default/components/gallery.sass
@@ -16,7 +16,7 @@
 
     position: relative
 
-    border-radius: $rad
+    border-radius: $rad-inner
 
     box-sizing: border-box
     overflow: hidden
@@ -26,7 +26,8 @@
         padding: 0.5rem
 
         width: 100%
-        height: 30%
+        min-height: 30%
+        height: auto
 
         position: absolute
         left: 0
@@ -104,7 +105,7 @@
 
     position: relative
 
-    border-radius: $rad
+    border-radius: $rad-inner
 
     box-sizing: border-box
     overflow: hidden
@@ -114,7 +115,8 @@
         padding: 0.5rem
 
         width: 100%
-        height: 30%
+        min-height: 30%
+        height: auto
 
         position: absolute
         left: 0
diff --git a/gallery/themes/default/components/navigation.sass b/gallery/themes/default/components/navigation.sass
index 07c8ce1..718c351 100644
--- a/gallery/themes/default/components/navigation.sass
+++ b/gallery/themes/default/components/navigation.sass
@@ -61,12 +61,12 @@
         width: 2.5rem
         height: 2.5rem
 
-        color: RGB($fg-white)
         border-radius: $rad-inner
+        color: RGB($fg-white)
         
         transition: color 0.2s ease-out, transform 0.2s ease-out
 
-    span
+    .tool-tip
         margin: 0
         padding: 0.35rem 0.7rem
 
@@ -89,7 +89,7 @@
 
         pointer-events: none
 
-        svg
+        > svg
             margin: 0
             font-size: 1rem
 
@@ -107,7 +107,7 @@
 
     &:hover
         > svg
-            background: RGB($bg-300)
+            background: RGBA($fg-white, 0.1)
 
         span
             opacity: 1
@@ -129,7 +129,7 @@
             height: calc(100% - 6px)
 
             background-color: RGB($primary)
-            border-radius: 0 $rad-inner $rad-inner 0
+            border-radius: $rad-inner
 
 @media (max-width: $breakpoint)
     .navigation
@@ -158,7 +158,7 @@
         height: 3rem
         min-height: 3rem
 
-        span
+        .tool-tip
             display: none
 
         &.selected::before
@@ -167,6 +167,4 @@
             left: 0
 
             width: 100%
-            height: 3px
-
-            border-radius: $rad-inner
\ No newline at end of file
+            height: 3px
\ No newline at end of file