From d2470b157f84844539c34adfaf77548069f47bd0 Mon Sep 17 00:00:00 2001 From: Arda Serdar Pektezol <1669855+pektezol@users.noreply.github.com> Date: Sun, 26 Oct 2025 13:29:53 +0400 Subject: feat/frontend: tablet breakpoints (#285) --- frontend/src/App.css | 8 +++ frontend/src/components/Sidebar.tsx | 20 +++--- frontend/src/components/Summary.tsx | 4 +- frontend/src/css/About.css | 17 +++++ frontend/src/css/Dialog.css | 25 +++++++ frontend/src/css/Games.css | 41 +++++++++++ frontend/src/css/Maplist.css | 37 ++++++++++ frontend/src/css/Maps.css | 136 +++++++++++++++++++++++++++++++++++ frontend/src/css/ModMenu.css | 63 ++++++++++++++++ frontend/src/css/Profile.css | 86 ++++++++++++++++++++++ frontend/src/css/Rankings.css | 32 +++++++++ frontend/src/css/Rules.css | 6 ++ frontend/src/css/Sidebar.css | 59 +++++++++++++++ frontend/src/css/UploadRunDialog.css | 45 ++++++++++++ 14 files changed, 567 insertions(+), 12 deletions(-) diff --git a/frontend/src/App.css b/frontend/src/App.css index 8325f87..96711f9 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -94,6 +94,14 @@ body { src: local('BarlowSemiCondensed-Regular'), url(./fonts/BarlowSemiCondensed-SemiBold.ttf) format('truetype'); } +@media screen and (min-width: 769px) and (max-width: 1024px) { + main { + width: calc(100% - 20rem); + left: 19rem; + font-size: 2rem; + } +} + @media screen and (max-width: 768px) { * { box-sizing: border-box; diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx index c45ec27..0a7efa8 100644 --- a/frontend/src/components/Sidebar.tsx +++ b/frontend/src/components/Sidebar.tsx @@ -60,7 +60,7 @@ const Sidebar: React.FC = ({ setToken, profile, setProfile, onUplo setSidebarOpen(false); side.style.width = "320px" btn.forEach((e, i) => { - e.style.width = "310px" + e.style.width = (window.innerWidth > 1024) ? "310px" : "265px" e.style.padding = "0.4em 0 0 11px" setTimeout(() => { span[i].style.opacity = "1" @@ -225,15 +225,15 @@ const Sidebar: React.FC = ({ setToken, profile, setProfile, onUplo ))} {searchData?.players.map((q, index) => - ( - - pfp - {q.user_name} - - ))} + ( + + pfp + {q.user_name} + + ))} diff --git a/frontend/src/components/Summary.tsx b/frontend/src/components/Summary.tsx index 72b5bf0..922960b 100644 --- a/frontend/src/components/Summary.tsx +++ b/frontend/src/components/Summary.tsx @@ -140,11 +140,11 @@ const Summary: React.FC = ({ selectedRun, setSelectedRun, data })
Difficulty - {data.map.difficulty <= 2 && (Very easy)} + {data.map.difficulty <= 2 && (Very Easy)} {data.map.difficulty > 2 && data.map.difficulty <= 4 && (Easy)} {data.map.difficulty > 4 && data.map.difficulty <= 6 && (Medium)} {data.map.difficulty > 6 && data.map.difficulty <= 8 && (Hard)} - {data.map.difficulty > 8 && data.map.difficulty <= 10 && (Very hard)} + {data.map.difficulty > 8 && data.map.difficulty <= 10 && (Very Hard)}
{data.map.difficulty <= 2 ? (
) : (
)} {data.map.difficulty > 2 && data.map.difficulty <= 4 ? (
) : (
)} diff --git a/frontend/src/css/About.css b/frontend/src/css/About.css index c29e0bc..07454ca 100644 --- a/frontend/src/css/About.css +++ b/frontend/src/css/About.css @@ -23,6 +23,23 @@ h2 { font-size: 60px; } +@media screen and (min-width: 769px) and (max-width: 1024px) { + #about { + width: calc(100% - 340px); + left: 310px; + padding-right: 25px; + font-size: 22px; + } + + h1 { + font-size: 68px; + } + + h2 { + font-size: 52px; + } +} + @media screen and (max-width: 768px) { #about { width: 100%; diff --git a/frontend/src/css/Dialog.css b/frontend/src/css/Dialog.css index d2f0528..1e03ca3 100644 --- a/frontend/src/css/Dialog.css +++ b/frontend/src/css/Dialog.css @@ -95,6 +95,31 @@ } } +@media screen and (min-width: 769px) and (max-width: 1024px) { + .dialog-container { + left: -280px; + } + + .dialog { + min-width: 380px; + max-width: 500px; + } + + .dialog-header { + font-size: 22px; + } + + .dialog-description { + font-size: 17px; + padding: 13px 9px; + } + + .dialog-btns-container button { + padding: 6px 12px; + font-size: 17px; + } +} + @media screen and (max-width: 768px) { .dialog-container { left: 0; diff --git a/frontend/src/css/Games.css b/frontend/src/css/Games.css index 2fe5efa..9b1780c 100644 --- a/frontend/src/css/Games.css +++ b/frontend/src/css/Games.css @@ -98,6 +98,47 @@ span>b { font-family: BarlowCondensed-Bold; } +@media screen and (min-width: 769px) and (max-width: 1024px) { + .games-page { + left: 280px; + width: calc(100% - 280px); + } + + .games-page-item-content { + left: 40px; + width: calc(100% - 80px); + } + + .games-page-header { + margin-top: 40px; + margin-left: 40px; + } + + span>b { + font-size: 48px; + } + + .games-page-item { + height: 220px; + } + + .games-page-item-header { + height: 45%; + } + + .games-page-item-body-item { + height: 90px; + } + + .games-page-item-body-item-title { + font-size: 22px; + } + + .games-page-item-body-item-num { + font-size: 44px; + } +} + @media screen and (max-width: 768px) { .games-page { left: 0; diff --git a/frontend/src/css/Maplist.css b/frontend/src/css/Maplist.css index 65c3a28..612c0a5 100644 --- a/frontend/src/css/Maplist.css +++ b/frontend/src/css/Maplist.css @@ -198,6 +198,43 @@ h3 { } } +@media screen and (min-width: 769px) and (max-width: 1024px) { + h1 { + font-size: 48px; + } + + h3 { + font-size: 36px; + margin: 0px 8px; + } + + .portal-count { + font-size: 80px; + } + + .blur.map span:nth-child(1) { + font-size: 50px; + } + + .game-cat-button { + font-size: 20px; + } + + .maplist { + grid-template-columns: repeat(2, 1fr); + grid-gap: 18px; + margin: 18px 0px; + } + + .maplist-entry span { + font-size: 18px; + } + + .map-entry-image { + height: 180px; + } +} + @media screen and (max-width: 768px) { h1 { font-size: 36px; diff --git a/frontend/src/css/Maps.css b/frontend/src/css/Maps.css index 66e11c7..14eed05 100644 --- a/frontend/src/css/Maps.css +++ b/frontend/src/css/Maps.css @@ -477,6 +477,7 @@ p>span.portal-count { border: 0; transition: background-color .1s; background-color: #2b2e46; + box-sizing: border-box; } .leaderboard-record>span:nth-child(1) { @@ -508,12 +509,19 @@ p>span.portal-count { display: grid; grid-template-columns: 50% 50%; place-items: left; + box-sizing: border-box; + min-width: 0; + overflow: hidden; } .leaderboard-record>div>a>span { display: flex; place-items: center; height: 44px; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .leaderboard-record>span>button { @@ -858,6 +866,134 @@ p>span.portal-count { border-bottom: 7px solid transparent; } +@media screen and (min-width: 769px) and (max-width: 1024px) { + #section1 { + margin: 18px 0 0 0; + } + + .nav-button { + height: 38px; + font-size: 17px; + } + + #section2 { + margin: 36px 0 0 0; + gap: 2px; + } + + #section2>.nav-button { + height: 45px; + font-size: 20px; + } + + #section3 { + margin: 36px 0 0 0; + grid-template-columns: 1fr; + gap: 18px; + } + + #category { + height: 320px; + width: 100%; + max-width: 100%; + } + + #category>p { + font-size: 44px; + } + + p>span.portal-count { + font-size: 88px; + } + + #history { + width: 100%; + max-width: 100%; + } + + #records { + height: 232px; + } + + .record-top, + .record { + font-size: 17px; + } + + #section4 { + grid-template-columns: 1fr 1fr; + gap: 18px; + margin: 36px 0 0 0; + } + + #difficulty>span:nth-child(2) { + font-size: 36px; + } + + #count>div { + font-size: 44px; + } + + #section5 { + margin: 36px 0 18px 0; + } + + #description { + min-height: 300px; + } + + #description>iframe { + width: 100%; + max-width: 100%; + height: 250px; + margin: 20px 0; + padding: 0; + box-sizing: border-box; + } + + #description>h3 { + font-size: 2.2rem; + } + + #description-text { + font-size: 19px; + } + + #section6 { + margin: 36px 0 18px 0; + min-height: 540px; + } + + #leaderboard-top { + font-size: 18px; + padding-left: 50px; + } + + .leaderboard-record { + font-size: 18px; + padding: 0 0 0 50px; + grid-template-columns: 4% 5% 38% 5% 4% 14% 14% 16%; + } + + .leaderboard-record>div>a>span>img { + height: 32px; + } + + #section7 { + margin: 36px 0 18px 0; + } + + #discussion-search>input, + #discussion-send>input { + font-size: 18px; + } + + #discussion-thread>div:nth-child(2) { + font-size: 18px; + max-height: 460px; + } +} + @media screen and (max-width: 1480px) { #section3.summary1 { grid-template-columns: auto; diff --git a/frontend/src/css/ModMenu.css b/frontend/src/css/ModMenu.css index f09a4b0..d6cdc27 100644 --- a/frontend/src/css/ModMenu.css +++ b/frontend/src/css/ModMenu.css @@ -141,6 +141,69 @@ div#modview>div:nth-child(2) { font-size: 21px; } +@media screen and (min-width: 769px) and (max-width: 1024px) { + #modview_block { + left: 280px; + width: calc(100% - 280px); + } + + #modview-menu { + left: calc(50% + 140px); + top: 100px; + } + + #modview-menu-image { + grid-template-columns: 1fr; + } + + #modview-menu-image>div:nth-child(1), + #modview-menu-image>div:nth-child(2) { + width: 450px; + height: auto; + } + + #modview-menu-image>div>img { + width: 450px; + } + + #modview-menu-image>div>button { + width: 280px; + margin-left: 85px; + font-size: 18px; + } + + #modview-menu-add, + #modview-menu-edit { + grid-template-columns: 1fr 1fr 1fr; + font-size: 36px; + } + + #modview-menu-add>div, + #modview-menu-edit>div { + width: 180px; + font-size: 18px; + } + + #modview-route-description>textarea { + width: 680px; + height: 140px; + } + + #modview-md { + width: 700px; + height: 260px; + top: 380px; + } + + #modview-md>p { + font-size: 19px; + } + + div#modview { + width: 280px; + } +} + @media screen and (max-width: 768px) { #modview_block { left: 0; diff --git a/frontend/src/css/Profile.css b/frontend/src/css/Profile.css index ccf88f4..26e2eb8 100644 --- a/frontend/src/css/Profile.css +++ b/frontend/src/css/Profile.css @@ -288,6 +288,92 @@ span.titles { cursor: pointer; } +@media screen and (min-width: 769px) and (max-width: 1024px) { + #section1.profile { + margin: 18px; + grid-template-columns: 220px 1fr; + height: 180px; + } + + #section1.profile>div:first-child { + margin: 6px 28px 6px 28px; + scale: 0.85; + } + + #profile-top { + height: 90px; + grid-template-columns: 75% 25%; + } + + #profile-top>div:nth-child(1) { + font-size: 44px; + } + + #profile-top>div:nth-child(1)>div>img { + margin: 10px; + } + + span.titles { + margin: 10px 10px 10px 0; + font-size: 16px; + padding: 5px 16px 0px 16px; + } + + #profile-top>div:nth-child(2)>a>img { + height: 44px; + } + + #profile-bottom { + height: 90px; + } + + #profile-bottom>div>span:nth-child(1) { + font-size: 16px; + } + + #profile-bottom>div>span:nth-child(2) { + font-size: 24px; + } + + #profile-bottom>div>span:nth-child(2)>span { + font-size: 12px; + } + + #section2.profile { + margin: 18px; + height: 55px; + } + + #section2.profile>button { + font-size: 22px; + } + + #section3.profile1 { + margin: 18px; + } + + #profileboard-nav>select { + margin: 10px 18px 18px 18px; + height: 48px; + font-size: 22px; + } + + #profileboard-top { + font-size: 18px; + padding-left: 35px; + margin: 0 18px; + grid-template-columns: 16% 16% 5% 16% 5% 14% 14% 14%; + } + + .profileboard-record { + margin: 10px 18px 0px 18px; + width: calc(100% - 36px); + padding: 0 0 0 35px; + font-size: 18px; + grid-template-columns: 16% 16% 5% 16% 5% 14% 14% 14%; + } +} + @media screen and (max-width: 768px) { * { box-sizing: border-box; diff --git a/frontend/src/css/Rankings.css b/frontend/src/css/Rankings.css index b644ecd..ac1be93 100644 --- a/frontend/src/css/Rankings.css +++ b/frontend/src/css/Rankings.css @@ -107,6 +107,38 @@ transform: translateX(10px); } +@media screen and (min-width: 769px) and (max-width: 1024px) { + .nav-container button { + font-size: 23px; + padding: 9px 0px; + } + + .nav-1 div { + width: 70%; + } + + .nav-2 div { + width: 82%; + } + + .rankings-leaderboard { + font-size: 18px; + } + + .ranks-container { + width: calc(70% - 20px); + } + + .leaderboard-entry { + grid-template-columns: 18% 42% 40%; + font-size: 16px; + } + + .leaderboard-entry img { + height: 30px; + } +} + @media screen and (max-width: 768px) { .nav-1 div, diff --git a/frontend/src/css/Rules.css b/frontend/src/css/Rules.css index b7807cf..b066f02 100644 --- a/frontend/src/css/Rules.css +++ b/frontend/src/css/Rules.css @@ -2,6 +2,12 @@ main { font-size: 24px; } +@media screen and (min-width: 769px) and (max-width: 1024px) { + main { + font-size: 22px; + } +} + @media screen and (max-width: 768px) { main { font-size: 18px; diff --git a/frontend/src/css/Sidebar.css b/frontend/src/css/Sidebar.css index 36ceb9c..413f32d 100644 --- a/frontend/src/css/Sidebar.css +++ b/frontend/src/css/Sidebar.css @@ -308,6 +308,65 @@ a { display: none; } +@media screen and (min-width: 769px) and (max-width: 1024px) { + #sidebar { + width: 280px; + } + + #logo-text { + font-size: 30px; + line-height: 32px; + } + + #logo-text>span>b { + font-size: 50px; + } + + .sidebar-button, + .logout-button, + .submit-run-button { + width: 265px; + height: 40px; + } + + input#searchbar[type=text] { + width: 200px; + height: 28px; + font-size: 18px; + } + + #search-data { + max-height: calc(100vh - 172px); + } + + .search-map, + .search-player { + width: calc(100% - 50px); + height: 75px; + margin: 9px 6px 0 6px; + } + + .search-map>span { + font-size: 15px; + } + + .search-map>span:nth-child(3) { + font-size: 26px; + } + + .search-player { + padding: 0 14px; + } + + .search-player>img { + height: 55px; + } + + .search-player>span { + font-size: 23px; + } +} + @media screen and (max-width: 768px) { #sidebar { diff --git a/frontend/src/css/UploadRunDialog.css b/frontend/src/css/UploadRunDialog.css index 56c2080..0237521 100644 --- a/frontend/src/css/UploadRunDialog.css +++ b/frontend/src/css/UploadRunDialog.css @@ -165,6 +165,51 @@ button:hover { align-items: flex-start; } +@media screen and (min-width: 769px) and (max-width: 1024px) { + div#upload-run { + width: 280px; + } + + #upload-run-menu { + left: calc(50% + 140px); + top: 100px; + } + + #upload-run-menu-add, + #upload-run-menu-edit { + font-size: 36px; + } + + #upload-run-menu-add>div, + #upload-run-menu-edit>div { + font-size: 19px; + padding: 0px 13px; + } + + .upload-run-dropdown-container .dropdown-cur { + width: 220px; + } + + .upload-run-dropdown { + width: 240px; + max-height: 280px; + } + + .upload-run-demo-name { + width: 350px; + } + + .upload-run-drag-area { + width: 340px; + height: 140px; + } + + button, + input { + font-size: 17px; + } +} + @media screen and (max-width: 768px) { div#upload-run { width: 90vw; -- cgit v1.2.3