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

Refactor code

Browse Source
This commit is contained in:
nezumi
2023-07-25 15:13:45 +07:00
parent 3a0032ca44
commit d9f7860e35
9 changed files with 58 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
practice/practice-02/src/layouts/nav-menu.pug
+2 -2
View File
@@ -6,5 +6,5 @@ nav.nav
ul.nav-list
each val in list
li.nav-item
a.nav-link.no-underline(href="javascript:void(0)")= val
a.btn.nav-download-btn.no-underline(href="javascript:void(0)") Download App
a.nav-link.link-text(href="javascript:void(0)")= val
a.btn.nav-download-btn(href="javascript:void(0)") Download App
practice/practice-02/src/layouts/welcome.pug
+1 -1
View File
@@ -83,7 +83,7 @@ section.welcome
)
.welcome__action-container
a.welcome__download-btn.btn(href="javascript:void(0)") Download App
a.welcome__watch-video-link.no-underline(href="javascript:void(0)")
a.welcome__watch-video-link.link-text(href="javascript:void(0)")
.welcome__play-icon-wrapper
svg.welcome__play-icon(
width="12",
practice/practice-02/src/styles/abstracts/_mixins.scss
+17 -22
View File
@@ -14,32 +14,27 @@
right: 0;
}
@mixin flex-container(
$flex: false,
$justify-content: null,
$flex-direction: null,
$align-items: null,
$gap: null
) {
@if $flex != false {
display: flex;
}
@mixin d-flex {
display: flex;
}
@if $justify-content != null {
justify-content: $justify-content;
}
@mixin flex-justify-center-col {
@include d-flex;
@if $flex-direction != null {
flex-direction: $flex-direction;
}
justify-content: center;
flex-direction: column;
}
@if $align-items != null {
align-items: $align-items;
}
@mixin flex-align-center {
@include d-flex;
@if $gap != null {
gap: $gap;
}
align-items: center;
}
@mixin flex-between {
@include d-flex;
justify-content: space-between;
}
@mixin size($width: null, $height: null) {
practice/practice-02/src/styles/bases/_base.scss
+3 -1
View File
@@ -1,4 +1,6 @@
.no-underline {
.link-text {
font-size: $fs-md;
color: $black;
text-decoration: none;
}
practice/practice-02/src/styles/components/_card-item.scss
+8 -3
View File
@@ -1,7 +1,8 @@
.card-item {
@include flex-container(true, $align-items: center, $flex-direction: column);
@include flex-align-center;
@include size(auto, 516px);
flex-direction: column;
position: relative;
}
@@ -27,11 +28,15 @@
.content-card {
@include set-absolute-and-location(true, $bottom: 60px);
@include size(100%, auto);
@include flex-container(true, $align-items: center, $flex-direction: column);
@include flex-align-center;
flex-direction: column;
}
.rate {
@include flex-container(true, $align-items: center, $gap: 10px);
@include flex-align-center;
gap: 10px;
}
.avatar-container {
practice/practice-02/src/styles/layouts/_header.scss
+3 -2
View File
@@ -11,8 +11,9 @@
}
.header-container {
@include flex-container(true, space-between, $align-items: center);
@include flex-align-center;
justify-content: space-between;
position: relative;
max-width: 428px;
min-width: $min-width;
@@ -21,7 +22,7 @@
}
.header-content {
@include flex-container(true, space-between);
@include flex-between;
}
@media screen and (min-width: 840px) {
practice/practice-02/src/styles/layouts/_navbar.scss
+5 -2
View File
@@ -53,12 +53,14 @@
.nav-list {
@include size(auto, auto);
@include flex-container(true, space-between, column);
@include flex-between;
flex-direction: column;
gap: 10px;
position: unset;
flex-direction: row;
border: none;
max-width: 600px;
max-width: 660px;
margin: unset;
background-color: transparent;
}
@@ -66,6 +68,7 @@
.nav-item {
border-bottom: none;
padding: 0;
text-align: center;
&:hover {
background-color: unset;
practice/practice-02/src/styles/layouts/_offer.scss
+6 -12
View File
@@ -4,11 +4,7 @@
margin-inline: auto;
&__container {
@include flex-container(
true,
$justify-content: center,
$flex-direction: column
);
@include flex-justify-center-col;
max-width: 380px;
margin: auto;
@@ -40,8 +36,9 @@
}
&__card-list {
@include flex-container(true, $gap: 70px);
@include d-flex;
gap: 70px;
padding-inline: 35px;
flex-wrap: nowrap;
padding-top: 65px;
@@ -70,12 +67,9 @@
}
&__card-list {
@include flex-container(
$align-items: center,
$gap: 18px,
$justify-content: center
);
align-items: center;
gap: 18px;
justify-content: center;
row-gap: 30px;
flex-wrap: wrap;
}
practice/practice-02/src/styles/layouts/_welcome.scss
+13 -14
View File
@@ -11,7 +11,7 @@
);
&__container {
@include flex-container(true, center, column);
@include flex-justify-center-col;
margin: auto;
max-width: 428px;
@@ -20,7 +20,7 @@
// Start banner
&__banner-container {
@include size(428px, auto);
@include flex-container(true, center, column);
@include flex-justify-center-col;
position: relative;
}
@@ -55,9 +55,10 @@
// Start content
&__content {
@include flex-container(true, $flex-direction: column);
@include d-flex;
@include size(calc(428px - 48px), auto);
flex-direction: column;
position: relative;
padding-top: 63.37px;
padding-inline: 24px;
@@ -72,9 +73,10 @@
}
&__text-box {
@include flex-container(true, $align-items: center, $gap: 6px);
@include flex-align-center;
@include size(fit-content);
gap: 6px;
background-color: #feeae9;
border-radius: 100px;
padding: 6px;
@@ -123,7 +125,7 @@
}
&__search-form {
@include flex-container(true);
@include d-flex;
margin-top: 32px;
border-radius: 100px;
@@ -165,7 +167,7 @@
}
&__action-container {
@include flex-container(true, $justify-content: space-between);
@include flex-between;
width: 100%;
margin-top: 44px;
@@ -173,10 +175,10 @@
}
&__watch-video-link {
@include flex-container(true, $align-items: center, $gap: 21px);
@include flex-align-center;
position: relative;
gap: 21px;
&:hover {
.welcome__play-icon-wrapper {
transform: scale(1.2);
@@ -232,12 +234,9 @@
@media screen and (min-width: 840px) {
.welcome {
&__container {
@include flex-container(
$flex-direction: row-reverse,
$align-items: center,
$justify-content: space-between
);
flex-direction: row-reverse;
align-items: center;
justify-content: space-between;
padding-top: 130px;
width: 100%;
max-width: $max-width;