tournaments page adaptive

src/helpers/dateParser.ts

@@ -6,29 +6,29 @@ export const dateParser = (input: string, includeYear?: boolean) => {
   let parsedMonth = [""];
 
   if (month === "1" || "01") {
-    parsedMonth = ["January", "Январь"];
+    parsedMonth = ["Jan", "Янв"];
   } else if (month === "2" || "02") {
-    parsedMonth = ["February", "Февраль"];
+    parsedMonth = ["Feb", "Фев"];
   } else if (month === "3" || "03") {
-    parsedMonth = ["March", "Март"];
+    parsedMonth = ["Mar", "Мар"];
   } else if (month === "4" || "04") {
-    parsedMonth = ["April", "Апрель"];
+    parsedMonth = ["Apr", "Апр"];
   } else if (month === "5" || "05") {
     parsedMonth = ["May", "Май"];
   } else if (month === "6" || "06") {
-    parsedMonth = ["June", "Июнь"];
+    parsedMonth = ["Jun", "Июн"];
   } else if (month === "7" || "07") {
-    parsedMonth = ["July", "Июль"];
+    parsedMonth = ["Jul", "Июл"];
   } else if (month === "8" || "08") {
-    parsedMonth = ["August", "Август"];
+    parsedMonth = ["Aug", "Авг"];
   } else if (month === "9" || "09") {
-    parsedMonth = ["September", "Сентябрь"];
+    parsedMonth = ["Sep", "Сен"];
   } else if (month === "10") {
-    parsedMonth = ["October", "Октябрь"];
+    parsedMonth = ["Oct", "Окт"];
   } else if (month === "11") {
-    parsedMonth = ["November", "Ноябрь"];
+    parsedMonth = ["Nov", "Ноя"];
   } else if (month === "12") {
-    parsedMonth = ["December", "Декабрь"];
+    parsedMonth = ["Dec", "Дек"];
   }
 
   if (includeYear) {

src/pages/Tournaments.tsx

@@ -27,10 +27,14 @@ const Tournaments = () => {
   }, []);
   return (
     <main className="tournaments">
-      <div className="container">
-        <div className="tournaments-inner">
-          <SectionTitle title="Турниры" />
-          <div className="tournaments-wrapper">
+      <div className="tournaments-banner">
+        <div className="container">
+          <div className="tournaments-title">
+            <SectionTitle title="Турниры" />
+          </div>
+        </div>
+        <div className="container">
+          <div className="tournaments-banner-inner">
             {tournaments ? (
               tournaments.map((tournament: any) => {
                 if (tournament.current === 1) {
@@ -61,6 +65,12 @@ const Tournaments = () => {
                 height={"36.2rem"}
               />
             )}
+          </div>
+        </div>
+      </div>
+      <div className="container">
+        <div className="tournaments-inner">
+          <div className="tournaments-wrapper">
             <div className="tournaments-lower">
               {tournaments
                 ? tournaments.map((tournament: any) => {

src/styles/_tournaments.scss

@@ -1,10 +1,24 @@
 .tournaments-inner {
-  padding: 8rem 0;
+  padding: 0 0 8rem 0;
   display: flex;
   flex-direction: column;
   gap: 4.8rem;
 }
 
+.tournaments-banner {
+  padding-top: 8rem;
+}
+
+.tournaments-title {
+  padding-bottom: 4.8rem;
+}
+
+.tournaments {
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+}
+
 .tournaments-wrapper {
   display: flex;
   flex-direction: column;
@@ -17,6 +31,7 @@
   padding: 5.6rem 4rem;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   gap: 1.6rem;
   border-radius: 0.5rem;
   min-height: 36.2rem;
@@ -46,6 +61,7 @@
 }
 
 .tournament-top {
+  overflow: hidden;
   position: relative;
   width: 100%;
   max-height: 26rem;
@@ -84,18 +100,145 @@
   p {
     display: flex;
     align-items: center;
+    justify-content: space-around;
     gap: 0.8rem;
   }
 
   span {
+    text-align: center;
     font-size: 1.8rem;
     line-height: 2.5rem;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    // COMMENTED BECAUSE PREVENTS OUTER DIV FROM SHRINKING
+    // white-space: nowrap;
+    // text-overflow: ellipsis;
+    // overflow: hidden;
   }
 
   .separator {
     color: $base-green;
   }
 }
+
+.tournament {
+  max-width: 41rem;
+}
+
+// Adaptive
+
+@media screen and (max-width: 1330px) {
+  .tournaments-lower {
+    column-gap: 7rem;
+  }
+  .tournament-bottom {
+    p {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .separator {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 1200px) {
+  .tournaments-head {
+    h2 {
+      font-size: 4rem;
+    }
+  }
+  .tournament {
+    max-width: unset;
+  }
+  .tournaments-lower {
+    grid-template-columns: 1fr 1fr;
+  }
+  .tournament-bottom {
+    p {
+      flex-direction: row;
+      align-items: center;
+
+      .separator {
+        display: block;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 900px) {
+  .tournaments-head {
+    h2 {
+      width: 100%;
+      font-size: 3.2rem;
+    }
+  }
+  .tournament-bottom {
+    h3 {
+      font-size: 2.2rem;
+    }
+  }
+  .tournaments-lower {
+    gap: 4rem;
+  }
+  .tournament-bottom {
+    p {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .separator {
+        display: none;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .tournaments-head {
+    padding: 5.6rem 2rem;
+  }
+  .tournaments-banner {
+    padding-top: 4.8rem;
+  }
+  .tournaments-lower {
+    grid-template-columns: 1fr;
+    gap: 2.4rem;
+  }
+  .tournament-top {
+    max-height: unset;
+  }
+  .tournament-bottom {
+    p {
+      justify-content: flex-start;
+      flex-direction: row;
+      align-items: center;
+
+      .separator {
+        display: block;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .tournaments-banner {
+    .container:not(:first-child) {
+      padding: 0;
+      margin: 0;
+      width: 100%;
+      max-width: unset;
+    }
+  }
+}
+
+@media screen and (max-width: 400px) {
+  .tournament-bottom {
+    p {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .separator {
+        display: none;
+      }
+    }
+  }
+}

src/variables/animations.ts

@@ -1 +0,0 @@
-export const duration: number = 0.3;