Refactor: Decompose .reviews into separate component

astik-dev · Apr 14, 2024 · ed8e59d · ed8e59d
1 parent fca5f87
commit ed8e59d
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 154 deletions.
diff --git a/src/components/reviews/_reviews.html b/src/components/reviews/_reviews.html
@@ -0,0 +1,21 @@
+<section class="reviews">
+ <div class="reviews__container title-content">
+
+ <h2 id="reviews">Reviews</h2>
+
+ <div class="reviews__items">
+
+ <div class="reviews__swiper swiper">
+ <div class="reviews__swiper-wrapper swiper-wrapper">
+ <div class="reviews__slide reviews__slide_empty swiper-slide"></div>
+ </div>
+ </div>
+
+ <div class="reviews__swiper-pagination swiper-pagination">0/0</div>
+
+ @@include('./../swiper-nav/_swiper-nav.html')
+
+ </div>
+
+ </div>
+</section>
diff --git a/src/components/reviews/_reviews.scss b/src/components/reviews/_reviews.scss
@@ -0,0 +1,146 @@
+@use "../../scss/abstracts/variables" as *;
+@use "../../scss/abstracts/mixins" as *;
+
+
+.reviews {
+
+ &__container {
+ @include container(720px, $section-gap);
+ }
+
+ &__items {
+ position: relative;
+
+ width: 100%;
+ padding: 0 40px;
+
+ border-bottom: 51px solid transparent;
+ }
+
+ &__slide {
+ padding: 20px 20px 15px 20px;
+
+ background: #293548;
+ border-radius: 15px;
+
+ &-top {
+ padding: 0 25px;
+ @include grid(grid, auto 1fr auto, 8px, center, left);
+
+ img {
+ width: 23px;
+ height: 23px;
+ border-radius: 20px;
+ }
+
+ h4 {
+ @include flex(flex, row, 8px, center, flex-start);
+
+ span {
+ padding: 2px 0 0 0;
+ }
+
+ svg {
+ width: 23px;
+ height: 23px;
+ }
+ }
+ }
+
+ & > p {
+ margin: 14px 0;
+
+ font-weight: 300;
+ }
+
+ &-bottom {
+ @include flex(flex, row, 0, center, space-between);
+
+ span, a {
+ @include font(14px, 16px);
+ font-weight: 300;
+ color: #fff;
+
+ opacity: 0.6;
+ }
+
+ span {
+ font-style: italic;
+ }
+
+ a {
+ text-decoration: underline;
+
+ transition: $anim;
+ }
+ }
+ }
+
+ &__slide_empty {
+ height: 150px;
+ }
+
+ &__swiper-pagination {
+ left: 50%;
+ bottom: -51px;
+
+ padding: 6px 15px;
+ width: auto;
+ background: #293548;
+ border-radius: 50px;
+
+ transform: translate(-50%, 0);
+ }
+}
+
+@media (hover: hover) {
+ .reviews {
+
+ &__slide {
+
+ &-bottom {
+
+ a:hover {
+ opacity: 0.8;
+ }
+ }
+ }
+ }
+}
+
+@media (max-width: 767.5px) {
+ .reviews {
+
+ &__container {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ &__items {
+ padding: 0;
+ }
+
+ &__swiper {
+ padding: 0 20px;
+ }
+ .swiper-nav {
+ display: none;
+ }
+ }
+}
+@media (max-width: 575.5px) {
+ .reviews {
+
+ &__container {
+ padding-top: $section-gap-min;
+ }
+
+ &__slide {
+ padding: 15px 15px 10px 15px;
+
+ &-top {
+ padding: 0;
+ }
+ }
+ }
+}
diff --git a/src/pages/index.html b/src/pages/index.html
@@ -52,20 +52,8 @@
 
  @@include('./../components/skills/_skills.html')
 
- <section class="main__reviews reviews">
- <div class="reviews__container title-content">
- <h2 id="reviews">Reviews</h2>
- <div class="reviews__items">
- <div class="reviews__swiper swiper">
- <div class="reviews__swiper-wrapper swiper-wrapper">
- <div class="reviews__slide reviews__slide_empty swiper-slide"></div>
- </div>
- </div>
- <div class="reviews__swiper-pagination swiper-pagination">0/0</div>
- @@include('./../components/swiper-nav/_swiper-nav.html')
- </div>
- </div>
- </section>
+ @@include('./../components/reviews/_reviews.html')
+
  <section class="main__contacts contacts">
  <div class="contacts__container title-content">
  <h2 id="contacts">Contacts</h2>

diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -5,12 +5,13 @@
 @use "abstracts/variables" as *;
 @use "abstracts/mixins" as *;
 
+@use "../components/swiper-nav/swiper-nav";
+@use "../components/project-popup/project-popup";
 @use "../components/header/header";
 @use "../components/home/home";
 @use "../components/projects/projects";
 @use "../components/skills/skills";
-@use "../components/swiper-nav/swiper-nav";
-@use "../components/project-popup/project-popup";
+@use "../components/reviews/reviews";
 @use "../components/footer/footer";
 
 
@@ -63,144 +64,6 @@
 
 
 
-.reviews {
-
- &__container {
- @include container(720px, $section-gap);
- }
- &__items {
- position: relative;
-
- width: 100%;
- padding: 0 40px;
-
- border-bottom: 51px solid transparent;
- }
- &__slide {
- padding: 20px 20px 15px 20px;
-
- background: #293548;
- border-radius: 15px;
-
- &-top {
- padding: 0 25px;
- @include grid(grid, auto 1fr auto, 8px, center, left);
-
- img {
- width: 23px;
- height: 23px;
- border-radius: 20px;
- }
-
- h4 {
- @include flex(flex, row, 8px, center, flex-start);
-
- span {
- padding: 2px 0 0 0;
- }
-
- svg {
- width: 23px;
- height: 23px;
- }
- }
- }
-
- & > p {
- margin: 14px 0;
-
- font-weight: 300;
- }
-
- &-bottom {
- @include flex(flex, row, 0, center, space-between);
-
- span, a {
- @include font(14px, 16px);
- font-weight: 300;
- color: #fff;
-
- opacity: 0.6;
- }
-
- span {
- font-style: italic;
- }
-
- a {
- text-decoration: underline;
-
- transition: $anim;
- }
- }
- }
- &__slide_empty {
- height: 150px;
- }
- &__swiper-pagination {
- left: 50%;
- bottom: -51px;
-
- padding: 6px 15px;
- width: auto;
- background: #293548;
- border-radius: 50px;
-
- transform: translate(-50%, 0);
- }
-}
-
-@media (hover: hover) {
- .reviews {
- &__slide {
- &-bottom {
- a:hover {
- opacity: 0.8;
- }
- }
- }
- }
-}
-
-@media (max-width: 767.5px) {
- .reviews {
-
- &__container {
- padding-left: 0;
- padding-right: 0;
- }
-
- &__items {
- padding: 0;
- }
-
- &__swiper {
- padding: 0 20px;
- }
- .swiper-nav {
- display: none;
- }
- }
-}
-@media (max-width: 575.5px) {
- .reviews {
-
- &__container {
- padding-top: $section-gap-min;
- }
-
- &__slide {
- padding: 15px 15px 10px 15px;
-
- &-top {
- padding: 0;
- }
- }
- }
-} 
-
-
-
 .contacts {
 
  &__container {