very nice?

Compress JS and Sass files
remove useless Span for notifications and switch to after
Go back to 400x400px thumbnails
Add link for group creator

gallery/__init__.py

@@ -82,19 +82,21 @@ def create_app(test_config=None):
 
     js_pre = Bundle(
         'js/pre/*.js',
+        filters='jsmin',
         output='gen/pre_packed.js',
-        depends='js/pre/*.js'
+        depends='**'
     )
     js_post = Bundle(
         'js/post/*.js',
+        filters='jsmin',
         output='gen/post_packed.js',
-        depends='js/post/*.js'
+        depends='**'
     )
     styles = Bundle(
         'sass/*.sass',
-        filters='libsass',
+        filters='libsass,cssmin',
         output='gen/styles.css',
-        depends='sass/**/*.sass'
+        depends='**'
     )
 
     assets.register('js_pre', js_pre)

gallery/static/js/pre/notifications.js

@@ -24,6 +24,7 @@ function addNotification(notificationText, notificationLevel) {
     let iconElement = document.createElement('span');
     iconElement.classList.add('sniffle__notification-icon');
     notification.appendChild(iconElement);
+    
     // Set the icon based on the notification level, not pretty but it works :3
     if (notificationLevel === 1) {
         notification.classList.add('success');
@@ -45,11 +46,6 @@ function addNotification(notificationText, notificationLevel) {
     description.innerHTML = notificationText;
     notification.appendChild(description);
 
-    // Create span to show time remaining
-    let timer = document.createElement('span');
-    timer.classList.add('sniffle__notification-time');
-    notification.appendChild(timer);
-
     // Append notification to container
     notificationContainer.appendChild(notification);
     setTimeout(function() { notification.classList.add('show'); }, 5);

gallery/static/sass/animations.sass

@@ -4,20 +4,6 @@
     100%
         background-position: 468px 0
 
-@keyframes notificationTimeout
-    0%
-        left: -100%
-        height: 3px
-    90%
-        left: 0%
-        height: 3px
-    95%
-        left: 0%
-        height: 0
-    100%
-        left: 0%
-        height: 0
-
 @keyframes uploadingLoop
     0%
         left: -100%

gallery/static/sass/components/banner.sass

@@ -4,6 +4,15 @@
     position: relative
     color: RGB($fg-white)
 
+    .link
+        color: inherit
+
+        cursor: pointer
+        text-decoration: underline
+
+        &:hover
+            text-decoration: none
+
     &::after
         content: ''
 
@@ -73,9 +82,6 @@
         .banner-header
             grid-area: header
 
-            white-space: nowrap
-            text-overflow: ellipsis
-            overflow: hidden
             text-align: left
             font-size: 6.9rem
             font-weight: 800
@@ -164,14 +170,16 @@
             gap: 0.25rem
 
             .banner-header
-                font-size: 3rem
                 text-align: center
+                font-size: 2.5rem
 
-            .banner-info,
-            .banner-subtitle
+            .banner-info
                 font-size: 1.1rem
                 text-align: center
 
+            .banner-subtitle
+                display: none
+
             .pill-row
                 margin-top: 1rem
 

gallery/static/sass/components/elements/notification.sass

@@ -1,7 +1,21 @@
+@keyframes notificationTimeout
+    0%
+        left: -100%
+        height: 3px
+    90%
+        left: 0%
+        height: 3px
+    95%
+        left: 0%
+        height: 0
+    100%
+        left: 0%
+        height: 0
+    
 @mixin notification($color)
     color: RGB($color)
 
-    .sniffle__notification-time
+    &::after
         background-color: RGB($color)
     
 .notifications
@@ -44,6 +58,21 @@
 
     transition: all 0.25s ease-in-out, opacity 0.2s ease-in-out, transform 0.2s cubic-bezier(.68,-0.55,.27,1.55)
 
+    &::after
+        content: ""
+
+        width: 450px
+        height: 3px
+
+        position: absolute
+        bottom: 0px
+        left: 0px
+
+        background-color: RGB($fg-white)
+
+        z-index: +2
+        animation: notificationTimeout 5.1s linear
+
     &.success
         @include notification($success)
     &.warning
@@ -100,21 +129,6 @@
     line-height: 1
     text-align: left
 
-.sniffle__notification-time
-    margin: 0
-    padding: 0
-
-    width: 450px
-    height: 3px
-
-    position: absolute
-    bottom: 0px
-    left: 0px
-
-    background-color: RGB($fg-white)
-
-    animation: notificationTimeout 5.1s linear
-
 @media (max-width: $breakpoint)
     .notifications
         width: calc(100vw - 0.6rem)

gallery/static/sass/components/gallery.sass

@@ -1,12 +1,12 @@
 .gallery-grid
     margin: 0
-    padding: 0.5rem
+    padding: 0.65rem
 
     width: 100%
 
     display: grid
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
-    gap: 0.5rem
+    gap: 0.65rem
 
 .gallery-item
     margin: 0
@@ -17,9 +17,11 @@
     position: relative
 
     border-radius: $rad-inner
+    box-shadow: 0 0.15rem 0.4rem 0.1rem RGBA($bg-100, 0.4)
 
     box-sizing: border-box
     overflow: hidden
+    transition: box-shadow 0.2s cubic-bezier(.79, .14, .15, .86)
 
     .image-filter
         margin: 0
@@ -37,11 +39,11 @@
         flex-direction: column
         justify-content: flex-end
 
-        background-image: linear-gradient(to top, rgba($bg-100, 0.5), transparent)
+        background-image: linear-gradient(to top, rgba($bg-100, 0.69), transparent)
         opacity: 0 // hide
 
         z-index: +4
-        transition: background-image 0.3s cubic-bezier(.79, .14, .15, .86), opacity 0.3s cubic-bezier(.79, .14, .15, .86)
+        transition: opacity 0.2s cubic-bezier(.79, .14, .15, .86)
 
         .image-title,
         .image-subtitle
@@ -72,7 +74,6 @@
 
         object-fit: cover
         object-position: center
-        transform: scale(1.05)
 
         background-color: RGB($bg-bright)
         filter: blur(0.5rem)
@@ -90,12 +91,10 @@
         padding-bottom: 100%
 
     &:hover
-        .image-filter
-            background-image: linear-gradient(to top, rgba($bg-100, 0.69), transparent)
-            opacity: 1
+        box-shadow: 0 0.2rem 0.4rem 0.1rem RGBA($bg-100, 0.6)
 
-        img
-            transform: scale(1)
+        .image-filter
+            opacity: 1
 
 .group-item
     margin: 0

gallery/static/sass/components/image-view/fullscreen.sass

@@ -1,6 +1,6 @@
 .image-fullscreen
     margin: 0
-    padding: 0 0 0 3.5rem
+    padding: 0
 
     width: 100%
     height: 100%
@@ -14,7 +14,7 @@
     opacity: 0 // hide
 
     background-color: $bg-transparent
-    z-index: 21
+    z-index: 100
 
     box-sizing: border-box
 

gallery/static/sass/components/image-view/view.sass

@@ -59,7 +59,4 @@
     .info-tab.collapsed .info-header
         border-radius: $rad
 
-@media (max-width: $breakpoint)
-    .image-fullscreen
-        padding: 0 0 3.5rem 0
         

gallery/templates/groups/group.html

@@ -212,7 +212,7 @@
             <img src="{{ url_for('api.file', file_name=images.0.filename ) }}?r=prev" onload="imgFade(this)" style="opacity:0;"/>
             <span class="banner-filter"></span>
             <div class="banner-content">
-                <p class="banner-info">By {{ group.author_username }} - {{ images|length }} Images</p>
+                <p class="banner-info">By <a href="{{ url_for('gallery.profile', id=group.author_id) }}" class="link">{{ group.author_username }}</a> - {{ images|length }} Images</p>
                 <h1 class="banner-header">{{ group.name }}</h1>
                 <p class="banner-subtitle">{{ group.description }}</p>
                 <div class="pill-row">

gallery/utils/generate_image.py

@@ -37,7 +37,7 @@ def generate_thumbnail(file_name, resolution, ext=None):
     if resolution in ['prev', 'preview']:
         res_x, res_y = (1920, 1080)
     elif resolution in ['thumb', 'thumbnail']:
-        res_x, res_y = (350, 350)
+        res_x, res_y = (400, 400)
     elif resolution in ['icon', 'favicon']:
         res_x, res_y = (10, 10)
     else:

poetry.lock

@@ -166,6 +166,17 @@ files = [
 [package.dependencies]
 Pillow = "*"
 
+[[package]]
+name = "cssmin"
+version = "0.2.0"
+description = "A Python port of the YUI CSS compression algorithm."
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "cssmin-0.2.0.tar.gz", hash = "sha256:e012f0cc8401efcf2620332339011564738ae32be8c84b2e43ce8beaec1067b6"},
+]
+
 [[package]]
 name = "dill"
 version = "0.3.6"
@@ -431,6 +442,17 @@ MarkupSafe = ">=2.0"
 [package.extras]
 i18n = ["Babel (>=2.7)"]
 
+[[package]]
+name = "jsmin"
+version = "3.0.1"
+description = "JavaScript minifier."
+category = "main"
+optional = false
+python-versions = "*"
+files = [
+    {file = "jsmin-3.0.1.tar.gz", hash = "sha256:c0959a121ef94542e807a674142606f7e90214a2b3d1eb17300244bbb5cc2bfc"},
+]
+
 [[package]]
 name = "lazy-object-proxy"
 version = "1.9.0"
@@ -1020,4 +1042,4 @@ testing = ["big-O", "flake8 (<5)", "jaraco.functools", "jaraco.itertools", "more
 [metadata]
 lock-version = "2.0"
 python-versions = "^3.8"
-content-hash = "431b58579dc3ebde52c8f3905c851556a465d5a82796a8a26718d69cb4915959"
+content-hash = "58c3430743ce1cfd8e5b89db371a0d454a478cbe79ced08c645b4628980ca9f1"

pyproject.toml

@@ -22,6 +22,8 @@ colorthief = "^0.2.1"
 Pillow = "^9.4.0"
 platformdirs = "^3.0.0"
 pylint = "^2.16.3"
+jsmin = "^3.0.1"
+cssmin = "^0.2.0"
 
 [build-system]
 requires = ["poetry-core"]