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 to show login
function showLogin() { function showLogin() {
popUpShow( popUpShow(
'idk what to put here, just login please', 'Login!',
'Need an account? <span class="pop-up__link" onclick="showRegister()">Register!</span>', '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)">\ '<form id="loginForm" onsubmit="return login(event)">\
<input class="input-block" type="text" placeholder="Namey" id="username"/>\ <input class="input-block" type="text" placeholder="Namey" id="username"/>\
<input class="input-block" type="password" placeholder="Passywassy" id="password"/>\ <input class="input-block" type="password" placeholder="Passywassy" id="password"/>\
@ -57,7 +58,8 @@ function showRegister() {
popUpShow( popUpShow(
'Who are you?', 'Who are you?',
'Already have an account? <span class="pop-up__link" onclick="showLogin()">Login!</span>', '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)">\ '<form id="registerForm" onsubmit="return register(event)">\
<input class="input-block" type="text" placeholder="Namey" id="username"/>\ <input class="input-block" type="text" placeholder="Namey" id="username"/>\
<input class="input-block" type="text" placeholder="E mail!" id="email"/>\ <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 // Set buttons that will be displayed
popupActions.innerHTML = actions; popupActions.innerHTML = actions;
popupActions.innerHTML += '<button class="btn-block" onclick="popupDissmiss()">Nooooooo</button>';
// Show popup // Show popup
popup.style.display = 'block'; popup.style.display = 'block';

View file

@ -264,8 +264,9 @@
popUpShow( popUpShow(
'DESTRUCTION!!!!!!', 'DESTRUCTION!!!!!!',
'This will delete the image and all of its data!!! This action is irreversible!!!!! Are you sure you want to do this?????', '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>', '<button class="btn-block" onclick="popupDissmiss()">Nooooooo</button>\
'<img src="/api/file/{{ image.file_name }}?w=1920&h=1080" />' <button class="btn-block critical" onclick="deleteImage()">Dewww eeeet!</button>',
'<img src="/api/file/{{ image.file_name }}?w=1920&h=1080"/>'
); );
}); });
function deleteImage() { function deleteImage() {

View file

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

View file

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

View file

@ -43,45 +43,8 @@
align-items: center align-items: center
gap: 0.5rem gap: 0.5rem
input input, button
margin: 0
padding: 0.5rem 1rem
width: 100% 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 .click-off
position: absolute position: absolute
@ -95,7 +58,7 @@
.container .container
padding: 0.5rem padding: 1rem
position: absolute position: absolute
bottom: 0 bottom: 0
@ -225,8 +188,6 @@
bottom: 3.5rem bottom: 3.5rem
.container .container
padding: 1rem
width: 100% width: 100%
height: calc(100% - 10rem) height: calc(100% - 10rem)

View file

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

View file

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