Make buttons more consistent

Rename JumpUp button to top-of-page

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)

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'))

gallery/static/js/login.js

@@ -3,7 +3,7 @@ function showLogin() {
     popUpShow(
         'idk what to put here, just login please',
         'Need an account? <span class="pop-up__link" onclick="showRegister()">Register!</span>',
-        '<button class="pop-up__btn pop-up__btn-primary-fill" form="loginForm" type="submit">Login</button>',
+        '<button class="btn-block primary" form="loginForm" type="submit">Login</button>',
         '<form id="loginForm"  onsubmit="return login(event)">\
             <input class="pop-up__input" type="text" placeholder="Namey" id="username"/>\
             <input class="pop-up__input" type="password" placeholder="Passywassy" id="password"/>\
@@ -57,7 +57,7 @@ function showRegister() {
     popUpShow(
         'Who are you?',
         'Already have an account? <span class="pop-up__link" onclick="showLogin()">Login!</span>',
-        '<button class="pop-up__btn pop-up__btn-primary-fill" form="registerForm" type="submit">Register</button>',
+        '<button class="btn-block primary" form="registerForm" type="submit">Register</button>',
         '<form id="registerForm" onsubmit="return register(event)">\
             <input class="pop-up__input" type="text" placeholder="Namey" id="username"/>\
             <input class="pop-up__input" type="text" placeholder="E mail!" id="email"/>\

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;
     }

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 += '<button class="pop-up__btn pop-up__btn-fill" onclick="popupDissmiss()">Nooooooo</button>';
+    popupActions.innerHTML += '<button class="btn-block" onclick="popupDissmiss()">Nooooooo</button>';
 
     // Show popup
     popup.style.display = 'block';

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?????',
-                    '<button class="pop-up__btn pop-up__btn-critical-fill" onclick="deleteImage()">Dewww eeeet!</button>',
+                    '<button class="btn-block critical" onclick="deleteImage()">Dewww eeeet!</button>',
                     '<img src="/api/uploads/{{ image.file_name }}?w=1920&h=1080" />'
                     );
             });

gallery/templates/layout.html

@@ -14,7 +14,7 @@
 <body>
     <div class="notifications"></div>
 
-    <svg class="jumpUp"  xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,120H176v88a8,8,0,0,1-8,8H88a8,8,0,0,1-8-8V120H32l96-96Z" opacity="0.2"></path><path d="M229.66,114.34l-96-96a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,32,128H72v80a16,16,0,0,0,16,16h80a16,16,0,0,0,16-16V128h40a8,8,0,0,0,5.66-13.66ZM176,112a8,8,0,0,0-8,8v88H88V120a8,8,0,0,0-8-8H51.31L128,35.31,204.69,112Z"></path></svg>
+    <svg class="top-of-page"  xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,120H176v88a8,8,0,0,1-8,8H88a8,8,0,0,1-8-8V120H32l96-96Z" opacity="0.2"></path><path d="M229.66,114.34l-96-96a8,8,0,0,0-11.32,0l-96,96A8,8,0,0,0,32,128H72v80a16,16,0,0,0,16,16h80a16,16,0,0,0,16-16V128h40a8,8,0,0,0,5.66-13.66ZM176,112a8,8,0,0,0-8,8v88H88V120a8,8,0,0,0-8-8H51.31L128,35.31,204.69,112Z"></path></svg>
 
     <div class="pop-up">
         <span class="pop-up__click-off" onclick="popupDissmiss()"></span>
@@ -96,11 +96,11 @@
                     <h3>Upload stuffs</h3>
                     <p>May the world see your stuff 👀</p>
                     <form id="uploadForm" onsubmit="return uploadFile(event)">
-                        <input type="file" id="file"/>
+                        <input class="input-block file" type="file" id="file"/>
-                        <input type="text" placeholder="alt" id="alt"/>
+                        <input class="input-block" type="text" placeholder="alt" id="alt"/>
-                        <input type="text" placeholder="description" id="description"/>
+                        <input class="input-block" type="text" placeholder="description" id="description"/>
-                        <input type="text" placeholder="tags" id="tags"/>
+                        <input class="input-block" type="text" placeholder="tags" id="tags"/>
-                        <button type="submit">Upload</button>
+                        <button class="btn-block primary" type="submit">Upload</button>
                     </form>
                     <div class="upload-jobs"></div>
                 </div>

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
+

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
+        color: #000000

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
+    &.show
         right: 0.75rem
         opacity: 1
 
 @media (max-width: $breakpoint)
-    .jumpUp
+    .top-of-page
         bottom: 4.25rem

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
@@ -252,6 +179,3 @@
 
             .pop-up-wrapper
                 transform: translateY(0)
-
-    .pop-up__btn
-        width: 100%

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

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"