Catalog Page: Mobile view changes

mitodl · Oct 19, 2023 · f973208 · f973208
1 parent 24a91a2
commit f973208
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 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/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">