Issue #3425104 by finnsky, catch, smustgrave: Umami views should use responsive grid

(cherry picked from commit 587350c2)

core/profiles/demo_umami/config/install/views.view.featured_articles.yml

@@ -76,7 +76,7 @@ display:
         options:
           offset: 0
           pagination_heading_level: h4
-          items_per_page: 9
+          items_per_page: 12
           total_pages: null
           id: 0
           tags:
@@ -213,7 +213,13 @@ display:
         groups:
           1: AND
       style:
-        type: default
+        type: grid_responsive
+        options:
+          uses_fields: false
+          columns: 3
+          cell_min_width: 240
+          grid_gutter: 14
+          alignment: horizontal
       row:
         type: 'entity:node'
         options:
@@ -228,7 +234,7 @@ display:
           replica: false
           query_tags: {  }
       relationships: {  }
-      css_class: grid--3
+      css_class: ''
       header: {  }
       footer: {  }
       display_extenders: {  }

core/profiles/demo_umami/config/install/views.view.frontpage.yml

@@ -270,12 +270,13 @@ display:
         groups:
           1: AND
       style:
-        type: default
+        type: grid_responsive
         options:
-          grouping: {  }
-          row_class: ''
-          default_row_class: true
           uses_fields: false
+          columns: 2
+          cell_min_width: 240
+          grid_gutter: 14
+          alignment: horizontal
       row:
         type: 'entity:node'
         options:
@@ -359,7 +360,7 @@ display:
       defaults:
         css_class: false
         header: false
-      css_class: grid--2
+      css_class: ''
       header:
         area:
           id: area

core/profiles/demo_umami/config/install/views.view.recipe_collections.yml

@@ -169,16 +169,13 @@ display:
         groups:
           1: AND
       style:
-        type: grid
+        type: grid_responsive
         options:
           grouping: {  }
           columns: 4
-          automatic_width: false
+          cell_min_width: 100
+          grid_gutter: 14
           alignment: vertical
-          row_class_custom: ''
-          row_class_default: true
-          col_class_custom: ''
-          col_class_default: true
       row:
         type: fields
       query:

core/profiles/demo_umami/config/install/views.view.recipes.yml

@@ -213,7 +213,13 @@ display:
         groups:
           1: AND
       style:
-        type: default
+        type: grid_responsive
+        options:
+          uses_fields: false
+          columns: 4
+          cell_min_width: 240
+          grid_gutter: 14
+          alignment: horizontal
       row:
         type: 'entity:node'
         options:
@@ -228,7 +234,7 @@ display:
           replica: false
           query_tags: {  }
       relationships: {  }
-      css_class: grid--4
+      css_class: ''
       header: {  }
       footer: {  }
       display_extenders: {  }

core/profiles/demo_umami/config/install/views.view.related_recipes.yml

@@ -253,11 +253,13 @@ display:
             default_group_multiple: {  }
             group_items: {  }
       style:
-        type: default
+        type: grid_responsive
         options:
-          row_class: ''
-          default_row_class: true
           uses_fields: false
+          columns: 4
+          cell_min_width: 240
+          grid_gutter: 14
+          alignment: horizontal
       row:
         type: 'entity:node'
         options:
@@ -272,7 +274,7 @@ display:
           replica: false
           query_tags: {  }
       relationships: {  }
-      css_class: grid--4
+      css_class: ''
       header: {  }
       footer: {  }
       display_extenders: {  }

core/profiles/demo_umami/config/install/views.view.taxonomy_term.yml

@@ -212,12 +212,13 @@ display:
         groups:
           1: AND
       style:
-        type: default
+        type: grid_responsive
         options:
-          grouping: {  }
-          row_class: ''
-          default_row_class: true
           uses_fields: false
+          columns: 4
+          cell_min_width: 240
+          grid_gutter: 14
+          alignment: horizontal
       row:
         type: 'entity:node'
         options:
@@ -232,7 +233,7 @@ display:
           replica: false
           query_tags: {  }
       relationships: {  }
-      css_class: grid--4
+      css_class: ''
       link_display: page_1
       link_url: ''
       header:

core/profiles/demo_umami/tests/src/FunctionalJavascript/AssetAggregationAcrossPagesTest.php

