diff --git a/frontend/public/scss/catalog.scss b/frontend/public/scss/catalog.scss index 65adf6335a..27023c3038 100644 --- 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 index aea0546203..0aaad84e11 100644 --- 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 { this.state.allProgramsRetrieved ) }) + this.toggleMobileFilterWindowExpanded(false) } /** @@ -557,7 +558,14 @@ export class CatalogPage extends React.Component { ) } /> -

Catalog

+

+ Catalog + + {this.state.selectedDepartment === ALL_DEPARTMENTS + ? "" + : this.state.selectedDepartment} + +