From b208b872d79ae82d4178bdf79b5cb3c6994dc567 Mon Sep 17 00:00:00 2001 From: Fluffy-Bean Date: Sun, 12 Mar 2023 18:19:43 +0000 Subject: [PATCH] Make buttons more consistent Rename JumpUp button to top-of-page --- gallery/__init__.py | 3 + gallery/auth.py | 2 +- gallery/static/js/login.js | 4 +- gallery/static/js/main.js | 7 +- gallery/static/js/popup.js | 2 +- gallery/templates/image.html | 2 +- gallery/templates/layout.html | 12 +- .../default/components/buttons/block.sass | 112 ++++++++++++++++++ .../default/components/buttons/pill.sass | 4 +- .../buttons/{jumpUp.sass => top-of-page.sass} | 10 +- .../default/components/elements/pop-up.sass | 80 +------------ .../themes/default/components/navigation.sass | 4 +- gallery/themes/default/style.sass | 3 +- 13 files changed, 143 insertions(+), 102 deletions(-) create mode 100644 gallery/themes/default/components/buttons/block.sass rename gallery/themes/default/components/buttons/{jumpUp.sass => top-of-page.sass} (86%) diff --git a/gallery/__init__.py b/gallery/__init__.py index 9060fe9..20636c5 100644 --- a/gallery/__init__.py +++ b/gallery/__init__.py @@ -68,6 +68,7 @@ def create_app(test_config=None): js = Bundle('js/*.js', output='gen/packed.js') assets.register('js_all', js) + # Error handlers @app.errorhandler(403) @app.errorhandler(404) @app.errorhandler(405) @@ -89,8 +90,10 @@ def create_app(test_config=None): app.register_blueprint(routing.blueprint) app.register_blueprint(settings.blueprint) + # Log to file that the app has started logging.info('Gallery started successfully!') + # Initialize extensions and return app assets.init_app(app) cache.init_app(app) compress.init_app(app) diff --git a/gallery/auth.py b/gallery/auth.py index 31c694c..0c7cfa4 100644 --- a/gallery/auth.py +++ b/gallery/auth.py @@ -164,4 +164,4 @@ def logout(): """ logging.info('User (%s) %s logged out', session.get('user_id'), g.user.username) session.clear() - return redirect(url_for('index')) + return redirect(url_for('gallery.index')) diff --git a/gallery/static/js/login.js b/gallery/static/js/login.js index 78bf5ca..0f1b4d6 100644 --- a/gallery/static/js/login.js +++ b/gallery/static/js/login.js @@ -3,7 +3,7 @@ function showLogin() { popUpShow( 'idk what to put here, just login please', 'Need an account? Register!', - '', + '', '
\ \ \ @@ -57,7 +57,7 @@ function showRegister() { popUpShow( 'Who are you?', 'Already have an account? Login!', - '', + '', '\ \ \ diff --git a/gallery/static/js/main.js b/gallery/static/js/main.js index 85987a3..9a041f2 100644 --- a/gallery/static/js/main.js +++ b/gallery/static/js/main.js @@ -76,12 +76,13 @@ window.onscroll = function () { loadOnView(); // Jump to top button + let topOfPage = document.querySelector('.top-of-page'); if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) { - document.querySelector('.jumpUp').classList = 'jumpUp jumpUp--show'; + topOfPage.classList.add('show'); } else { - document.querySelector('.jumpUp').classList = 'jumpUp'; + topOfPage.classList.remove('show'); } - document.querySelector('.jumpUp').onclick = function () { + topOfPage.onclick = function () { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; } diff --git a/gallery/static/js/popup.js b/gallery/static/js/popup.js index 6bc5c14..c253461 100644 --- a/gallery/static/js/popup.js +++ b/gallery/static/js/popup.js @@ -12,7 +12,7 @@ function popUpShow(title, body, actions, content) { // Set buttons that will be displayed popupActions.innerHTML = actions; - popupActions.innerHTML += ''; + popupActions.innerHTML += ''; // Show popup popup.style.display = 'block'; diff --git a/gallery/templates/image.html b/gallery/templates/image.html index 595507b..7cc9666 100644 --- a/gallery/templates/image.html +++ b/gallery/templates/image.html @@ -259,7 +259,7 @@ popUpShow( 'DESTRUCTION!!!!!!', 'This will delete the image and all of its data!!! This action is irreversible!!!!! Are you sure you want to do this?????', - '', + '', '' ); }); diff --git a/gallery/templates/layout.html b/gallery/templates/layout.html index 6fec1aa..1e7eb18 100644 --- a/gallery/templates/layout.html +++ b/gallery/templates/layout.html @@ -14,7 +14,7 @@
- +
@@ -96,11 +96,11 @@

Upload stuffs

May the world see your stuff 👀

- - - - - + + + + +
diff --git a/gallery/themes/default/components/buttons/block.sass b/gallery/themes/default/components/buttons/block.sass new file mode 100644 index 0000000..b4cd78b --- /dev/null +++ b/gallery/themes/default/components/buttons/block.sass @@ -0,0 +1,112 @@ +@mixin btn-block($color) + background-color: transparent + color: $color + + &:hover + background-color: $color + color: $black + + &:focus-visible + outline: 2px solid rgba($color, 0.5) + +.btn-block + padding: 0.5rem 1rem + + width: auto + min-height: 2.5rem + + display: flex + justify-content: center + align-items: center + gap: 0.5rem + + position: relative + + font-size: 1rem + font-weight: 600 + text-align: center + + background-color: transparent + color: $black + border: none + border-radius: $rad-inner + + cursor: pointer + + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out + + &:hover + background-color: $black + color: $white + + &:focus-visible + outline: 2px solid rgba($black, 0.5) + + &.primary + @include btn-block($primary) + + &.critical + @include btn-block($critical) + + &.warning + @include btn-block($warning) + + &.success + @include btn-block($success) + + &.info + @include btn-block($info) + + +.input-block + padding: 0.5rem 1rem + + width: auto + min-height: 2.5rem + + display: flex + justify-content: flex-start + align-items: center + + position: relative + + font-size: 1rem + font-weight: 600 + text-align: left + + background-color: $black + color: $white + + border: none + border-radius: $rad-inner + + cursor: pointer + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out + + &:hover + outline: 2px solid rgba($white, 0.5) + + &:focus-visible + outline: 2px solid rgba($white, 0.5) + + &.file + padding: 0 1rem 0 0 + + &::file-selector-button + margin-right: 1rem + padding: 0.5rem 1rem + + width: auto + height: 100% + + font-size: 1rem + text-decoration: none + + background-color: $white + color: $black + border: none + border-radius: $rad-inner + + &:not([value=""]) + display: none + diff --git a/gallery/themes/default/components/buttons/pill.sass b/gallery/themes/default/components/buttons/pill.sass index 7660e90..5da49da 100644 --- a/gallery/themes/default/components/buttons/pill.sass +++ b/gallery/themes/default/components/buttons/pill.sass @@ -84,7 +84,7 @@ font-size: 1rem font-weight: 600 - background-color: $black2 + background-color: #000000 color: $white opacity: 0 border-radius: $rad-inner @@ -107,4 +107,4 @@ bottom: -0.46rem transform: translateX(-50%) - color: $black2 \ No newline at end of file + color: #000000 \ No newline at end of file diff --git a/gallery/themes/default/components/buttons/jumpUp.sass b/gallery/themes/default/components/buttons/top-of-page.sass similarity index 86% rename from gallery/themes/default/components/buttons/jumpUp.sass rename to gallery/themes/default/components/buttons/top-of-page.sass index 5ce4663..9534683 100644 --- a/gallery/themes/default/components/buttons/jumpUp.sass +++ b/gallery/themes/default/components/buttons/top-of-page.sass @@ -1,4 +1,4 @@ -.jumpUp +.top-of-page margin: 0 padding: 0.55rem @@ -28,10 +28,10 @@ background-color: $black color: $primary -.jumpUp--show - right: 0.75rem - opacity: 1 + &.show + right: 0.75rem + opacity: 1 @media (max-width: $breakpoint) - .jumpUp + .top-of-page bottom: 4.25rem diff --git a/gallery/themes/default/components/elements/pop-up.sass b/gallery/themes/default/components/elements/pop-up.sass index d4ae0db..4341a4e 100644 --- a/gallery/themes/default/components/elements/pop-up.sass +++ b/gallery/themes/default/components/elements/pop-up.sass @@ -1,21 +1,3 @@ -@mixin pop-up-btn($color, $fill: false) - @if $fill - color: $white - background-color: $color - border: 2px solid $color - - &:hover - background-color: $white - color: $color - @else - color: $color - background-color: $white - border: 2px solid $color - - &:hover - background-color: $color - color: $white - .pop-up width: calc(100% - 3.5rem) height: 100vh @@ -89,7 +71,7 @@ position: sticky top: 0 - font-size: 2.5rem + font-size: 2.25rem font-weight: 600 text-align: center line-height: 1 @@ -151,61 +133,6 @@ .pop-up-wrapper transform: translate(-50%, 50%) scale(1) -.pop-up__btn - margin: 0 - padding: 0.5rem 1rem - - width: auto - height: 2.5rem - - display: flex - justify-content: center - align-items: center - - font-size: 1rem - font-weight: 600 - text-align: center - line-height: 1 - - border-radius: $rad-inner - - cursor: pointer - transition: background-color 0.2s ease, color 0.2s ease - - @include pop-up-btn($black) - - &:focus - outline: none -.pop-up__btn-fill - @include pop-up-btn($black, true) - -@each $name, $colour in (primary: $primary, info: $info, warning: $warning, critical: $critical) - .pop-up__btn-#{$name} - @include pop-up-btn($colour) - .pop-up__btn-#{$name}-fill - @include pop-up-btn($colour, true) - -.pop-up__input - margin: 0 - padding: 0.5rem - - width: 100% - height: 2.5rem - - font-size: 1rem - font-weight: 600 - text-align: left - line-height: 1 - - border-radius: $rad-inner - - background-color: $white - border: 2px solid $black - - &:focus - outline: none - border-color: $primary - .pop-up__link color: $primary text-decoration: none @@ -251,7 +178,4 @@ opacity: 1 .pop-up-wrapper - transform: translateY(0) - - .pop-up__btn - width: 100% \ No newline at end of file + transform: translateY(0) \ No newline at end of file diff --git a/gallery/themes/default/components/navigation.sass b/gallery/themes/default/components/navigation.sass index a9fbf51..c9adf81 100644 --- a/gallery/themes/default/components/navigation.sass +++ b/gallery/themes/default/components/navigation.sass @@ -72,7 +72,7 @@ font-size: 1rem font-weight: 600 - background-color: $black2 + background-color: #000000 color: $white opacity: 0 border-radius: $rad-inner @@ -95,7 +95,7 @@ left: -0.45rem transform: translateY(-50%) - color: $black2 + color: #000000 &:hover background-color: $black2 diff --git a/gallery/themes/default/style.sass b/gallery/themes/default/style.sass index da2b4fd..b2da044 100644 --- a/gallery/themes/default/style.sass +++ b/gallery/themes/default/style.sass @@ -13,8 +13,9 @@ @import "components/banner" @import "components/gallery" -@import "components/buttons/jumpUp" +@import "components/buttons/top-of-page" @import "components/buttons/pill" +@import "components/buttons/block" @import "components/image-view/view"