Responsive layout

dvsu · Jul 31, 2022 · 6d12890 · 6d12890
1 parent 60f4418
commit 6d12890
Show file tree

Hide file tree

Showing 20 changed files with 9,238 additions and 28,530 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,7 +13,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "typescript": "^4.7.4",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -41,6 +40,7 @@
     ]
   },
   "devDependencies": {
-    "sass": "^1.53.0"
+    "sass": "^1.53.0",
+    "typescript": "^4.7.4"
   }
 }
diff --git a/sass/abstracts/_variables.scss b/sass/abstracts/_variables.scss
@@ -0,0 +1,2 @@
+$bp-mobile-small: 35rem;
+$bp-mobile-large: 45rem;
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.scss b/src/App.scss
@@ -0,0 +1,21 @@
+@import "../sass/abstracts/variables";
+
+.App {
+  width: 100vw;
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns:
+    [full-start] minmax(5vw, 1fr) [main-start] minmax(30rem, 80rem)
+    [main-end] minmax(5vw, 1fr) [full-end];
+  grid-template-rows: minmax(20rem, 29vh);
+  align-content: center;
+  justify-content: center;
+
+  @media only screen and (min-width: $bp-mobile-small) {
+    grid-template-rows: minmax(30rem, 35vh);
+  }
+
+  @media only screen and (min-width: $bp-mobile-large) {
+    grid-template-rows: minmax(35rem, 40rem);
+  }
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useState } from "react";
 import { TimerCase } from "./components/TimerCase";
