Catalog Page: Mobile view changes (#1956)

mitodl · Oct 20, 2023 · 8ba88d0 · 8ba88d0
1 parent 24a91a2
commit 8ba88d0
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 8 deletions.
diff --git a/frontend/public/scss/catalog.scss b/frontend/public/scss/catalog.scss
@@ -22,6 +22,10 @@
             width: 305px;
             position: sticky;
         }
+
+        @include media-breakpoint-down(sm) {
+            margin-top: 0;
+        }
 
         /* Dropshadow */
         box-shadow: 0px 2px 3px 0px rgba(18, 38, 49, 0.15);
@@ -87,7 +91,7 @@
         top: 0;
 
         @include media-breakpoint-down(sm) {
-            padding: 20px 0px;
+            padding: 10px 0px;
           }
         h2 {
             overflow: hidden;
@@ -104,6 +108,16 @@
             flex-direction: column;
             justify-content: center;
             margin-bottom: 0;
+
+            @include media-breakpoint-down(sm) {
+                font-size: 20px;
+            }
+
+            small {
+                font-size: 12px;
+                font-weight: 300;
+                font-family: Inter;
+            }
         }
 
         #mobile-catalog-title {
@@ -113,6 +127,8 @@
                 position: absolute;
                 left: 20px;
                 background: url("#{$static-path}/images/filter_list_alt.svg") no-repeat;
+                top: 50%;
+                margin-top: -12px;
             }
         }
     }
@@ -203,6 +219,10 @@
                 height: 70px;
                 margin-top: 40px;
                 margin-left: 24px;
+
+                @include media-breakpoint-down(md) {
+                    margin-top: 10px;
+                }
 
                 .catalog-page-item-count {
                     color: var(--blue-dark, #03152D);
@@ -330,6 +350,9 @@
                 margin-left: 24px;
                 gap: 24px;
                 margin-bottom: 24px;
+                @include media-breakpoint-down(sm) {
+                    justify-content: center;
+                }
 
                 a {
                     text-decoration: none;

diff --git a/frontend/public/scss/top-app-bar.scss b/frontend/public/scss/top-app-bar.scss
@@ -77,7 +77,7 @@ header.site-header {
     display: block;
   }
 
-  li[data-bs-target="#nav"] {
+  li.mobile-dropdown-item {
     display: block;
     padding: 10px 0;
     margin: 0 auto;

diff --git a/frontend/public/src/components/UserMenu.js b/frontend/public/src/components/UserMenu.js
@@ -25,7 +25,7 @@ const desktopUListProps = {
 }
 
 const overlayListItemProps = {
-  "data-bs-target": "#nav"
+  className: "mobile-dropdown-item"
 }
 
 const desktopListItemProps = {
@@ -75,22 +75,30 @@ const UserMenu = ({ currentUser, useScreenOverlay }: Props) => {
       >
         <li {...(menuChildProps.li || {})}>
           <MixedLink dest={routes.profile} aria-label="Profile">
-            Profile
+            <span data-bs-target="#nav" data-bs-toggle="collapse">
+              Profile
+            </span>
           </MixedLink>
         </li>
         <li {...(menuChildProps.li || {})}>
           <MixedLink dest={routes.dashboard} aria-label="Dashboard">
-            Dashboard
+            <span data-bs-target="#nav" data-bs-toggle="collapse">
+              Dashboard
+            </span>
           </MixedLink>
         </li>
         <li {...(menuChildProps.li || {})}>
           <MixedLink dest={routes.accountSettings} aria-label="Account">
-            Account
+            <span data-bs-target="#nav" data-bs-toggle="collapse">
+              Account
+            </span>
           </MixedLink>
         </li>
         <li {...(menuChildProps.li || {})}>
           <MixedLink dest={routes.orderHistory} aria-label="Order History">
-            Order History
+            <span data-bs-target="#nav" data-bs-toggle="collapse">
+              Order History
+            </span>
           </MixedLink>
         </li>
         <li {...(menuChildProps.li || {})}>

diff --git a/frontend/public/src/containers/pages/CatalogPage.js b/frontend/public/src/containers/pages/CatalogPage.js
@@ -295,6 +295,7 @@ export class CatalogPage extends React.Component<Props> {
         this.state.allProgramsRetrieved
       )
     })
+    this.toggleMobileFilterWindowExpanded(false)
   }
 
   /**
@@ -557,7 +558,14 @@ export class CatalogPage extends React.Component<Props> {
                   )
                 }
               />
-              <h2>Catalog</h2>
+              <h2>
+                Catalog
+                <small>
+                  {this.state.selectedDepartment === ALL_DEPARTMENTS
+                    ? ""
+                    : this.state.selectedDepartment}
+                </small>
+              </h2>
             </div>
           </div>
           <div className="container">