@@ -25,7 +25,7 @@ class AssetAggregationAcrossPagesTest extends PerformanceTestBase {
   public function testFrontAndRecipesPages() {
     $performance_data = $this->doRequests();
     $this->assertSame(4, $performance_data->getStylesheetCount());
-    $this->assertLessThan(82500, $performance_data->getStylesheetBytes());
+    $this->assertLessThan(80000, $performance_data->getStylesheetBytes());
     $this->assertSame(1, $performance_data->getScriptCount());
     $this->assertLessThan(7500, $performance_data->getScriptBytes());
   }
@@ -39,7 +39,7 @@ public function testFrontAndRecipesPagesAuthenticated() {
     $this->rebuildAll();
     $performance_data = $this->doRequests();
     $this->assertSame(4, $performance_data->getStylesheetCount());
-    $this->assertLessThan(89500, $performance_data->getStylesheetBytes());
+    $this->assertLessThan(87000, $performance_data->getStylesheetBytes());
     $this->assertSame(1, $performance_data->getScriptCount());
     $this->assertLessThan(125500, $performance_data->getScriptBytes());
   }

core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryAuthenticatedPerformanceTest.php

@@ -37,7 +37,7 @@ public function testFrontPageAuthenticatedWarmCache(): void {
       $this->drupalGet('<front>');
     }, 'authenticatedFrontPage');
     $this->assertSame(2, $performance_data->getStylesheetCount());
-    $this->assertLessThan(45500, $performance_data->getStylesheetBytes());
+    $this->assertLessThan(44000, $performance_data->getStylesheetBytes());
     $this->assertSame(1, $performance_data->getScriptCount());
     $this->assertLessThan(125000, $performance_data->getScriptBytes());
 

core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryFrontPagePerformanceTest.php

