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

Issue #3444740 by ahsannazir, Utkarsh_33, Gauravvvv, Kanchan Bhogade, smustgrave, bnjmnm, nod_: Layout shift on displays in views page

merge-requests/8782/head
nod_ 2024-07-15 22:20:06 +02:00
parent 14669ce1b3
commit e700aa81ce
No known key found for this signature in database
GPG Key ID: 76624892606FA197
5 changed files with 62 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
core/themes/claro/claro.theme
View File

@ -59,6 +59,18 @@ function claro_page_attachments_alter(array &$attachments) {
],
'dropbutton_noscript',
];
$attachments['#attached']['html_head'][] = [
[
'#tag' => 'link',
'#noscript' => TRUE,
'#attributes' => [
'rel' => 'stylesheet',
'href' => $theme_path . '/css/components/views-ui-noscript.css?' . $query_string,
],
],
'views_ui_noscript',
];
}
/**

11
core/themes/claro/css/base/elements.css
View File

@ -253,3 +253,14 @@ img {
outline: var(--focus-outline);
box-shadow: var(--focus-box-shadow);
}
/**
* These elements should not be displayed until they are processed
* by JavaScript, and views-ui-noscript.css exists so browsers
* without JavaScript will still display them
*/
.views-tabs,
.views-display-top > input.button {
display: none;
}

10
core/themes/claro/css/base/elements.pcss.css
View File

@ -209,3 +209,13 @@ img {
outline: var(--focus-outline);
box-shadow: var(--focus-box-shadow);
}
/**
* These elements should not be displayed until they are processed
* by JavaScript, and views-ui-noscript.css exists so browsers
* without JavaScript will still display them
*/
.views-tabs,
.views-display-top > input.button {
display: none;
}

16
core/themes/claro/css/components/views-ui-noscript.css Normal file
View File

@ -0,0 +1,16 @@
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/3084859
* @preserve
*/
/**
* @file
* Views UI Tabs styles for when JavaScript is not loaded.
*/
#views-display-menu-tabs {
display: flex;
}
div.views-display-top input.button {
display: inline-block;
}

13
core/themes/claro/css/components/views-ui-noscript.pcss.css Normal file
View File

@ -0,0 +1,13 @@
/**
* @file
* Views UI Tabs styles for when JavaScript is not loaded.
*/
#views-display-menu-tabs {
display: flex;
}
div.views-display-top {
input.button {
display: inline-block;
}
}