From e7dacf7f4010e6395a404a741bf02d58f0031ef8 Mon Sep 17 00:00:00 2001 From: VividTruthKeeper Date: Thu, 11 Aug 2022 00:39:17 +0500 Subject: [PATCH] tournaments page adaptive --- src/helpers/dateParser.ts | 22 ++--- src/pages/Tournaments.tsx | 18 ++++- src/styles/_tournaments.scss | 151 ++++++++++++++++++++++++++++++++++- src/variables/animations.ts | 1 - 4 files changed, 172 insertions(+), 20 deletions(-) delete mode 100644 src/variables/animations.ts diff --git a/src/helpers/dateParser.ts b/src/helpers/dateParser.ts index ceac988..c1ca0e8 100644 --- a/src/helpers/dateParser.ts +++ b/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) { diff --git a/src/pages/Tournaments.tsx b/src/pages/Tournaments.tsx index ac8d98e..917d959 100644 --- a/src/pages/Tournaments.tsx +++ b/src/pages/Tournaments.tsx @@ -27,10 +27,14 @@ const Tournaments = () => { }, []); return (
-
-
- -
+
+
+
+ +
+
+
+
{tournaments ? ( tournaments.map((tournament: any) => { if (tournament.current === 1) { @@ -61,6 +65,12 @@ const Tournaments = () => { height={"36.2rem"} /> )} +
+
+
+
+
+
{tournaments ? tournaments.map((tournament: any) => { diff --git a/src/styles/_tournaments.scss b/src/styles/_tournaments.scss index 02eaa52..0cf3246 100644 --- a/src/styles/_tournaments.scss +++ b/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; + } + } + } +} diff --git a/src/variables/animations.ts b/src/variables/animations.ts deleted file mode 100644 index c9f6229..0000000 --- a/src/variables/animations.ts +++ /dev/null @@ -1 +0,0 @@ -export const duration: number = 0.3;