feat/frontend: tablet breakpoints (#285)

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<SidebarProps> = ({ 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<SidebarProps> = ({ setToken, profile, setProfile, onUplo
               </Link>
             ))}
             {searchData?.players.map((q, index) =>
-              (
-                <Link to={
-                  profile && q.steam_id === profile.steam_id ? "/profile" :
-                    `/users/${q.steam_id}`
-                } className='search-player' key={index} onClick={_close_mobile_search_and_menu}>
-                  <img src={q.avatar_link} alt='pfp'></img>
-                  <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span>
-                </Link>
-              ))}
+            (
+              <Link to={
+                profile && q.steam_id === profile.steam_id ? "/profile" :
+                  `/users/${q.steam_id}`
+              } className='search-player' key={index} onClick={_close_mobile_search_and_menu}>
+                <img src={q.avatar_link} alt='pfp'></img>
+                <span style={{ fontSize: `${36 - q.user_name.length * 0.8}px` }}>{q.user_name}</span>
+              </Link>
+            ))}
 
           </div>
         </div>
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<SummaryProps> = ({ selectedRun, setSelectedRun, data })
       <section id='section4' className='summary1'>
         <div id='difficulty'>
           <span>Difficulty</span>
-          {data.map.difficulty <= 2 && (<span style={{ color: "lime" }}>Very easy</span>)}
+          {data.map.difficulty <= 2 && (<span style={{ color: "lime" }}>Very Easy</span>)}
           {data.map.difficulty > 2 && data.map.difficulty <= 4 && (<span style={{ color: "green" }}>Easy</span>)}
           {data.map.difficulty > 4 && data.map.difficulty <= 6 && (<span style={{ color: "yellow" }}>Medium</span>)}
           {data.map.difficulty > 6 && data.map.difficulty <= 8 && (<span style={{ color: "orange" }}>Hard</span>)}
-          {data.map.difficulty > 8 && data.map.difficulty <= 10 && (<span style={{ color: "red" }}>Very hard</span>)}
+          {data.map.difficulty > 8 && data.map.difficulty <= 10 && (<span style={{ color: "red" }}>Very Hard</span>)}
           <div>
             {data.map.difficulty <= 2 ? (<div className='difficulty-rating' style={{ backgroundColor: "lime" }}></div>) : (<div className='difficulty-rating'></div>)}
             {data.map.difficulty > 2 && data.map.difficulty <= 4 ? (<div className='difficulty-rating' style={{ backgroundColor: "green" }}></div>) : (<div className='difficulty-rating'></div>)}
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;