@@ -67,7 +67,7 @@ public function testFrontPageHotCache() {
     $this->assertSame(1, $performance_data->getScriptCount());
     $this->assertLessThan(7500, $performance_data->getScriptBytes());
     $this->assertSame(2, $performance_data->getStylesheetCount());
-    $this->assertLessThan(42000, $performance_data->getStylesheetBytes());
+    $this->assertLessThan(40400, $performance_data->getStylesheetBytes());
   }
 
   /**

core/profiles/demo_umami/themes/umami/css/components/blocks/recipe-collections/recipe-collections.css

@@ -7,39 +7,15 @@
   margin-bottom: 1.5rem;
   text-align: center;
 }
-.block-views-blockrecipe-collections-block .views-view-grid {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-}
-.block-views-blockrecipe-collections-block .views-col {
-  width: 100%;
-  padding: 0 14px;
-  text-align: center;
-}
-
-@media screen and (min-width: 48em) {
-  .block-views-blockrecipe-collections-block .views-col {
-    width: 25%;
-    max-width: 13rem;
-    text-align: left; /* LTR */
-  }
-  [dir="rtl"] .block-views-blockrecipe-collections-block .views-col {
-    text-align: right;
-  }
-}
-.block-views-blockrecipe-collections-block .views-row {
-  margin-bottom: 0.5rem;
-  font-size: 0.9rem;
-}
-.block-views-blockrecipe-collections-block .views-row a {
+.block-views-blockrecipe-collections-block .views-field-name a {
   text-decoration: none;
   color: #fff;
+  font-size: 0.9rem;
   font-weight: bold;
 }
-.block-views-blockrecipe-collections-block .views-row a:active,
-.block-views-blockrecipe-collections-block .views-row a:focus,
-.block-views-blockrecipe-collections-block .views-row a:hover {
+.block-views-blockrecipe-collections-block .views-field-name a:active,
+.block-views-blockrecipe-collections-block .views-field-name a:focus,
+.block-views-blockrecipe-collections-block .views-field-name a:hover {
   text-decoration: underline;
   outline-color: #fff;
   background: transparent;

core/profiles/demo_umami/themes/umami/css/components/content/full/node-full.css

@@ -3,7 +3,7 @@
  * This file is used to style the 'full' view mode.
  */
 .node--view-mode-full {
-  margin: 0 auto 2.37rem;
+  margin: 0 auto;
   padding: 1.266rem;
   border-top: 1px solid #fcece7;
   border-right: none;

core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css

@@ -4,130 +4,40 @@
  */
 
 .view-promoted-items--single {
-  padding: 1rem 0 2rem;
+  display: grid;
+  gap: 14px;
+  padding-block: 1rem 2rem;
 }
 /* Small */
 @media screen and (min-width: 30rem) {
   /* 480px */
   .view-promoted-items--single {
-    padding-top: 2rem;
-    padding-bottom: 3rem;
+    padding-block: 2rem 3rem;
   }
 }
 /* Large */
 @media screen and (min-width: 60rem) {
   /* 960px */
   .view-promoted-items--single {
-    display: flex;
+    grid-template-columns: repeat(2, 1fr);
   }
 }
-/* 77em == the max width of .container + 1em either side */
-@media screen and (min-width: 77em) {
-  .view-promoted-items--single {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
-/* Large */
-@media screen and (min-width: 60rem) {
-  /* 960px */
-  .view-promoted-items--single > .view-content {
-    display: flex;
-    flex: 0 0 50%;
-    margin-right: 14px; /* LTR */
-  }
-  [dir="rtl"] .view-promoted-items--single > .view-content {
-    margin-right: 0;
-    margin-left: 14px;
-  }
-}
-
-.view-promoted-items--single > .view-content .views-row {
-  margin-bottom: 14px;
-}
-/* Small */
-@media screen and (min-width: 30rem) {
-  /* 480px */
-  .view-promoted-items--single > .view-content .views-row {
-    display: flex;
-    margin-bottom: 28px;
-  }
-}
-/* Large */
-@media screen and (min-width: 60rem) {
-  /* 960px */
-  .view-promoted-items--single > .view-content .views-row {
-    margin-bottom: 0;
-  }
-}
-
-/* Large */
-@media screen and (min-width: 60rem) {
-  /* 960px */
-  .view-promoted-items--single > .attachment-after {
-    display: flex;
-    margin-left: 14px; /* LTR */
-  }
-  [dir="rtl"] .view-promoted-items--single > .attachment-after {
-    margin-right: 14px;
-    margin-left: 0;
-  }
+.view-promoted-items--double .view-content {
+  display: grid;
+  gap: 14px;
 }
-
-/* Large */
-@media screen and (min-width: 60rem) {
-  /* 960px */
-  .view-promoted-items--single .attachment-after .views-element-container {
-    display: flex;
-  }
-}
-
-/* Large */
-@media screen and (min-width: 60rem) {
-  /* 960px */
-  .view-promoted-items--single .attachment-after .view-promoted-items--double {
-    display: flex;
-  }
-}
-
-/* Small */
-@media screen and (min-width: 30rem) {
-  /* 480px */
-  .view-promoted-items--double {
-    overflow-x: hidden;
-  }
-}
-
 /* Small */
 @media screen and (min-width: 30rem) {
   /* 480px */
   .view-promoted-items--double .view-content {
-    display: flex;
-    margin: 0 -14px;
-  }
-}
-
-/* Small */
-@media screen and (min-width: 30rem) {
-  /* 480px */
-  .view-promoted-items--double .views-row {
-    display: flex;
-    width: calc(50% - 28px);
-    margin: 0 14px;
+    grid-template-columns: repeat(2, 1fr);
   }
 }
-
-/* For the front page only, apply .container gutters */
-.path-frontpage .block-views-blockpromoted-items-block-1 {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 4%;
-}
-/* Extra large + side margins */
-@media screen and (min-width: 80rem) {
-  /* 1200px (large) + 80px (side margins) = 1280px */
-  .path-frontpage .block-views-blockpromoted-items-block-1 {
-    padding: 0;
-  }
+.view-promoted-items--single .attachment-after,
+.view-promoted-items--single .views-element-container,
+.view-promoted-items--single .views-element-container,
+.view-promoted-items--double,
+.view-promoted-items--double .view-content,
+.view-promoted-items--double .umami-card {
+  block-size: 100%;
 }

core/profiles/demo_umami/themes/umami/css/layout/grid-2.css

-/**
- * @file
- * This file is used to create a 2 column grid layout.
- */
-.grid--2 .view-content {
-  margin-right: -14px;
-  margin-left: -14px;
-}
-.grid--2 .views-row {
-  margin-bottom: 28px;
-  padding: 0 14px;
-}
-
-@media screen and (min-width: 30em) {
-  .grid--2 {
-    overflow-x: hidden;
-  }
-  .grid--2 .view-content {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .grid--2 .views-row {
-    display: flex;
-    flex-basis: calc(50% - 28px);
-    flex-grow: 0;
-    flex-shrink: 0;
-    margin: 0 14px 28px;
-    padding: 0;
-  }
-}

core/profiles/demo_umami/themes/umami/css/layout/grid-3.css

-/**
- * @file
- * This file is used to create a 3 column grid layout.
- */
-
-.grid--3 .views-row {
-  margin-bottom: 28px;
-}
-/* Small */
-@media screen and (min-width: 30em) {
-  /* 480px */
-  .grid--3 {
-    overflow-x: hidden;
-  }
-  .grid--3 .view-content {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -14px;
-  }
-  .grid--3 .views-row {
-    display: flex;
-    flex-basis: calc(50% - 28px);
-    flex-grow: 0;
-    flex-shrink: 0;
-    margin: 0 14px 28px;
-    padding: 0;
-  }
-}
-/* Large */
-@media screen and (min-width: 60em) {
-  /* 960px */
-  .grid--3 .views-row {
-    flex-basis: calc(33.3% - 28px);
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}

core/profiles/demo_umami/themes/umami/css/layout/grid-4.css

-/**
- * @file
- * This file is used to create a 4 column grid layout.
- */
-
-.grid--4 .views-row {
-  margin-bottom: 28px;
-}
-/* Small */
-@media screen and (min-width: 30em) {
-  /* 480px */
-  .grid--4 {
-    overflow-x: hidden;
-  }
-  .grid--4 .view-content {
-    display: flex;
-    flex-wrap: wrap;
-    margin: 0 -14px;
-  }
-  .grid--4 .views-row {
-    display: flex;
-    flex-basis: calc(50% - 28px);
-    flex-grow: 0;
-    flex-shrink: 0;
-    margin: 0 14px 28px;
-    padding: 0;
-  }
-}
-/* Large */
-@media screen and (min-width: 60em) {
-  /* 960px */
-  .grid--4 .views-row {
-    flex-basis: calc(25% - 28px);
-    flex-grow: 0;
-    flex-shrink: 0;
-  }
-}

core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css

@@ -2,26 +2,16 @@
  * @file
  * This file is used to create the layout when the theme has 2 columns.
  */
+
+.two-columns .main {
+  display: grid;
+  gap: 14px;
+}
 /* Large */
 @media screen and (min-width: 60rem) {
   /* 960px */
   .two-columns .main {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .two-columns .main .layout-content,
-  .two-columns .main .layout-sidebar {
-    flex: 0 1 100%;
-  }
-  .two-columns .main .layout-content {
-    flex: 0 1 72%;
-    margin-right: 3%; /* LTR */
-  }
-  [dir="rtl"] .two-columns .main .layout-content {
-    margin-right: 0;
-    margin-left: 3%;
-  }
-  .two-columns .main .layout-sidebar {
-    flex: 0 1 25%;
+    grid-template-columns: 72% 1fr;
+    gap: 3%;
   }
 }

core/profiles/demo_umami/themes/umami/css/layout/layout.css

@@ -13,12 +13,18 @@
 
 /* Add responsive side gutters to the outer layout container 'main' at smaller sizes */
 .main {
-  padding: 0 4%;
+  padding-inline: 4%;
+  padding-block: 0 2.37rem;
 }
 /* Extra large + side margins */
 @media screen and (min-width: 80rem) {
   /* 1200px (large) + 80px (side margins) = 1280px */
   .main {
-    padding: 0;
+    padding-inline: 0;
   }
 }
+
+.views-view-responsive-grid__item .views-view-responsive-grid__item-inner,
+.views-view-responsive-grid__item .views-view-responsive-grid__item-inner .umami-card {
+  height: 100%;
+}

core/profiles/demo_umami/themes/umami/umami.libraries.yml

@@ -42,9 +42,6 @@ global:
       css/components/toolbar/toolbar.css: {}
       css/components/layout_builder/layout-builder.css: {}
     layout:
-      css/layout/grid-2.css: {}
-      css/layout/grid-3.css: {}
-      css/layout/grid-4.css: {}
       css/layout/layout.css: {}
 
 messages: