diff --git a/gallery/__init__.py b/gallery/__init__.py
index 80f403b..71ff39e 100644
--- a/gallery/__init__.py
+++ b/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)
diff --git a/gallery/static/js/pre/notifications.js b/gallery/static/js/pre/notifications.js
index 6b4f9d7..f550344 100644
--- a/gallery/static/js/pre/notifications.js
+++ b/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);
diff --git a/gallery/static/sass/animations.sass b/gallery/static/sass/animations.sass
index 364f9d4..9fc623e 100644
--- a/gallery/static/sass/animations.sass
+++ b/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%
diff --git a/gallery/static/sass/components/banner.sass b/gallery/static/sass/components/banner.sass
index 4ab9c9e..6611be8 100644
--- a/gallery/static/sass/components/banner.sass
+++ b/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
diff --git a/gallery/static/sass/components/elements/notification.sass b/gallery/static/sass/components/elements/notification.sass
index 76de391..078ae97 100644
--- a/gallery/static/sass/components/elements/notification.sass
+++ b/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)
diff --git a/gallery/static/sass/components/gallery.sass b/gallery/static/sass/components/gallery.sass
index 63a832e..7079937 100644
--- a/gallery/static/sass/components/gallery.sass
+++ b/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
diff --git a/gallery/static/sass/components/image-view/fullscreen.sass b/gallery/static/sass/components/image-view/fullscreen.sass
index 3c61771..f8e0fbc 100644
--- a/gallery/static/sass/components/image-view/fullscreen.sass
+++ b/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
diff --git a/gallery/static/sass/components/image-view/view.sass b/gallery/static/sass/components/image-view/view.sass
index 6636976..618d687 100644
--- a/gallery/static/sass/components/image-view/view.sass
+++ b/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
\ No newline at end of file
diff --git a/gallery/templates/groups/group.html b/gallery/templates/groups/group.html
index 11638ab..0223f47 100644
--- a/gallery/templates/groups/group.html
+++ b/gallery/templates/groups/group.html
@@ -212,7 +212,7 @@