style: hearingList mobile style fixes KER-346

City-of-Helsinki · Oct 31, 2024 · a3f9817 · a3f9817
1 parent b86ca7d
commit a3f9817
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 42 deletions.
diff --git a/assets/sass/kerrokantasi/_hearing-list.scss b/assets/sass/kerrokantasi/_hearing-list.scss
@@ -57,7 +57,7 @@
   }
 
   &-closed {
-    margin-top: var(--spacing-3-xs);
+    margin-top: var(--spacing-2-xs);
     text-align: right;
   }
 
@@ -89,6 +89,16 @@
 
 .page-section--all-hearings-header {
   background-color: $gray-200;
+
+  .all-hearings-header-container {
+    margin: 0 auto;
+    max-width: 60rem;
+    padding: 0 var(--spacing-s);
+
+    @media (min-width: $screen-sm-min) {
+      padding: 0 var(--spacing-2-xs);
+    }
+  }
 }
 
 .hearing-comment__images {
@@ -170,9 +180,13 @@
     flex: 0 1 auto;
     font-size: $font-size-large;
     font-weight: 400;
-    margin: 0 $grid-gutter-width * 1.5 0 0;
+    margin: 0 0 var(--spacing-s) 0;
     color: var(--color-black-60);
 
+    @media (min-width: $screen-xs-min) {
+      margin: 0 $grid-gutter-width * 1.5 0 0;
+    }
+
     span {
       margin-left: 0.15em;
     }

diff --git a/cities/helsinki/assets/sass/hel/_hearing-list.scss b/cities/helsinki/assets/sass/hel/_hearing-list.scss
@@ -15,6 +15,16 @@
 
 .page-section--all-hearings-header {
   background-color: $light-gray;
+
+  .all-hearings-header-container {
+    margin: 0 auto;
+    max-width: 60rem;
+    padding: 0 var(--spacing-s);
+
+    @media (min-width: $screen-sm-min) {
+      padding: 0 var(--spacing-2-xs);
+    }
+  }
 }
 
 .page-section--hearings-search {
@@ -23,7 +33,11 @@
   background-color: $light-gray;
   margin: 0 auto;
   max-width: 60rem;
-  padding: 0 var(--spacing-2-xs);
+  padding: 0 var(--spacing-s);
+
+  @media (min-width: $screen-sm-min) {
+    padding: 0 var(--spacing-2-xs);
+  }
 }
 
 .page-section--hearings-tabs {
@@ -36,8 +50,12 @@
     justify-content: flex-end;
     max-width: 60rem;
     margin: 0 auto;
-    padding: 0 var(--spacing-2-xs);
+    padding: 0 var(--spacing-s);
     overflow: unset;
+
+    @media (min-width: $screen-sm-min) {
+      padding: 0 var(--spacing-2-xs);
+    }
   }
 
   ul {
@@ -65,6 +83,10 @@
   &-container {
     max-width: 60rem;
     margin: 0 auto;
-    padding: var(--spacing-2-xl) var(--spacing-2-xs) 0;
+    padding: var(--spacing-2-xl) var(--spacing-s) 0;
+
+    @media (min-width: $screen-sm-min) {
+      padding: var(--spacing-2-xl) var(--spacing-2-xs) 0;
+    }
   }
 }
diff --git a/src/views/Hearings/__tests__/__snapshots__/Hearings.test.jsx.snap b/src/views/Hearings/__tests__/__snapshots__/Hearings.test.jsx.snap
@@ -9,21 +9,13 @@ exports[`<Hearings /> should render correctly 1`] = `
       class="page-section page-section--all-hearings-header"
     >
       <div
-        class="container"
+        class="all-hearings-header-container"
       >
-        <div
-          class="row"
+        <h1
+          class="page-title"
         >
-          <div
-            class="col-md-10 col-md-push-1"
-          >
-            <h1
-              class="page-title"
-            >
-              allHearings
-            </h1>
-          </div>
-        </div>
+          allHearings
+        </h1>
       </div>
     </section>
     <section

diff --git a/src/views/Hearings/index.jsx b/src/views/Hearings/index.jsx
@@ -7,7 +7,6 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import Helmet from 'react-helmet';
-import { Col, Row } from 'react-bootstrap';
 import { get, find, includes } from 'lodash';
 import isEmpty from 'lodash/isEmpty';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
@@ -271,8 +270,9 @@ function Hearings({
       return {
         id: label.id,
         label: translatedLabel,
-        value: translatedLabel
-      }});
+        value: translatedLabel,
+      };
+    });
 
   const searchTitle = parseQuery(location.search).search;
 
@@ -318,27 +318,19 @@ function Hearings({
   return (
     <div className='hearings'>
       <section className='page-section page-section--all-hearings-header'>
-        <div className='container'>
-          <Row>
-            <Col md={10} mdPush={1}>
-              <Helmet
-                title={formatMessage({ id: 'allHearings' })}
-                meta={[
-                  { name: 'description', content: formatMessage({ id: 'descriptionTag' }) },
-                  { property: 'og:description', content: formatMessage({ id: 'descriptionTag' }) },
-                ]}
-              />
-              <FormattedMessage id='allHearings'>{(txt) => <h1 className='page-title'>{txt}</h1>}</FormattedMessage>
-              {isAdmin(user) && (
-                <AdminFilterSelector
-                  onSelect={handleAdminFilter}
-                  options={AdminFilters}
-                  active={getHearingListName()}
-                />
-              )}
-              {isAdmin(user) && <CreateHearingButton to={{ path: '/hearing/new' }} />}
-            </Col>
-          </Row>
+        <div className='all-hearings-header-container'>
+          <Helmet
+            title={formatMessage({ id: 'allHearings' })}
+            meta={[
+              { name: 'description', content: formatMessage({ id: 'descriptionTag' }) },
+              { property: 'og:description', content: formatMessage({ id: 'descriptionTag' }) },
+            ]}
+          />
+          <FormattedMessage id='allHearings'>{(txt) => <h1 className='page-title'>{txt}</h1>}</FormattedMessage>
+          {isAdmin(user) && (
+            <AdminFilterSelector onSelect={setAdminFilter} options={AdminFilters} active={getHearingListName()} />
+          )}
+          {isAdmin(user) && <CreateHearingButton to={{ path: '/hearing/new' }} />}
         </div>
       </section>
       {!isEmpty(labels) ? (