From 95bc745b03f839a9b1e25fc0e28ce37c059826eb Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Tue, 4 Apr 2023 19:36:24 +0000
Subject: [PATCH] Update banner structure and styling

---
 gallery/static/sass/components/banner.sass | 159 ++++++++++++++-------
 gallery/templates/groups/group.html        |  98 +++++++++++--
 gallery/templates/groups/list.html         |  19 ++-
 gallery/templates/image.html               |  26 ++--
 gallery/templates/index.html               |  10 +-
 gallery/templates/profile.html             |   6 +-
 6 files changed, 227 insertions(+), 91 deletions(-)

diff --git a/gallery/static/sass/components/banner.sass b/gallery/static/sass/components/banner.sass
index 177be60..451ec88 100644
--- a/gallery/static/sass/components/banner.sass
+++ b/gallery/static/sass/components/banner.sass
@@ -1,14 +1,9 @@
-.banner
+.banner,
+.banner-small
     width: 100%
-    height: 30rem
-
     position: relative
-
-    background-color: RGB($bg-300)
     color: RGB($fg-white)
 
-    transition: opacity 0.3s ease-in-out
-
     &::after
         content: ''
 
@@ -23,6 +18,10 @@
         border-radius: $rad 0 0 0
         box-shadow: 0 calc(#{$rad} * -1) 0 0 RGB($bg-100)
 
+.banner
+    height: 30rem
+    background-color: RGB($bg-300)
+
     img
         position: absolute
         inset: 0
@@ -47,7 +46,61 @@
         z-index: +1
 
     .banner-content
-        padding: 1rem
+        padding: 0.5rem
+
+        width: 100%
+        height: auto
+
+        position: absolute
+        left: 0
+        bottom: 0
+
+        display: grid
+        grid-template-columns: 1fr auto
+        grid-template-rows: 1fr auto auto
+        grid-template-areas: 'info info' 'header header' 'subtitle options'
+        gap: 0.5rem
+
+        z-index: +2
+
+        .banner-header,
+        .banner-info,
+        .banner-subtitle
+            margin: 0
+            padding: 0
+            width: 100%
+
+        .banner-header
+            grid-area: header
+
+            white-space: nowrap
+            text-overflow: ellipsis
+            overflow: hidden
+            text-align: left
+            font-size: 6.9rem
+            font-weight: 800
+
+            color: RGB($primary)
+
+        .banner-info
+            grid-area: info
+            font-size: 1rem
+            font-weight: 600
+        .banner-subtitle
+            grid-area: subtitle
+            font-size: 1rem
+            font-weight: 600
+
+        .pill-row
+            margin-top: auto
+            grid-area: options
+
+.banner-small
+    height: 3.5rem
+    background-color: RGB($bg-100)
+
+    .banner-content
+        padding: 0.5rem
 
         width: 100%
         height: 100%
@@ -55,83 +108,83 @@
         position: absolute
         inset: 0
 
-        display: flex
-        flex-direction: column
-        justify-content: flex-end
+        display: grid
+        grid-template-columns: auto 1fr auto
+        gap: 1rem
 
         z-index: +2
 
-        h1, p
-            margin: 0
+        .banner-header,
+        .banner-info
+            margin: auto 0
             padding: 0
+            width: auto
+            height: auto
+            justify-self: flex-start
 
-            width: 100%
+        .banner-header
+            padding-bottom: 0.25rem
 
             white-space: nowrap
             text-overflow: ellipsis
             overflow: hidden
             text-align: left
-
-        h1
-            font-size: 6.9rem
             font-weight: 800
+            font-size: 1.5rem
 
             color: RGB($primary)
 
-        p
-            font-size: 1rem
+        .banner-info
+            font-size: 0.9rem
             font-weight: 600
 
-    &.small
-        height: 3.5rem
-        background-color: RGB($bg-100)
-
-        .banner-content
-            padding: 0.5rem
-
-            flex-direction: row
-            justify-content: flex-start
-            align-items: center
-            gap: 1rem
-
-            h1
-                width: auto
-                padding-bottom: 0.25rem
-                font-size: 1.5rem
-
-            p
-                width: auto
-                font-size: 0.9rem
+        .pill-row
+            width: auto
+            justify-self: flex-end
+            display: inline-flex
 
 @media (max-width: $breakpoint)
-    .banner
-        width: 100%
-        height: 17rem
-
+    .banner,
+    .banner-small
         &::after
             display: none
 
+    .banner
+        min-height: 17rem
+        height: auto
+
         .banner-content
             padding: 0.5rem
+            height: 100%
 
             display: flex
+            flex-direction: column
             justify-content: center
             align-items: center
+            gap: 0.25rem
 
-            h1
+            .banner-header
                 font-size: 3rem
                 text-align: center
 
-            p
+            .banner-info,
+            .banner-subtitle
                 font-size: 1.1rem
                 text-align: center
-        
-        &.small
-            .banner-content
-                justify-content: center
 
-                h1
-                    text-align: center
+            .pill-row
+                margin-top: 1rem
 
-                p
-                    display: none
+    .banner-small
+        .banner-content
+            display: flex
+            flex-direction: row
+            justify-content: space-between
+            gap: 0
+
+            .banner-header
+                margin: auto 1rem
+                text-align: center
+
+            .banner-info
+                display: none
\ No newline at end of file
diff --git a/gallery/templates/groups/group.html b/gallery/templates/groups/group.html
index e0378ad..9b03c71 100644
--- a/gallery/templates/groups/group.html
+++ b/gallery/templates/groups/group.html
@@ -1,6 +1,46 @@
 {% extends 'layout.html' %}
 {% block nav_groups %}selected{% endblock %}
 {% block head %}
+    {% if images %}
+        <meta name="theme-color" content="rgb({{ images.0.image_colours.0.0 }}{{ images.0.image_colours.0.1 }}{{ images.0.image_colours.0.2 }})"/>
+    {% endif %}
+
+    <script type="text/javascript">
+        function groupShare() {
+            try {
+                navigator.clipboard.writeText(window.location.href)
+                addNotification("Copied link!", 4);
+            } catch (err) {
+                addNotification("Failed to copy link! Are you on HTTP?", 2);
+            }
+        }
+
+        {% if current_user.id == group.author_id %}
+            function groupDelete() {
+                cancelBtn = document.createElement('button');
+                cancelBtn.classList.add('btn-block');
+                cancelBtn.innerHTML = 'AAAAAAAAAA';
+                cancelBtn.onclick = popupDissmiss;
+
+                deleteBtn = document.createElement('button');
+                deleteBtn.classList.add('btn-block');
+                deleteBtn.classList.add('critical');
+                deleteBtn.innerHTML = 'No ragrats!';
+                // deleteBtn.onclick = deleteConfirm;
+                
+                popUpShow('Yeet!',
+                          'Are you surrrre? This action is irreversible and very final.' +
+                          ' This wont delete the images, but it will remove them from this group.',
+                          null,
+                          [cancelBtn, deleteBtn]);
+            }
+
+            function groupEdit() {
+                addNotification("Are you sure you want to edit this image?", 2);
+            }
+        {% endif %}
+    </script>
+
     <style>
         {% if images %}
             .banner::after {
@@ -36,22 +76,56 @@
     </style>
 {% endblock %}
 {% block content %}
-    <div class="banner {% if not images %}small{% endif %}">
-        {% if not images %}
-            <div class="banner-content">
-                <h1>{{ group.name }}</h1>
-                <p>By {{ group.author_username }}</p>
-            </div>
-        {% else %}
+    {% if images %}
+        <div class="banner">
             <img src="{{ url_for('api.file', file_name=images.0.file_name ) }}?r=prev" onload="imgFade(this)" style="opacity:0;"/>
             <span class="banner-filter"></span>
             <div class="banner-content">
-                <p>By {{ group.author_username }} - {{ images|length }} Images</p>
-                <h1>{{ group.name }}</h1>
-                <p>{{ group.description }}</p>
+                <p class="banner-info">By {{ group.author_username }} - {{ images|length }} Images</p>
+                <h1 class="banner-header">{{ group.name }}</h1>
+                <p class="banner-subtitle">{{ group.description }}</p>
+                <div class="pill-row">
+                    <div>
+                        <button class="pill-item" onclick="groupShare()">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M136,96H120V43.31L93.66,69.66A8,8,0,0,1,82.34,58.34l40-40a8,8,0,0,1,11.32,0l40,40a8,8,0,0,1-11.32,11.32L136,43.31Zm64,0H136v40a8,8,0,0,1-16,0V96H56a16,16,0,0,0-16,16v96a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V112A16,16,0,0,0,200,96Z"></path></svg>
+                        </button>
+                    </div>
+                    {% if current_user.id == group.author_id %}
+                        <div>
+                            <button class="pill-item pill__critical" onclick="groupDelete()">
+                                <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-16ZM112,168a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm0-120H96V40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8Z"></path></svg>
+                            </button>
+                            <button class="pill-item pill__critical" onclick="groupEdit()">
+                                <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.63ZM51.31,160l90.35-90.35,16.68,16.69L68,176.68ZM48,179.31,76.69,208H48Zm48,25.38L79.31,188l90.35-90.35h0l16.68,16.69Z"></path></svg>
+                            </button>
+                        </div>
+                    {% endif %}
+                </div>
             </div>
-        {% endif %}
-    </div>
+        </div>
+    {% else %}
+        <div class="banner-small">
+            <div class="banner-content">
+                <h1 class="banner-header">{{ group.name }}</h1>
+                <p class="banner-info">By {{ group.author_username }}</p>
+                <div class="pill-row">
+                    {% if current_user.id == group.author_id %}
+                        <div>
+                            <button class="pill-item" onclick="groupShare()">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M156,128a28,28,0,1,1-28-28A28,28,0,0,1,156,128ZM128,76a28,28,0,1,0-28-28A28,28,0,0,0,128,76Zm0,104a28,28,0,1,0,28,28A28,28,0,0,0,128,180Z"></path></svg>
+                            </button>
+                        </div>
+                    {% else %}
+                        <div>
+                            <button class="pill-item" onclick="groupShare()">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M136,96H120V43.31L93.66,69.66A8,8,0,0,1,82.34,58.34l40-40a8,8,0,0,1,11.32,0l40,40a8,8,0,0,1-11.32,11.32L136,43.31Zm64,0H136v40a8,8,0,0,1-16,0V96H56a16,16,0,0,0-16,16v96a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V112A16,16,0,0,0,200,96Z"></path></svg>
+                            </button>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+        </div>
+    {% endif %}
 
     <form id="modifyGroup" action="/api/group/modify" method="post">
         <input type="text" name="group" placeholder="group id" value="{{ group.id }}">
diff --git a/gallery/templates/groups/list.html b/gallery/templates/groups/list.html
index 9a89232..046eb5f 100644
--- a/gallery/templates/groups/list.html
+++ b/gallery/templates/groups/list.html
@@ -1,15 +1,24 @@
 {% extends 'layout.html' %}
 {% block nav_groups %}selected{% endblock %}
 {% block content %}
-    <div class="banner small">
+    <div class="banner-small">
         <div class="banner-content">
-            <h1>{{ config.WEBSITE.name }}</h1>
+            <h1 class="banner-header">{{ config.WEBSITE.name }}</h1>
             {% if groups|length == 0 %}
-                <p>0 groups :<</p>
+                <p class="banner-info">No groups!!!!</p>
             {% elif groups|length == 69 %}
-                <p>{{ groups|length }} groups, uwu</p>
+                <p class="banner-info">{{ groups|length }} groups, uwu</p>
             {% else %}
-                <p>{{ groups|length }} groups</p>
+                <p class="banner-info">{{ groups|length }} groups</p>
+            {% endif %}
+            {% if current_user.is_authenticated %}
+                <div class="pill-row">
+                    <div>
+                        <button class="pill-item" onclick="groupShare()">
+                            <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,8H136v80a8,8,0,0,1-16,0V136H40a8,8,0,0,1,0-16h80V40a8,8,0,0,1,16,0v80h80A8,8,0,0,1,224,128Z"></path></svg>
+                        </button>
+                    </div>
+                </div>
             {% endif %}
         </div>
     </div>
diff --git a/gallery/templates/image.html b/gallery/templates/image.html
index 3a18789..561a35c 100644
--- a/gallery/templates/image.html
+++ b/gallery/templates/image.html
@@ -2,7 +2,7 @@
 {% block wrapper_class %}image-wrapper{% endblock %}
 {% block head %}
     <meta property="og:image" content="{{ url_for('api.file', file_name=image.file_name) }}"/>
-    <meta name="theme-color" content="#{{ image.image_colours.0.0 }}{{ image.image_colours.0.1 }}{{ image.image_colours.0.2 }}"/>
+    <meta name="theme-color" content="rgb({{ image.image_colours.0.0 }}{{ image.image_colours.0.1 }}{{ image.image_colours.0.2 }})"/>
 
     <script type="text/javascript">
         function imageFullscreenOff() {
@@ -34,18 +34,18 @@
         }
 
         {% if current_user.id == image.author_id %}
-            cancelBtn = document.createElement('button');
-            cancelBtn.classList.add('btn-block');
-            cancelBtn.innerHTML = 'nuuuuuuuu';
-            cancelBtn.onclick = popupDissmiss;
-
-            deleteBtn = document.createElement('button');
-            deleteBtn.classList.add('btn-block');
-            deleteBtn.classList.add('critical');
-            deleteBtn.innerHTML = 'Dewww eeeet!';
-            deleteBtn.onclick = deleteConfirm;
-
             function imageDelete() {
+                cancelBtn = document.createElement('button');
+                cancelBtn.classList.add('btn-block');
+                cancelBtn.innerHTML = 'nuuuuuuuu';
+                cancelBtn.onclick = popupDissmiss;
+
+                deleteBtn = document.createElement('button');
+                deleteBtn.classList.add('btn-block');
+                deleteBtn.classList.add('critical');
+                deleteBtn.innerHTML = 'Dewww eeeet!';
+                deleteBtn.onclick = deleteConfirm;
+                
                 popUpShow('DESTRUCTION!!!!!!',
                           'Do you want to delete this image along with all of its data??? ' +
                           'This action is irreversible!',
@@ -130,7 +130,7 @@
                     </span>
                 </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="M212,200a36,36,0,1,1-69.85-12.25l-53-34.05a36,36,0,1,1,0-51.4l53-34a36.09,36.09,0,1,1,8.67,13.45l-53,34.05a36,36,0,0,1,0,24.5l53,34.05A36,36,0,0,1,212,200Z"></path></svg>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M136,96H120V43.31L93.66,69.66A8,8,0,0,1,82.34,58.34l40-40a8,8,0,0,1,11.32,0l40,40a8,8,0,0,1-11.32,11.32L136,43.31Zm64,0H136v40a8,8,0,0,1-16,0V96H56a16,16,0,0,0-16,16v96a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V112A16,16,0,0,0,200,96Z"></path></svg>
                     <span class="tool-tip">
                         Share
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,48,88H208a8,8,0,0,1,5.66,13.66Z"></path></svg>
diff --git a/gallery/templates/index.html b/gallery/templates/index.html
index e4289ac..565a655 100644
--- a/gallery/templates/index.html
+++ b/gallery/templates/index.html
@@ -1,15 +1,15 @@
 {% extends 'layout.html' %}
 {% block nav_home %}selected{% endblock %}
 {% block content %}
-    <div class="banner small">
+    <div class="banner-small">
         <div class="banner-content">
-            <h1>{{ config.WEBSITE.name }}</h1>
+            <h1 class="banner-header">{{ config.WEBSITE.name }}</h1>
             {% if images|length == 0 %}
-                <p>0 images :<</p>
+                <p class="banner-info">0 images D:</p>
             {% elif images|length == 69 %}
-                <p>{{ images|length }} images, nice</p>
+                <p class="banner-info">{{ images|length }} images, nice</p>
             {% else %}
-                <p>{{ images|length }} images</p>
+                <p class="banner-info">{{ images|length }} images</p>
             {% endif %}
         </div>
     </div>
diff --git a/gallery/templates/profile.html b/gallery/templates/profile.html
index d917a30..47e4454 100644
--- a/gallery/templates/profile.html
+++ b/gallery/templates/profile.html
@@ -2,10 +2,10 @@
 
 {% block nav_profile %}selected{% endblock %}
 {% block content %}
-    <div class="banner small">
+    <div class="banner-small">
         <div class="banner-content">
-            <h1>{{ user.username }}</h1>
-            <p>Member since <span class="time">{{ user.created_at }}</span></p>
+            <h1 class="banner-header">{{ user.username }}</h1>
+            <p class="banner-info">Member since <span class="time">{{ user.created_at }}</span></p>
         </div>
     </div>
     {% if images %}