Change body padding for mobile (#498)

Improves spacing on search, course, and professor pages. Some content inside the cards still look funny, but those pieces are pending redesign anyways
icssc · Nov 2, 2024 · be6ddc4 · be6ddc4
1 parent d9a61a0
commit be6ddc4
Show file tree

Hide file tree

Showing 13 changed files with 51 additions and 13 deletions.
diff --git a/site/src/App.scss b/site/src/App.scss
@@ -1,3 +1,5 @@
+@import './globals';
+
 button {
   color: inherit;
 }
@@ -18,6 +20,10 @@ button {
   overflow-x: hidden;
   background-color: var(--background);
   box-sizing: border-box;
+
+  @media (max-width: $mobile-cutoff) {
+    padding: 20px 24px;
+  }
 }
 
 .ppc-btn {

diff --git a/site/src/component/AppHeader/AppHeader.scss b/site/src/component/AppHeader/AppHeader.scss
@@ -1,7 +1,9 @@
+@import '../../globals';
+
 #peterportal-logo {
   width: auto;
   height: 32px;
-  @media (min-width: 800px) {
+  @media (min-width: $mobile-cutoff) {
     height: 36px;
   }
 }
@@ -76,7 +78,7 @@
       width: fit-content;
     }
 
-    @media only screen and (max-width: 800px) {
+    @media only screen and (max-width: $mobile-cutoff) {
       .beta {
         display: none;
       }

diff --git a/site/src/component/ChangelogModal/ChangelogModal.scss b/site/src/component/ChangelogModal/ChangelogModal.scss
@@ -1,3 +1,5 @@
+@import '../../globals';
+
 .changelog-modal {
   .modal-content {
     border: none;
@@ -33,7 +35,7 @@
     font-size: 32px;
   }
 
-  @media only screen and (max-width: 800px) {
+  @media only screen and (max-width: $mobile-cutoff) {
     .modal-img {
       max-width: 90vw;
       max-height: 50vh;

diff --git a/site/src/component/ReviewForm/ReviewForm.scss b/site/src/component/ReviewForm/ReviewForm.scss
@@ -1,3 +1,5 @@
+@import '../../globals';
+
 [data-theme='dark'] {
   .review-form {
     .form-control,
@@ -130,7 +132,7 @@
   gap: 14px;
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: $mobile-cutoff) {
   .review-form {
     height: 80vh;
     overflow-y: auto;

diff --git a/site/src/component/SearchModule/SearchModule.tsx b/site/src/component/SearchModule/SearchModule.tsx
@@ -123,7 +123,7 @@ const SearchModule: FC<SearchModuleProps> = ({ index }) => {
 
   return (
     <div className="search-module">
-      <Form.Group className="mb-3">
+      <Form.Group>
         <InputGroup>
           <InputGroup.Prepend>
             <InputGroup.Text>

diff --git a/site/src/component/SearchPopup/SearchPopup.scss b/site/src/component/SearchPopup/SearchPopup.scss
@@ -1,3 +1,5 @@
+@import '../../globals';
+
 [data-theme='dark'] {
   .search-popup {
     .dropdown,
@@ -33,13 +35,13 @@
 
 .search-popup {
   background-color: var(--overlay1);
-  padding: 3rem;
   margin-left: 3vw;
   height: 85vh;
   overflow-y: auto;
   border-radius: var(--border-radius);
   width: 576px;
   max-width: 40vw;
+  @include card-padding;
 }
 
 .search-popup-header {

diff --git a/site/src/component/SideBar/Sidebar.scss b/site/src/component/SideBar/Sidebar.scss
@@ -1,3 +1,5 @@
+@import '../../globals';
+
 .sidebar {
   position: fixed;
   width: 300px;
@@ -178,7 +180,7 @@
     }
   }
 
-  @media only screen and (max-width: 800px) {
+  @media only screen and (max-width: $mobile-cutoff) {
     display: none;
   }
 }

diff --git a/site/src/component/SideInfo/SideInfo.scss b/site/src/component/SideInfo/SideInfo.scss
@@ -1,13 +1,15 @@
+@import '../../globals';
+
 .side-info {
   width: 40vw;
   height: fit-content;
   max-height: 85vh;
   background-color: var(--overlay1);
   border-radius: var(--border-radius);
-  padding: 3rem;
   position: sticky;
   top: 0;
   overflow-y: auto;
+  @include card-padding;
 }
 
 .side-info-data {

diff --git a/site/src/globals.scss b/site/src/globals.scss
@@ -0,0 +1,8 @@
+$mobile-cutoff: 800px;
+
+@mixin card-padding {
+  padding: 32px 36px;
+  @media (max-width: $mobile-cutoff) {
+    padding: 16px 20px;
+  }
+}
diff --git a/site/src/pages/CoursePage/CoursePage.scss b/site/src/pages/CoursePage/CoursePage.scss
@@ -1,3 +1,5 @@
+@import '../../globals';
+
 .course-page {
   display: flex;
 }
@@ -10,8 +12,8 @@
   max-width: 45vw;
   background-color: var(--overlay1);
   border-radius: var(--border-radius);
-  padding: 3rem;
   margin-bottom: 3vh;
+  @include card-padding;
 }
 
 .twemoji {

diff --git a/site/src/pages/ProfessorPage/ProfessorPage.scss b/site/src/pages/ProfessorPage/ProfessorPage.scss
@@ -1,3 +1,5 @@
+@import '../../globals';
+
 .professor-page {
   display: flex;
 }
@@ -10,8 +12,8 @@
   max-width: 45vw;
   background-color: var(--overlay1);
   border-radius: var(--border-radius);
-  padding: 3rem;
   margin-bottom: 3vh;
+  @include card-padding;
 }
 
 .twemoji {

diff --git a/site/src/pages/RoadmapPage/Year.scss b/site/src/pages/RoadmapPage/Year.scss
@@ -1,3 +1,5 @@
+@import '../../globals';
+
 [data-theme='dark'] {
   .year-settings-btn:hover,
   .year-settings-btn:focus,
@@ -140,7 +142,7 @@
   }
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: $mobile-cutoff) {
   .year-accordion-content {
     flex-direction: column;
   }

diff --git a/site/src/pages/SearchPage/SearchPage.scss b/site/src/pages/SearchPage/SearchPage.scss
@@ -1,3 +1,5 @@
+@import '../../globals';
+
 #content-container {
   display: flex;
   flex-grow: 1;
@@ -16,16 +18,20 @@
   }
 
   .search-hit-container {
-    margin-top: 2vh; // use margin instead of padding so the scroll bar isn't offset/above the first hit item
+    margin-top: 8px; // use margin instead of padding so the scroll bar isn't offset/above the first hit item
     padding-top: 0;
 
     .hit-item:last-child {
       margin-bottom: 0; // so scroll bar doesn't extend past the last hit item
     }
+
+    @media (max-width: $mobile-cutoff) {
+      margin-top: 4px;
+    }
   }
 }
 
-@media only screen and (max-width: 800px) {
+@media only screen and (max-width: $mobile-cutoff) {
   #content-container {
     #search-list {
       width: 100%;