From 57a0cd753d23aaec22732f8b9d1031bb33c19d8b Mon Sep 17 00:00:00 2001 From: nod_ Date: Tue, 21 May 2024 16:14:24 +0200 Subject: [PATCH] Issue #3425104 by finnsky, catch, smustgrave: Umami views should use responsive grid (cherry picked from commit 587350c208b66027011f3fdaea8ebaf13714a7de) --- .../install/views.view.featured_articles.yml | 12 +- .../config/install/views.view.frontpage.yml | 11 +- .../install/views.view.recipe_collections.yml | 9 +- .../config/install/views.view.recipes.yml | 10 +- .../install/views.view.related_recipes.yml | 10 +- .../install/views.view.taxonomy_term.yml | 11 +- .../AssetAggregationAcrossPagesTest.php | 4 +- ...nTelemetryAuthenticatedPerformanceTest.php | 2 +- .../OpenTelemetryFrontPagePerformanceTest.php | 2 +- .../recipe-collections/recipe-collections.css | 34 +---- .../css/components/content/full/node-full.css | 2 +- .../css/components/views/promoted-items.css | 122 +++--------------- .../themes/umami/css/layout/grid-2.css | 30 ----- .../themes/umami/css/layout/grid-3.css | 37 ------ .../themes/umami/css/layout/grid-4.css | 37 ------ .../themes/umami/css/layout/layout-2-col.css | 24 +--- .../themes/umami/css/layout/layout.css | 10 +- .../themes/umami/umami.libraries.yml | 3 - 18 files changed, 79 insertions(+), 291 deletions(-) delete mode 100644 core/profiles/demo_umami/themes/umami/css/layout/grid-2.css delete mode 100644 core/profiles/demo_umami/themes/umami/css/layout/grid-3.css delete mode 100644 core/profiles/demo_umami/themes/umami/css/layout/grid-4.css diff --git a/core/profiles/demo_umami/config/install/views.view.featured_articles.yml b/core/profiles/demo_umami/config/install/views.view.featured_articles.yml index 41ba7217277..1be93309aa9 100644 --- a/core/profiles/demo_umami/config/install/views.view.featured_articles.yml +++ b/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: { } diff --git a/core/profiles/demo_umami/config/install/views.view.frontpage.yml b/core/profiles/demo_umami/config/install/views.view.frontpage.yml index 841acc558d2..b8dc220f4c8 100644 --- a/core/profiles/demo_umami/config/install/views.view.frontpage.yml +++ b/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 diff --git a/core/profiles/demo_umami/config/install/views.view.recipe_collections.yml b/core/profiles/demo_umami/config/install/views.view.recipe_collections.yml index b21e54418eb..3e70e02d391 100644 --- a/core/profiles/demo_umami/config/install/views.view.recipe_collections.yml +++ b/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: diff --git a/core/profiles/demo_umami/config/install/views.view.recipes.yml b/core/profiles/demo_umami/config/install/views.view.recipes.yml index 14cfc30ff1f..3a7aae659b5 100644 --- a/core/profiles/demo_umami/config/install/views.view.recipes.yml +++ b/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: { } diff --git a/core/profiles/demo_umami/config/install/views.view.related_recipes.yml b/core/profiles/demo_umami/config/install/views.view.related_recipes.yml index ff8c4efa540..3c46f66b996 100644 --- a/core/profiles/demo_umami/config/install/views.view.related_recipes.yml +++ b/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: { } diff --git a/core/profiles/demo_umami/config/install/views.view.taxonomy_term.yml b/core/profiles/demo_umami/config/install/views.view.taxonomy_term.yml index eb287f1070b..4834b785f4f 100644 --- a/core/profiles/demo_umami/config/install/views.view.taxonomy_term.yml +++ b/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: diff --git a/core/profiles/demo_umami/tests/src/FunctionalJavascript/AssetAggregationAcrossPagesTest.php b/core/profiles/demo_umami/tests/src/FunctionalJavascript/AssetAggregationAcrossPagesTest.php index 6299463fd12..daea12d674d 100644 --- a/core/profiles/demo_umami/tests/src/FunctionalJavascript/AssetAggregationAcrossPagesTest.php +++ b/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 @@ class AssetAggregationAcrossPagesTest extends PerformanceTestBase { $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(133000, $performance_data->getScriptBytes()); } diff --git a/core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryAuthenticatedPerformanceTest.php b/core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryAuthenticatedPerformanceTest.php index add20dd66a2..9153a034dd5 100644 --- a/core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryAuthenticatedPerformanceTest.php +++ b/core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryAuthenticatedPerformanceTest.php @@ -37,7 +37,7 @@ class OpenTelemetryAuthenticatedPerformanceTest extends PerformanceTestBase { $this->drupalGet(''); }, '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(133000, $performance_data->getScriptBytes()); diff --git a/core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryFrontPagePerformanceTest.php b/core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryFrontPagePerformanceTest.php index 43b3b9f4b34..a0f24a8ed49 100644 --- a/core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryFrontPagePerformanceTest.php +++ b/core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryFrontPagePerformanceTest.php @@ -67,7 +67,7 @@ class OpenTelemetryFrontPagePerformanceTest extends PerformanceTestBase { $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()); } /** diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/recipe-collections/recipe-collections.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/recipe-collections/recipe-collections.css index f26f2d098f6..141bbec0d94 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/blocks/recipe-collections/recipe-collections.css +++ b/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; diff --git a/core/profiles/demo_umami/themes/umami/css/components/content/full/node-full.css b/core/profiles/demo_umami/themes/umami/css/components/content/full/node-full.css index 5983283a390..e7e5bab3149 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/content/full/node-full.css +++ b/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; diff --git a/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css b/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css index 45780cec054..3b9d9cd888c 100644 --- a/core/profiles/demo_umami/themes/umami/css/components/views/promoted-items.css +++ b/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; - } +.view-promoted-items--double .view-content { + display: grid; + gap: 14px; } - -/* 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; - } -} - -/* 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; + grid-template-columns: repeat(2, 1fr); } } - -/* Small */ -@media screen and (min-width: 30rem) { - /* 480px */ - .view-promoted-items--double .views-row { - display: flex; - width: calc(50% - 28px); - margin: 0 14px; - } -} - -/* 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%; } diff --git a/core/profiles/demo_umami/themes/umami/css/layout/grid-2.css b/core/profiles/demo_umami/themes/umami/css/layout/grid-2.css deleted file mode 100644 index 2f3051ad3c8..00000000000 --- a/core/profiles/demo_umami/themes/umami/css/layout/grid-2.css +++ /dev/null @@ -1,30 +0,0 @@ -/** - * @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; - } -} diff --git a/core/profiles/demo_umami/themes/umami/css/layout/grid-3.css b/core/profiles/demo_umami/themes/umami/css/layout/grid-3.css deleted file mode 100644 index 3dcd3fe04f8..00000000000 --- a/core/profiles/demo_umami/themes/umami/css/layout/grid-3.css +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @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; - } -} diff --git a/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css b/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css deleted file mode 100644 index 408ef2163e9..00000000000 --- a/core/profiles/demo_umami/themes/umami/css/layout/grid-4.css +++ /dev/null @@ -1,37 +0,0 @@ -/** - * @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; - } -} diff --git a/core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css b/core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css index c78ddb28ce3..8cb233f0191 100644 --- a/core/profiles/demo_umami/themes/umami/css/layout/layout-2-col.css +++ b/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%; } } diff --git a/core/profiles/demo_umami/themes/umami/css/layout/layout.css b/core/profiles/demo_umami/themes/umami/css/layout/layout.css index eb95145f335..671f54fe3ff 100644 --- a/core/profiles/demo_umami/themes/umami/css/layout/layout.css +++ b/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%; +} diff --git a/core/profiles/demo_umami/themes/umami/umami.libraries.yml b/core/profiles/demo_umami/themes/umami/umami.libraries.yml index ba1c10cf653..fe25a2377c2 100644 --- a/core/profiles/demo_umami/themes/umami/umami.libraries.yml +++ b/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: