UHF-9132: Merge branch 'UHF-9132' of https://github.com/City-of-Helsi…

…nki/drupal-hdbt into UHF-9132
City-of-Helsinki · Nov 23, 2023 · 18ebd19 · 18ebd19
2 parents 4a23e94 + 2ae1891
commit 18ebd19
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 40 deletions.
diff --git a/dist/css/styles.min.css b/dist/css/styles.min.css
diff --git a/src/scss/06_components/layout/_component.scss b/src/scss/06_components/layout/_component.scss
@@ -89,6 +89,16 @@
     max-width: $content-width-max;
   }
 
+  .component--full-width {
+    padding-bottom: $component-side-padding-mobile;
+    padding-top: $component-side-padding-mobile;
+
+    @include breakpoint($component-side-padding-breakpoint) {
+      padding-bottom: $component-side-padding-desktop;
+      padding-top: $component-side-padding-desktop;
+    }
+  }
+
   // All other components except the ones on this selectors :not-list need
   // to have padding on smaller screens but have it removed on larger screens.
   > .component:not(
@@ -98,7 +108,7 @@
     .component--service-list-search,
     .component--unit-search,
     .component--react-search,
-    .component--project-list,
+    .component--project-list
   ) {
     @include component-side-padding;
 

diff --git a/src/scss/06_components/paragraphs/_map.scss b/src/scss/06_components/paragraphs/_map.scss
@@ -8,29 +8,8 @@
   background-color: $color-silver-light;
 }
 
-.unit .component--map {
-  margin-top: $spacing-double;
-
-  @include breakpoint($breakpoint-m) {
-    margin-top: $spacing-triple;
-  }
-}
-
-.component--map .component__container {
-  padding: $spacing-triple 0;
-}
-
-.unit .component--map .component__container,
-.has-sidebar .component--map .component__container {
-  padding-top: $spacing-and-half;
-
-  @include breakpoint($breakpoint-m) {
-    padding-top: $spacing-double;
-  }
-}
-
 .map {
-  margin: $spacing 0;
+  margin: $spacing 0 0;
   position: relative;
 
   .responsive-map-container {
@@ -54,12 +33,8 @@
 
   .map__external-link {
     @include font('button');
-    align-items: center;
-    bottom: -40px;
     display: inline-flex;
-    left: 0;
-    position: absolute;
-    text-decoration: underline;
+    margin-top: $spacing;
   }
 }
 

diff --git a/src/scss/06_components/paragraphs/_react-search.scss b/src/scss/06_components/paragraphs/_react-search.scss
@@ -1,5 +1,15 @@
 .component--react-search {
   background-color: $color-silver-light;
+
+  .component__container {
+    padding-bottom: $spacing-double;
+    padding-top: $spacing-double;
+
+    @include breakpoint($breakpoint-m) {
+      padding-bottom: $spacing-quadruple;
+      padding-top: $spacing-quadruple;
+    }
+  }
 }
 
 // If the event search search is just before footer it needs to function the same way as unit search.
@@ -8,16 +18,6 @@
   padding-bottom: 115px; // Leave enough room between the last card and footer.
 }
 
-.component--react-search .component__container {
-  padding-bottom: $spacing-double;
-  padding-top: $spacing-double;
-
-  @include breakpoint($breakpoint-m) {
-    padding-bottom: $spacing-quadruple;
-    padding-top: $spacing-quadruple;
-  }
-}
-
 .react-search__form-container {
   border-bottom: 1px solid $color-black-20;
   margin-bottom: $spacing-double;

diff --git a/templates/component/map.twig b/templates/component/map.twig
@@ -1,6 +1,6 @@
 {% embed "@hdbt/misc/component.twig" with
   {
-    component_classes: [ 'component--map' ],
+    component_classes: [ 'component--map', 'component--full-width' ],
     component_title: title,
     component_description: description,
     component_content_class: 'map',