add styles for desktop

vtabashniuk · Apr 29, 2024 · c504699 · c504699
1 parent ed90123
commit c504699
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 15 deletions.
diff --git a/src/components/PointMenu/PointMenu.jsx b/src/components/PointMenu/PointMenu.jsx
@@ -20,13 +20,6 @@ const PointMenu = ({ questions, points, id }) => {
         {questions.toReversed().map((item) => (
           <li
             key={item.amount}
-            // style={
-            //   id === item.id
-            //     ? { backgroundColor: "yellow" }
-            //     : points >= item.amount
-            //     ? { backgroundColor: "green" }
-            //     : {}
-            // }
             className={getClassList(item)}
           >
             {Number(item.amount).toLocaleString("en", {

diff --git a/src/components/PointMenu/PointMenu.module.scss b/src/components/PointMenu/PointMenu.module.scss
@@ -2,17 +2,34 @@
 
 .pointList {
   display: grid;
-  grid-template-rows: repeat(12, 1fr);
-  gap: 8px;
+  grid-template-rows: 1fr;
+  row-gap: 8px;
   width: 100%;
+  list-style: none;
+
+  @media screen and (min-width: 568px) and (max-width: 767px) {
+    grid-template-columns: repeat(2, 1fr);
+  }
 
   & > .pointListItem {
-    background-image: url("../../img/svg/InactivePoints.svg");
+    box-sizing: border-box;
     padding: 8px 24px;
+    background-image: url("../../img/svg/InactivePoints.svg");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
     font-size: 14px;
     font-weight: 400;
     text-align: center;
 
+    @media screen and (min-width: 768px) {
+      padding: 4px 24px;
+      font-size: 12px;
+    }
+
+    @media screen and (min-width: 1180px) {
+      font-size: 20px;
+    }
+
     &.active {
       background-image: url("../../img/svg/ActivePoints.svg");
       color: c.$startButtonColor;

diff --git a/src/img/svg/Hover.svg b/src/img/svg/Hover.svg
diff --git a/src/pages/Game/Game.module.scss b/src/pages/Game/Game.module.scss
@@ -4,6 +4,11 @@
   height: 100vh;
   width: 100vw;
   background-color: c.$gameBackgroundColor;
+
+  @media screen and (min-width: 768px) {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+  }
 }
 
 .burgerMenu {
@@ -15,9 +20,27 @@
 .sideBar {
   position: absolute;
   top: 56px;
+  display: grid;
+  align-items: center;
   height: calc(100vh - 56px);
   width: 100vw;
+  padding-top: calc((166px / 900px) * 100vh - 56px);
+  padding-bottom: calc((166px / 900px) * 100vh);
   background-color: inherit;
+
+  @media screen and (min-width: 768px) {
+    position: static;
+    height: 100vh;
+    width: 100%;
+    background-color: c.$whiteColor;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  @media screen and (min-width: 1180px) {
+    padding-top: calc((166px / 900px) * 100vh);
+    padding-bottom: calc((166px / 900px) * 100vh);
+  }
 }
 
 .wrapper {
@@ -26,6 +49,14 @@
   align-items: center;
   height: calc(100vh - 56px);
   padding-bottom: 24px;
+
+  @media screen and (min-width: 768px) {
+    grid-row: 1 / 2;
+    padding-left: 80px;
+    padding-right: 80px;
+    padding-bottom: calc((122px / 900px) * 100vh);
+    height: 100vh;
+  }
 }
 
 .question {
@@ -35,19 +66,42 @@
 
 .answersList {
   display: grid;
-  grid-template-rows: repeat(4, 1fr);
+  grid-template-rows: auto;
   row-gap: 8px;
   text-align: left;
-  width: 100%;
+  // width: 100%;
   font-weight: 400;
   font-size: 14px;
   list-style-type: none;
 
+  @media screen and (min-width: 568px) {
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: auto;
+    align-self: end;
+  }
+
   & > .answerListItem {
     counter-increment: list-counter;
-    padding: 20px 24px;
-    // background-color: c.$whiteColor;
+    padding: 20px calc((40px / 288px) * 100vw);
     background-image: url("../../img/svg/Inactive.svg");
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+
+    @media screen and (min-width: 568px) {
+      padding: 14px calc((68px / 1064px) * 100vw);
+    }
+
+    @media screen and (min-width: 768px) {
+      padding: 14px calc((42px / 1064px) * 100vw);
+
+      &:hover {
+        background-image: url("../../img/svg/Hover.svg");
+      }
+    }
+
+    @media screen and (min-width: 1180px) {
+      padding: 24px calc((42px / 1064px) * 100vw);
+    }
 
     &.selected {
       background-image: url("../../img/svg/Selected.svg");
@@ -67,7 +121,6 @@
 
     &::before {
       content: counter(list-counter, upper-latin) "";
-      margin-left: 24px;
       margin-right: 8px;
       color: c.$hoverStartButtonColor;
       font-weight: 600;