-import "./App.css";
+import "./App.scss";
 
 function App() {
   const [isStarted, setIsStarted] = useState(false);

diff --git a/src/components/ButtonRow.module.scss b/src/components/ButtonRow.module.scss
@@ -1,33 +1,15 @@
-@import "../../sass/abstracts/mixins";
-
-$gutter-horizontal: 2rem;
-$grid-width: 1140px;
-
 .button-row {
-  max-width: $grid-width;
-  text-align: right;
-
-  //   @include clearfix;
-
-  //   [class*="--float"] {
-  //     float: left;
-  //   }
-
-  [class^="ButtonRow_button-"] {
-    &:not(:last-child) {
-      margin-right: $gutter-horizontal;
-    }
-  }
-
-  .button-1-7 {
-    display: inline-block;
-    width: calc((100% - (6 * #{$gutter-horizontal})) / 7);
-  }
-
-  .button-2-7 {
-    display: inline-block;
-    width: calc(
-      2 * ((100% - (6 * #{$gutter-horizontal})) / 7) + $gutter-horizontal
-    );
+  margin: 2vh 5vw 3vh 5vw;
+  max-width: 100%;
+  text-align: center;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-gap: 0.5rem;
+
+  &__start {
+    grid-column: 5 / -1;
   }
 }
diff --git a/src/components/ButtonRow.tsx b/src/components/ButtonRow.tsx
@@ -21,24 +21,22 @@ export const ButtonRow: React.FC<ButtonRowProps> = ({
 }) => {
   return (
     <div className={styles["button-row"]}>
-      <div className={styles["button-row--float"]}>
-        {timeSelectorList.map((time) => (
-          <div className={styles["button-1-7"]}>
-            <SelectorButton
-              timeSecondsLabel={time}
-              selectedTimeSeconds={selectedTimeSeconds}
-              isStarted={isStarted}
-              onSelected={onSelected}
-            />
-          </div>
-        ))}
-        <div className={styles["button-2-7"]}>
-          <StartButton
-            onClickStartButton={onClickStartButton}
+      {timeSelectorList.map((time) => (
+        <div className={styles["button-row__select"]}>
+          <SelectorButton
+            timeSecondsLabel={time}
+            selectedTimeSeconds={selectedTimeSeconds}
             isStarted={isStarted}
-            isDisabled={isDisabled}
+            onSelected={onSelected}
           />
         </div>
+      ))}
+      <div className={styles["button-row__start"]}>
+        <StartButton
+          onClickStartButton={onClickStartButton}
+          isStarted={isStarted}
+          isDisabled={isDisabled}
+        />
       </div>
     </div>
   );

diff --git a/src/components/Digit.module.scss b/src/components/Digit.module.scss
@@ -1,3 +1,5 @@
+@import "../../sass/abstracts/variables";
+
 $font-size: 100vw / 10;
 $digit-height: calc(#{$font-size} * 1.3);
 $edge-color-primary: rgb(233, 233, 233);
@@ -14,43 +16,68 @@ $digit-color-tertiary: rgb(80, 80, 80);
 
 .digit {
   width: 100%;
-  height: $digit-height;
-  max-height: 250px;
-  max-width: 200px;
+  height: 100%;
+  padding: 0 0.15rem;
   background-image: linear-gradient(
     to top left,
     $edge-color-primary,
     $edge-color-secondary 40%,
     $edge-color-tertiary 50%
   );
-  position: relative;
   text-align: center;
-  border-radius: 15px;
+  border-radius: 1rem;
   color: white;
+  position: relative;
+  z-index: 10;
+  font-size: 6rem;
+
+  @media only screen and (min-width: $bp-mobile-small) {
+    font-size: 8rem;
+    border-radius: 1.25rem;
+  }
+
+  @media only screen and (min-width: $bp-mobile-large) {
+    font-size: 13rem;
+    border-radius: 1.5rem;
+  }
+
+  .content {
+    background-image: linear-gradient(
+      to bottom right,
+      $digit-color-primary,
+      $digit-color-secondary 50%,
+      $digit-color-tertiary 80%
+    );
+    background-clip: text;
+    color: transparent;
+
+    text-align: center;
+    line-height: 1.5;
+  }
 
-  .background {
+  &::before {
+    content: "";
+    position: absolute;
     width: 96%;
     height: 96%;
-    transform: translate(2%, 2.5%);
-    border-radius: 13px;
-    position: absolute;
+    z-index: -1;
+    transform: translate(-50%, 3.5%);
+    border-radius: 1rem;
     background-image: linear-gradient(
       to top left,
       $digit-background-color-primary,
       $digit-background-color-secondary 30%,
       $digit-background-color-tertiary 70%
     );
 
-    .content {
-      background-image: linear-gradient(
-        to bottom right,
-        $digit-color-primary,
-        $digit-color-secondary 50%,
-        $digit-color-tertiary 80%
-      );
-      background-clip: text;
-      color: transparent;
-      font-size: $font-size;
+    @media only screen and (min-width: $bp-mobile-small) {
+      border-radius: 1.25rem;
+      transform: translate(-50%, 2%);
+    }
+
+    @media only screen and (min-width: $bp-mobile-large) {
+      border-radius: 1.5rem;
+      transform: translate(-50%, 2%);
     }
   }
 }
diff --git a/src/components/Digit.tsx b/src/components/Digit.tsx
@@ -8,9 +8,8 @@ interface DigitProps {
 export const Digit: React.FC<DigitProps> = ({ value }) => {
   return (
     <div className={styles.digit}>
-      <div className={styles.background}>
-        <div className={styles.content}>{value}</div>
-      </div>
+      <div className={styles.content}>{value}</div>
+      {/* <div className={styles.background}></div> */}
     </div>
   );
 };
diff --git a/src/components/SelectorButton.module.scss b/src/components/SelectorButton.module.scss
@@ -1,5 +1,18 @@
+%button-background {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  width: 94%;
+  height: 94%;
+  top: 3%;
+  left: 3%;
+  border-radius: 0.7rem;
+  text-align: center;
+}
+
 .selector-button {
   width: 100%;
+  padding: 0.25rem 0.1rem;
   background-image: linear-gradient(
     to bottom right,
     rgb(255, 255, 255),
@@ -8,9 +21,10 @@
     rgb(94, 94, 94) 40%,
     rgb(26, 26, 26) 90%
   );
-  height: 6rem;
+  height: 100%;
   position: relative;
   border-radius: 0.7rem;
+  z-index: 10;
 
   &:hover,
   &:active {
@@ -24,36 +38,14 @@
       rgb(254, 194, 82) 30%,
       rgb(255, 166, 0),
       rgb(197, 105, 0) 40%,
-      rgb(26, 26, 26) 90%
+      rgb(45, 45, 45) 90%
     );
   }
 
-  &__background {
-    position: absolute;
-    width: 96%;
-    height: 90%;
-    background-image: linear-gradient(
-      to bottom right,
-      rgb(215, 215, 215),
-      rgb(131, 131, 131)
-    );
-    transform: translate(2%, 5%);
-    border-radius: 0.7rem;
-    text-align: center;
-
-    &--selected {
-      background-image: linear-gradient(
-        to bottom right,
-        rgb(255, 136, 0),
-        orange
-      );
-    }
-  }
-
   &__text {
-    font-size: 3rem;
+    font-size: 2.2rem;
     color: rgb(64, 64, 64);
-    display: block;
+    line-height: 1.3;
 
     &--selected {
       color: rgb(203, 68, 0);
@@ -63,11 +55,30 @@
 
   &__subtext {
     font-size: 1.3rem;
+    color: rgb(64, 64, 64);
     font-weight: 600;
 
     &--selected {
       color: rgb(203, 68, 0);
       text-shadow: 0 0 3px rgb(255, 85, 0);
     }
   }
+
+  &::before {
+    @extend %button-background;
+    background-image: linear-gradient(
+      to bottom right,
+      rgb(215, 215, 215),
+      rgb(131, 131, 131)
+    );
+  }
+
+  &--selected::before {
+    @extend %button-background;
+    background-image: linear-gradient(
+      to bottom right,
+      rgb(255, 136, 0),
+      orange
+    );
+  }
 }
diff --git a/src/components/SelectorButton.tsx b/src/components/SelectorButton.tsx
@@ -24,11 +24,6 @@ export const SelectorButton: React.FC<SelectorButtonProps> = ({
       ? "selector-button__subtext--selected"
       : "";
 
-  const selectedBackgroundStyle =
-    selectedTimeSeconds === timeSecondsLabel
-      ? "selector-button__background--selected"
-      : "";
-
   const selectedEdgeStyle =
     selectedTimeSeconds === timeSecondsLabel ? "selector-button--selected" : "";
 
@@ -38,18 +33,14 @@ export const SelectorButton: React.FC<SelectorButtonProps> = ({
       onClick={isStarted ? undefined : onSelected.bind(null, timeSecondsLabel)}
     >
       <div
-        className={`${styles["selector-button__background"]} ${styles[selectedBackgroundStyle]}`}
+        className={`${styles["selector-button__text"]} ${styles[selectedTextStyle]}`}
+      >
+        {minutes}
+      </div>
+      <div
+        className={`${styles["selector-button__subtext"]} ${styles[selectedSubtextStyle]}`}
       >
-        <div
-          className={`${styles["selector-button__text"]} ${styles[selectedTextStyle]}`}
-        >
-          {minutes}
-        </div>
-        <div
-          className={`${styles["selector-button__subtext"]} ${styles[selectedSubtextStyle]}`}
-        >
-          min
-        </div>
+        min
       </div>
     </div>
   );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		$bp-mobile-small: 35rem;
		$bp-mobile-large: 45rem;