Pop-ups are dark and dont require close button

Change style of block buttons
This commit is contained in:
Michał 2023-03-15 17:03:24 +00:00
parent f9aeb0955d
commit a6c06ae39c
8 changed files with 36 additions and 62 deletions

View file

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

View file

@ -12,7 +12,6 @@ function popUpShow(title, body, actions, content) {
// Set buttons that will be displayed
popupActions.innerHTML = actions;
popupActions.innerHTML += '<button class="btn-block" onclick="popupDissmiss()">Nooooooo</button>';
// Show popup
popup.style.display = 'block';

View file

@ -264,8 +264,9 @@
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="btn-block critical" onclick="deleteImage()">Dewww eeeet!</button>',
'<img src="/api/file/{{ image.file_name }}?w=1920&h=1080" />'
'<button class="btn-block" onclick="popupDissmiss()">Nooooooo</button>\
<button class="btn-block critical" onclick="deleteImage()">Dewww eeeet!</button>',
'<img src="/api/file/{{ image.file_name }}?w=1920&h=1080"/>'
);
});
function deleteImage() {

View file

@ -27,7 +27,7 @@
text-align: center
background-color: transparent
color: $black
color: $white
border: none
border-radius: $rad-inner
@ -37,7 +37,6 @@
&:hover
background-color: $black
color: $white
&:focus-visible
outline: 2px solid rgba($black, 0.5)
@ -74,23 +73,33 @@
font-weight: 600
text-align: left
background-color: $black
background-color: transparent
color: $white
border: none
border-bottom: 3px solid $gray
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)
&:not(:focus):not([value=""]):not(:placeholder-shown)
border-color: $white
&:focus-visible
outline: 2px solid rgba($white, 0.5)
&:hover
border-color: $white
&:focus
border-color: $primary
outline: none
&.file
padding: 0 1rem 0 0
border: none
background-color: $black2
&:focus-visible
outline: 2px solid rgba($white, 0.5)
&::file-selector-button
margin-right: 1rem
@ -109,4 +118,3 @@
&:not([value=""])
display: none

View file

@ -39,7 +39,7 @@
display: flex
flex-direction: column
background-color: $white
background-color: $black
border-radius: $rad
overflow: hidden
@ -48,14 +48,14 @@
.pop-up-content
margin: 0
padding: 0.5rem 0.5rem 0
padding: 1rem
width: 100%
height: auto
display: flex
flex-direction: column
gap: 0.5rem
gap: 1rem
overflow-y: auto
overflow-x: hidden
@ -75,8 +75,8 @@
text-align: center
line-height: 1
color: $black
background-color: $white
color: $white
background-color: $black
p
margin: 0
@ -88,7 +88,7 @@
text-align: center
line-height: 1
color: $black
color: $white
img
margin: auto
@ -126,6 +126,8 @@
justify-content: flex-end
gap: 0.5rem
background-color: $black2
&.active
opacity: 1

View file

@ -43,45 +43,8 @@
align-items: center
gap: 0.5rem
input
margin: 0
padding: 0.5rem 1rem
input, button
width: 100%
height: 2.5rem
font-size: 1rem
font-weight: 600
color: $white
background-color: $black2
border: none
border-radius: $rad-inner
&::placeholder
color: $white
button
margin: 0
padding: 0.5rem 1rem
width: 100%
height: 2.5rem
font-size: 1rem
font-weight: 600
color: $white
background-color: $primary
border: none
border-radius: $rad-inner
cursor: pointer
&:hover
background-color: $black2
color: $primary
.click-off
position: absolute
@ -95,7 +58,7 @@
.container
padding: 0.5rem
padding: 1rem
position: absolute
bottom: 0
@ -225,8 +188,6 @@
bottom: 3.5rem
.container
padding: 1rem
width: 100%
height: calc(100% - 10rem)

View file

@ -50,7 +50,7 @@
font-size: 1rem
font-weight: 600
color: $primary
color: $white
text-overflow: ellipsis
overflow: hidden

View file

@ -1,5 +1,6 @@
$black: #151515
$black2: #101010
$gray: #666
$white: #E8E3E3
$red: #B66467