nezumi/javascript-training
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/javascript-training.git synced 2026-09-22 20:01:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5 from Nez27/feat/add-popup-modal

Browse Source 
Add modal popup for register page.
This commit is contained in:
Loi Phan
2023-08-24 11:36:39 +07:00
committed by GitHub
parent 3ff1982558 8f5a4f0ad3
commit 1e2661aead
7 changed files with 114 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript-practice/src/pages/register.html
+9 -1
View File
@@ -1,4 +1,4 @@
<!DOCTYPE html> <!doctype html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
@@ -8,6 +8,14 @@
</head> </head>
<body> <body>
<!-- <div class="loader"></div> --> <!-- <div class="loader"></div> -->
<div class="overlay"></div>
<div class="modal-box">
<div class="checkmark"></div>
<h2 class="modal-box__title">Register success!</h2>
<p class="modal-box__message">Please login to continue.</p>
<button class="modal-box__redirect-btn">OK!</button>
</div>
<div class="background"> <div class="background">
<div class="wrapper"> <div class="wrapper">
<img class="logo-web" src="../assets/images/logo.svg" alt="Logo web" /> <img class="logo-web" src="../assets/images/logo.svg" alt="Logo web" />
javascript-practice/src/styles/_main.scss
+1
View File
@@ -10,6 +10,7 @@
// Components // Components
@import './components/loader'; @import './components/loader';
@import './components/popup-form';
// Layouts // Layouts
@import './layouts/header'; @import './layouts/header';
javascript-practice/src/styles/abstracts/_mixin.scss
+27 -1
View File
@@ -1 +1,27 @@
// TODO @mixin flex-layout(
$justify: null,
$align: null,
$direction: null,
$gap: null,
$wrap: null
) {
@if $justify != null {
justify-content: $justify;
}
@if $align != null {
align-items: $align;
}
@if $direction != null {
flex-direction: $direction;
}
@if $gap != null {
gap: $gap;
}
@if $wrap != null {
flex-wrap: $wrap;
}
}
javascript-practice/src/styles/abstracts/_variables.scss
+1 -1
View File
@@ -3,7 +3,7 @@ $primary-font: 'Roboto';
// Color // Color
$light-primary-color: #00bc2a; $light-primary-color: #00bc2a;
$primary-color: #2db84c; $primary-color: #2db84c;
$dark-primary-color: #009421; $dark-primary-color: #00710f;
$primary-text-color: #000; $primary-text-color: #000;
$secondary-text-color: #0000008a; $secondary-text-color: #0000008a;
$secondary-light-text-color: #00000042; $secondary-light-text-color: #00000042;
javascript-practice/src/styles/bases/_placeholder.scss
+8
View File
@@ -5,3 +5,11 @@
%rounded { %rounded {
border-radius: 10px; border-radius: 10px;
} }
%d-flex {
display: flex;
}
%d-absolute {
position: absolute;
}
javascript-practice/src/styles/components/_popup-form.scss
+52
View File
@@ -0,0 +1,52 @@
.overlay {
@extend %d-absolute;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 2;
opacity: 0;
pointer-events: none;
}
.modal-box {
@extend %d-flex;
@extend %d-absolute;
@include flex-layout($direction: column, $align: center, $gap: 30px);
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
z-index: 2;
padding: 40px 50px;
border-radius: 10px;
background-color: $white;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
&__title {
font-size: $fs-2x-lg;
}
&__message {
font-size: $fs-lg;
text-align: center;
}
&__redirect-btn {
color: $white;
font-size: $fs-md;
background-color: $light-primary-color;
border: none;
border-radius: 10px;
padding: 15px 30px;
cursor: pointer;
}
}
.active {
opacity: 1;
pointer-events: auto;
}
javascript-practice/src/styles/pages/_login-register.scss
+16 -2
View File
@@ -1,12 +1,12 @@
.background { .background {
height: 100vh; height: 100vh;
background: linear-gradient(#00710f 314px, #ebebeb -100%); background: linear-gradient($dark-primary-color 314px, #ebebeb -100%);
} }
.wrapper { .wrapper {
@extend %margin-inline-auto; @extend %margin-inline-auto;
@extend %d-absolute;
position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
@@ -17,6 +17,20 @@
padding-top: 54px; padding-top: 54px;
} }
.checkmark {
display: inline-block;
&:after {
content: '';
display: block;
width: 11px;
height: 22px;
border: solid $primary-color;
border-width: 0 10px 10px 0;
transform: rotate(45deg);
}
}
.form { .form {
@extend %margin-inline-auto; @extend %margin-inline-auto;