Merge pull request #734 from City-of-Helsinki/UHF-9132

UHF-9132: Add max-width limitation to all content types without sidebar except landing page

public/themes/custom/hdbt_subtheme/src/scss/06_components/pages/_project.scss

@@ -1,11 +1,4 @@
-.project__image-container {
-  img {
-    height: auto;
-    width: 100%;
-  }
-}
-
-.page-type--project.no-sidebar {
+.page-type--project {
   .project__image-container,
   .content-tags,
   .project__metadata-wrapper {
@@ -14,11 +7,22 @@
     margin-left: auto;
     margin-right: auto;
   }
-}
 
+  .project__image-container picture {
+    display: block;
+    max-width: $content-width-max;
 
-.node--type-project {
+    img {
+      display: block;
+      height: auto;
+      max-width: 100%;
+      overflow: hidden;
+      box-shadow: inset 0 0 0 1px #e6e6e6;
+    }
+  }
+}
 
+.node--type-project {
   .content-tags {
     margin-top: $spacing-double;
   }

public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_district-listing.scss

@@ -8,16 +8,6 @@
   padding-bottom: 55px; // Leave enough room between the last card and footer.
 }
 
-.component--district-listing .component__container {
-  padding-bottom: $spacing-double;
-  padding-top: $spacing-double;
-
-  @include breakpoint($breakpoint-m) {
-    padding-bottom: $spacing-quadruple;
-    padding-top: $spacing-quadruple;
-  }
-}
-
 .district-listing .views-infinite-scroll-content-wrapper {
   margin-top: $spacing;
 

public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_list-of-plans.scss

@@ -1,31 +1,14 @@
 .component--list-of-plans {
+  @include component-side-padding;
   background-color: $color-silver-light;
 }
 
-// Since the component is not "full width" next to a sidebar, we should uniform padding around
-.has-sidebar .components--upper .component--list-of-plans .component__container {
-  padding-bottom: $spacing-double;
-  padding-left: $spacing-double;
-  padding-right: $spacing-double;
-  padding-top: $spacing-double;
-}
-
 // If the unit-search is just before footer.
 .layout-main-wrapper > *:last-child .component--list-of-plans:last-child {
   margin-bottom: -115px; // Enough to get the block under the footer.
   padding-bottom: 55px; // Leave enough room between the last card and footer.
 }
 
-.component--list-of-plans .component__container {
-  padding-bottom: $spacing-double;
-  padding-top: $spacing-double;
-
-  @include breakpoint($breakpoint-m) {
-    padding-bottom: $spacing-quadruple;
-    padding-top: $spacing-quadruple;
-  }
-}
-
 .list-of-plans__count-container {
   @include font('lead');
 

public/themes/custom/hdbt_subtheme/src/scss/06_components/paragraphs/_project-list.scss

@@ -1,18 +1,6 @@
 .component--project-list {
-  background-color: $color-black-5;
-
-  .component__container {
-    padding-bottom: $spacing-quadruple;
-    padding-top: $spacing-quadruple;
-
-    // Since the component is not "full width" next to a sidebar, we should uniform padding around
-    .has-sidebar .components--upper & {
-      padding-bottom: $spacing-double;
-      padding-left: $spacing-double;
-      padding-right: $spacing-double;
-      padding-top: $spacing-double;
-    }
-  }
+  @include component-side-padding;
+  background-color: $color-silver-light;
 }
 
 .project-list_count {

public/themes/custom/hdbt_subtheme/templates/paragraph/paragraph--district-listing.html.twig

@@ -1,7 +1,10 @@
 {% block paragraph %}
   {% embed "@hdbt/misc/component.twig" with
     {
-      component_classes: [ 'component--district-listing' ],
+      component_classes: [
+        'component--full-width',
+        'component--district-listing'
+      ],
       component_title: content.field_district_list_title,
       component_description: content.field_district_list_description,
       component_content_class: 'district-listing',

public/themes/custom/hdbt_subtheme/templates/paragraph/paragraph--list-of-plans.html.twig

@@ -1,7 +1,10 @@
 {% block paragraph %}
 	{% embed "@hdbt/misc/component.twig" with
     {
-      component_classes: [ 'component--list-of-plans' ],
+      component_classes: [
+        'component--full-width',
+        'component--list-of-plans'
+      ],
       component_title: title,
       component_description: description,
       component_content_class: 'list-of-plans',

public/themes/custom/hdbt_subtheme/templates/paragraph/paragraph--project-listing.html.twig

@@ -1,7 +1,10 @@
 {% block paragraph %}
   {% embed "@hdbt/misc/component.twig" with
     {
-      component_classes: [ 'component--project-list' ],
+      component_classes: [
+        'component--full-width',
+        'component--project-list'
+      ],
       component_title: content.field_project_list_title,
       component_description: content.field_project_list_description,
       component_content_class: 'project-list',