Drupal
/
drupal
mirror of https://git.drupalcode.org/project/drupal.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

(cherry picked from commit 587350c208)
merge-requests/8164/head
nod_ 2024-05-21 16:14:24 +02:00
parent c699c850b4
commit 57a0cd753d
No known key found for this signature in database
GPG Key ID: 76624892606FA197
18 changed files with 79 additions and 291 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
core/profiles/demo_umami/config/install/views.view.featured_articles.yml
View File

@ -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: { }

11
core/profiles/demo_umami/config/install/views.view.frontpage.yml
View File

@ -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

9
core/profiles/demo_umami/config/install/views.view.recipe_collections.yml
View File

@ -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:

10
core/profiles/demo_umami/config/install/views.view.recipes.yml
View File

@ -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: { }

10
core/profiles/demo_umami/config/install/views.view.related_recipes.yml
View File

@ -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: { }

11
core/profiles/demo_umami/config/install/views.view.taxonomy_term.yml
View File

@ -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:

4
core/profiles/demo_umami/tests/src/FunctionalJavascript/AssetAggregationAcrossPagesTest.php
View File

@ -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());
}

2
core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryAuthenticatedPerformanceTest.php
View File

@ -37,7 +37,7 @@ class OpenTelemetryAuthenticatedPerformanceTest extends PerformanceTestBase {
$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(133000, $performance_data->getScriptBytes());

2
core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryFrontPagePerformanceTest.php
View File

@ -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());
}
/**

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

@ -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;

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

@ -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;

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

@ -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%;
}

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

@ -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;
}
}

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

@ -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;
}
}

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

@ -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;
}
}

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

@ -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%;
}
}

10
core/profiles/demo_umami/themes/umami/css/layout/layout.css
View File

@ -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%;
}

3
core/profiles/demo_umami/themes/umami/umami.libraries.yml
View File

@ -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: