mirror of
https://github.com/Derpy-Leggies/OnlyLegs.git
synced 2025-06-29 03:26:16 +00:00
Make buttons more consistent
Rename JumpUp button to top-of-page
This commit is contained in:
parent
0d10de923d
commit
b208b872d7
13 changed files with 143 additions and 102 deletions
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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'))
|
||||
|
|
|
|||
|
|
@ -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"/>\
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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" />'
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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 type="text" placeholder="alt" id="alt"/>
|
||||
<input type="text" placeholder="description" id="description"/>
|
||||
<input type="text" placeholder="tags" id="tags"/>
|
||||
<button type="submit">Upload</button>
|
||||
<input class="input-block file" type="file" id="file"/>
|
||||
<input class="input-block" type="text" placeholder="alt" id="alt"/>
|
||||
<input class="input-block" type="text" placeholder="description" id="description"/>
|
||||
<input class="input-block" type="text" placeholder="tags" id="tags"/>
|
||||
<button class="btn-block primary" type="submit">Upload</button>
|
||||
</form>
|
||||
<div class="upload-jobs"></div>
|
||||
</div>
|
||||
|
|
|
|||
112
gallery/themes/default/components/buttons/block.sass
Normal file
112
gallery/themes/default/components/buttons/block.sass
Normal file
|
|
@ -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
|
||||
|
||||
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
|
@ -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%
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue