From 4ba5623cb02fe32168a2ed60aa8c6a63b3987b3d Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Tue, 12 Sep 2023 09:26:39 +0700 Subject: [PATCH 1/2] Refactor code --- javascript-practice/src/pages/index.html | 48 ++++++++++--------- javascript-practice/src/pages/login.html | 1 + javascript-practice/src/pages/register.html | 1 + .../src/styles/components/_dialog.scss | 25 ++++++---- .../src/styles/components/_popup-form.scss | 22 ++------- 5 files changed, 46 insertions(+), 51 deletions(-) diff --git a/javascript-practice/src/pages/index.html b/javascript-practice/src/pages/index.html index e534cc3..8d07d2e 100644 --- a/javascript-practice/src/pages/index.html +++ b/javascript-practice/src/pages/index.html @@ -8,17 +8,16 @@ Money Lover Web -
-
- + +
+
+

Login Success!

+

Welcome to Money Lover!

+ +
+ -
+
@@ -56,10 +55,10 @@
-
+ -
+
@@ -96,16 +95,18 @@ />
- +
- + -
+
@@ -154,20 +155,22 @@ />
- +
- + -
+
-
+
Select category
@@ -262,7 +265,7 @@
- +
@@ -403,7 +406,8 @@ - + diff --git a/javascript-practice/src/pages/login.html b/javascript-practice/src/pages/login.html index fe79d78..e759d46 100644 --- a/javascript-practice/src/pages/login.html +++ b/javascript-practice/src/pages/login.html @@ -3,6 +3,7 @@ + Login - Money Lover diff --git a/javascript-practice/src/pages/register.html b/javascript-practice/src/pages/register.html index b0bc1ca..cc41c7f 100644 --- a/javascript-practice/src/pages/register.html +++ b/javascript-practice/src/pages/register.html @@ -3,6 +3,7 @@ + Register - Money Lover diff --git a/javascript-practice/src/styles/components/_dialog.scss b/javascript-practice/src/styles/components/_dialog.scss index 5edd09e..fa741f0 100644 --- a/javascript-practice/src/styles/components/_dialog.scss +++ b/javascript-practice/src/styles/components/_dialog.scss @@ -1,14 +1,9 @@ .dialog { - @extend %d-absolute, %rounded-sm; + @extend %rounded-sm; - left: 50%; - top: 32%; - transform: translate(-50%, -50%) scale(1); + border: none; background-color: $white; - z-index: $zindex-lv-2; - - opacity: 0; - pointer-events: none; + padding: none; transition: all 0.3s ease; &__title { @@ -17,7 +12,17 @@ line-height: 20px; } - &.active { - @extend %active; + &::backdrop { + background-color: rgba($color: #000000, $alpha: 0.2); + } +} + +// Login page +.login-page, +.register-page { + .dialog { + @extend %rounded; + + padding: 0px; } } diff --git a/javascript-practice/src/styles/components/_popup-form.scss b/javascript-practice/src/styles/components/_popup-form.scss index 0617043..60ff0dd 100644 --- a/javascript-practice/src/styles/components/_popup-form.scss +++ b/javascript-practice/src/styles/components/_popup-form.scss @@ -1,19 +1,8 @@ -.modal-box { +.toast { @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: $zindex-lv-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; @@ -32,17 +21,12 @@ padding: 15px 30px; cursor: pointer; } - - &.active { - opacity: 1; - pointer-events: auto; - } } -.success .modal-box__redirect-btn { +.success .toast__redirect-btn { background-color: $light-primary-color; } -.error .modal-box__redirect-btn { +.error .toast__redirect-btn { background-color: $dark-error-color; } From 304f36df39ad23ccc928e21ea5e7c136e8359438 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Tue, 12 Sep 2023 09:50:03 +0700 Subject: [PATCH 2/2] Remove unnecessary code --- javascript-practice/src/pages/index.html | 85 ------------------------ 1 file changed, 85 deletions(-) diff --git a/javascript-practice/src/pages/index.html b/javascript-practice/src/pages/index.html index 8d07d2e..125e10f 100644 --- a/javascript-practice/src/pages/index.html +++ b/javascript-practice/src/pages/index.html @@ -405,91 +405,6 @@ - -