From 7eb4355b52634d0073cd81ece4d1a2d1455e7508 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Thu, 6 Apr 2023 14:42:23 +0000 Subject: [PATCH] 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 | 10 ++-- gallery/static/js/pre/notifications.js | 6 +-- gallery/static/sass/animations.sass | 14 ------ gallery/static/sass/components/banner.sass | 20 +++++--- .../components/elements/notification.sass | 46 ++++++++++++------- gallery/static/sass/components/gallery.sass | 19 ++++---- .../components/image-view/fullscreen.sass | 4 +- .../sass/components/image-view/view.sass | 3 -- gallery/templates/groups/group.html | 2 +- gallery/utils/generate_image.py | 2 +- poetry.lock | 24 +++++++++- pyproject.toml | 2 + 12 files changed, 89 insertions(+), 63 deletions(-) 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 @@