Merge pull request #55 from BinaryStudioAcademy/bug/3-main-page-design

bug/3 main page design
BinaryStudioAcademy · Aug 30, 2023 · 8389a58 · 8389a58
2 parents 56d05ef + c5ecd1a
commit 8389a58
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 26 deletions.
diff --git a/frontend/src/app/shared/components/challenge/challenge.component.sass b/frontend/src/app/shared/components/challenge/challenge.component.sass
@@ -6,7 +6,6 @@
     background-color: $charcoal-grey
     color: $white
     font-family: 'Montserrat', sans-serif
-    max-width: 440px
 
 .icon
     font-size: 12px

diff --git a/frontend/src/app/shared/components/filtering-section/filtering-section.component.html b/frontend/src/app/shared/components/filtering-section/filtering-section.component.html
@@ -1,4 +1,4 @@
-<div class="filtering-section d-flex">
+<div class="filtering-section d-flex mt-3">
     <div class="filters d-flex flex-column">
         <div class="search-container m-0-12px">
             <app-custom-input
@@ -31,7 +31,7 @@
     </div>
     <div class="d-grid justify-content-center gap-2">
         <div *ngFor="let challenge of challengesList">
-            <app-challenge class="challenge-block" [challenge]="challenge"></app-challenge>
+            <app-challenge [challenge]="challenge"></app-challenge>
         </div>
     </div>
 </div>
diff --git a/frontend/src/app/shared/components/filtering-section/filtering-section.component.sass b/frontend/src/app/shared/components/filtering-section/filtering-section.component.sass
@@ -8,11 +8,11 @@
   border: 1px solid $grey
   border-radius: 14px
   margin-right: 20px
-  max-width: 374px
+  max-width: 420px
   height: 480px
 
 .m-0-12px
-  margin: 20px 12px 0
+  margin: 20px 20px 0
 
 .mb-28px
   margin-bottom: 28px
@@ -39,12 +39,15 @@
     color: $white
     cursor: pointer
 
+.challenges
+    border-radius: 4px
+
 @media (max-width: 992px)
   .filters
     max-width: 224px
 
   .search-container
-    width: 200px
+    width: 180px
 
 @media (max-width: 768px)
   .filtering-section
@@ -57,15 +60,11 @@
     max-width: 440px
 
   .search-container
-    width: 416px
+    width: 400px
 
 @media (max-width: 576px)
   .filters
     max-width: 274px
 
   .search-container
-    width: 250px
-
-
-
-
+    width: 220px
diff --git a/frontend/src/app/shared/components/suggested-challenge/suggested-challenge.component.sass b/frontend/src/app/shared/components/suggested-challenge/suggested-challenge.component.sass
@@ -3,7 +3,7 @@
 
 .suggested-body
     display: grid
-    grid-template-columns: 40% calc(100% - 40% - 2px)
+    grid-template-columns: 40% calc(60% - 2px)
     height: 296px
     gap: 2px
     border-radius: 15px
@@ -39,11 +39,11 @@ h5
     justify-content: flex-start
 .dropdown
     width: 95%!important
-    
+
 .app-dropdown-select
     margin-bottom: 10px
     width: 100%
-  
+
 .button-group
     display: flex
     flex-direction: row
@@ -84,7 +84,7 @@ h5
 .description
     display: flexbox
     > *
-        margin: 1rem 1rem 
+        margin: 1rem 1rem
 
 .difficulty-and-title
     margin-top: 24px
@@ -116,7 +116,7 @@ h5
     align-items: center
 
     padding-left: 5px
-    padding-right: 5px 
+    padding-right: 5px
 
 .task-title
     color: $white
@@ -134,7 +134,7 @@ h5
     margin-bottom: 10px
     text-overflow: ellipsis
     overflow: auto
-    
+
 
 .constraints
     margin-bottom: 20px
@@ -143,7 +143,7 @@ h5
     overflow: scroll
     overflow-y: auto
     padding: 0px
-    padding-bottom: 0px 
+    padding-bottom: 0px
 
 .constraints li::marker
     color: $green
@@ -159,19 +159,19 @@ h5
     list-style-position: inside
     margin-bottom: 10px
 
-.constraints li:last-child 
+.constraints li:last-child
     list-style-position: inside
     margin-bottom: 0px
 
 .tags
     display: flex
     flex-direction: row
-    width: calc(100% - 45px - 23px)
-    margin-right:45px
+    width: calc(100% - 68px)
+    margin-right: 45px
     overflow-x: scroll
     padding: 0px
     list-style: none
-    margin-bottom: 0px 
+    margin-bottom: 0px
 
 .tags li
     margin-right: 15px
@@ -182,7 +182,7 @@ h5
     justify-content: center
     align-items: center
     background-color: $dark-grey
-    
+
     white-space: nowrap
     color: $grey
     font-family: Montserrat
@@ -193,7 +193,7 @@ h5
     padding-left: 9px
     padding-right: 9px
     padding-top: 4px
-    padding-bottom: 4px 
+    padding-bottom: 4px
 
 .constraints::-webkit-scrollbar,
 .tags::-webkit-scrollbar

diff --git a/frontend/src/styles/bootstrap-variables.sass b/frontend/src/styles/bootstrap-variables.sass
@@ -1 +1 @@
-$container-max-widths: ( sm: 540px, md: 720px, lg: 800px, xl: 900px, xxl: 1000px)
+$container-max-widths: ( sm: 460px, md: 720px, lg: 900px)