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

Merge pull request #18 from Nez27/feat/refactor-html-scss

Browse Source 
Refactor code html, scss
This commit is contained in:
Loi Phan
2023-09-12 09:52:11 +07:00
committed by GitHub
parent b62dd17f73 304f36df39
commit aa4dac8b78
5 changed files with 44 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript-practice/src/pages/index.html
+23 -104
View File
@@ -8,17 +8,16 @@
<title>Money Lover Web</title> <title>Money Lover Web</title>
</head> </head>
<body class="home-page"> <body class="home-page">
<div class="overlay active"></div> <dialog class="dialog">
<div class="dark-overlay"></div> <div class="toast success">
<!-- <div class="modal-box success active">
<div class="mark check"></div> <div class="mark check"></div>
<h2 class="modal-box__title">Login Success!</h2> <h2 class="toast__title">Login Success!</h2>
<p class="modal-box__message">Welcome to Money Lover!</p> <p class="toast__message">Welcome to Money Lover!</p>
<button class="toast__redirect-btn">OK</button>
<button class="modal-box__redirect-btn">OK</button> </div>
</div> --> </dialog>
<!-- Add a wallet form --> <!-- Add a wallet form -->
<div class="dialog active" id="walletForm"> <dialog class="dialog" id="walletDialog">
<div class="dialog__add-wallet"> <div class="dialog__add-wallet">
<!-- Dialog header --> <!-- Dialog header -->
<div class="dialog__header"> <div class="dialog__header">
@@ -56,10 +55,10 @@
</form> </form>
</div> </div>
</div> </div>
</div> </dialog>
<!-- End form --> <!-- End form -->
<!-- Add budget form --> <!-- Add budget form -->
<div class="dialog" id="budgetForm"> <dialog class="dialog" id="budgetDialog">
<div class="dialog__add-budget"> <div class="dialog__add-budget">
<!-- Header --> <!-- Header -->
<div class="dialog__header"> <div class="dialog__header">
@@ -96,16 +95,18 @@
/> />
</div> </div>
<div class="form__action"> <div class="form__action">
<button type="button" class="form__cancel-btn">CANCEL</button> <button formmethod="dialog" class="form__cancel-btn">
CANCEL
</button>
<button type="submit" class="form__save-btn">SAVE</button> <button type="submit" class="form__save-btn">SAVE</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </dialog>
<!-- End form --> <!-- End form -->
<!-- Add, edit, delete transaction form --> <!-- Add, edit, delete transaction form -->
<div class="dialog" id="transactionForm"> <dialog class="dialog" id="transactionDialog">
<div class="dialog__add-transaction"> <div class="dialog__add-transaction">
<!-- Header--> <!-- Header-->
<div class="dialog__header"> <div class="dialog__header">
@@ -154,20 +155,22 @@
/> />
</div> </div>
<div class="form__action"> <div class="form__action">
<button type="button" class="form__cancel-btn">CANCEL</button> <button formmethod="dialog" class="form__cancel-btn">
CANCEL
</button>
<button type="submit" class="form__save-btn">SAVE</button> <button type="submit" class="form__save-btn">SAVE</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </dialog>
<!-- End form --> <!-- End form -->
<!-- Select category form --> <!-- Select category form -->
<div class="dialog" id="categoryForm"> <dialog class="dialog" id="categoryDialog">
<div class="dialog__select-category"> <div class="dialog__select-category">
<div class="dialog__header"> <div class="dialog__header">
<div class="dialog__title-container"> <div class="dialog__title-container">
<div class="close-icon"></div> <div formmethod="dialog" class="close-icon"></div>
<div class="dialog__title">Select category</div> <div class="dialog__title">Select category</div>
</div> </div>
<form class="form"> <form class="form">
@@ -262,7 +265,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </dialog>
<!-- End form --> <!-- End form -->
<!-- Start header --> <!-- Start header -->
<header class="header"> <header class="header">
@@ -402,90 +405,6 @@
</main> </main>
<!-- End app --> <!-- End app -->
</div> </div>
<!-- All scripts below is use for test purpose! --> <script type="module" src="../js/main.js"></script>
<script>
// Handle event when click on tabs
const tabs = document.querySelectorAll('.app__tab-item');
const all_content = document.querySelectorAll('.app__content-item');
tabs.forEach((tab, index) => {
tab.addEventListener('click', (e) => {
tabs.forEach((tab) => {
tab.classList.remove('active');
});
tab.classList.add('active');
const line = document.querySelector('.app__line');
line.style.width = e.target.offsetWidth + 'px';
line.style.left = e.target.offsetLeft + 'px';
all_content.forEach((content) => {
content.classList.remove('active');
});
all_content[index].classList.add('active');
});
});
// Add event
const addTransactionBtn = document.getElementById('addTransaction');
const addBudgetBtn = document.getElementById('addBudget');
const overlay = document.querySelector('.overlay');
const darkOverlay = document.querySelector('.dark-overlay');
const dialog = document.querySelectorAll('.dialog');
const cancelBtn = document.querySelectorAll('.form__cancel-btn');
const categoryField = document.getElementById('selectCategory');
const closeIcon = document.querySelector('.close-icon');
const budgetForm = document.getElementById('budgetForm');
const transactionForm = document.getElementById('transactionForm');
const categoryForm = document.getElementById('categoryForm');
overlay.addEventListener('click', () => {
overlay.classList.toggle('active');
dialog.forEach((item) => {
if (item.classList.contains('active')) {
item.classList.remove('active');
}
});
});
addTransactionBtn.addEventListener('click', () => {
transactionForm.classList.toggle('active');
overlay.classList.toggle('active');
});
addBudgetBtn.addEventListener('click', () => {
budgetForm.classList.toggle('active');
overlay.classList.toggle('active');
});
cancelBtn.forEach((item) => {
item.addEventListener('click', () => {
overlay.classList.toggle('active');
dialog.forEach((item) => {
if (item.classList.contains('active')) {
item.classList.remove('active');
}
});
});
});
categoryField.addEventListener('click', () => {
categoryForm.classList.add('active');
darkOverlay.classList.add('active');
});
closeIcon.addEventListener('click', () => {
categoryForm.classList.remove('active');
darkOverlay.classList.remove('active');
});
darkOverlay.addEventListener('click', () => {
darkOverlay.classList.remove('active');
categoryForm.classList.remove('active');
});
</script>
</body> </body>
</html> </html>
javascript-practice/src/pages/login.html
+1
View File
@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="../assets/images/favicon.ico" />
<link rel="stylesheet" href="../styles/_main.scss" /> <link rel="stylesheet" href="../styles/_main.scss" />
<title>Login - Money Lover</title> <title>Login - Money Lover</title>
</head> </head>
javascript-practice/src/pages/register.html
+1
View File
@@ -3,6 +3,7 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="../assets/images/favicon.ico" />
<link rel="stylesheet" href="../styles/_main.scss" /> <link rel="stylesheet" href="../styles/_main.scss" />
<title>Register - Money Lover</title> <title>Register - Money Lover</title>
</head> </head>
javascript-practice/src/styles/components/_dialog.scss
+15 -10
View File
@@ -1,14 +1,9 @@
.dialog { .dialog {
@extend %d-absolute, %rounded-sm; @extend %rounded-sm;
left: 50%; border: none;
top: 32%;
transform: translate(-50%, -50%) scale(1);
background-color: $white; background-color: $white;
z-index: $zindex-lv-2; padding: none;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease; transition: all 0.3s ease;
&__title { &__title {
@@ -17,7 +12,17 @@
line-height: 20px; line-height: 20px;
} }
&.active { &::backdrop {
@extend %active; background-color: rgba($color: #000000, $alpha: 0.2);
}
}
// Login page
.login-page,
.register-page {
.dialog {
@extend %rounded;
padding: 0px;
} }
} }
javascript-practice/src/styles/components/_popup-form.scss
+3 -19
View File
@@ -1,19 +1,8 @@
.modal-box { .toast {
@extend %d-flex; @extend %d-flex;
@extend %d-absolute;
@include flex-layout($direction: column, $align: center, $gap: 30px); @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; padding: 40px 50px;
border-radius: 10px;
background-color: $white;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
&__title { &__title {
font-size: $fs-2x-lg; font-size: $fs-2x-lg;
@@ -32,17 +21,12 @@
padding: 15px 30px; padding: 15px 30px;
cursor: pointer; cursor: pointer;
} }
&.active {
opacity: 1;
pointer-events: auto;
}
} }
.success .modal-box__redirect-btn { .success .toast__redirect-btn {
background-color: $light-primary-color; background-color: $light-primary-color;
} }
.error .modal-box__redirect-btn { .error .toast__redirect-btn {
background-color: $dark-error-color; background-color: $dark-error-color;
} }