From 6254e18dfad735072cde572b4d977a1f600e1e79 Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauriii@1078742.no-reply.drupal.org>
Date: Tue, 7 Aug 2018 20:35:21 +0300
Subject: [PATCH] Issue #2980528 by kjay, andrewmacpherson, markconroy,
finnsky: Improve Umami Demo's header layout and responsive behaviour
---
.../block.block.umami_account_menu.yml | 4 +--
.../install/block.block.umami_branding.yml | 2 +-
.../install/block.block.umami_main_menu.yml | 2 +-
.../install/block.block.umami_search.yml | 4 +--
.../components/blocks/branding/branding.css | 3 --
.../css/components/blocks/search/search.css | 33 ++++++++-----------
.../navigation/menu-account/menu-account.css | 14 +++-----
.../navigation/menu-main/menu-main.css | 10 +-----
.../css/components/regions/header/header.css | 3 +-
.../regions/pre-header/pre-header.css | 29 ++++++++++++++++
.../umami/templates/layout/page.html.twig | 10 ++++--
.../demo_umami/themes/umami/umami.info.yml | 1 +
.../themes/umami/umami.libraries.yml | 1 +
13 files changed, 66 insertions(+), 50 deletions(-)
create mode 100644 core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css
diff --git a/core/profiles/demo_umami/config/install/block.block.umami_account_menu.yml b/core/profiles/demo_umami/config/install/block.block.umami_account_menu.yml
index a63f812c342e..75608dd8b30b 100644
--- a/core/profiles/demo_umami/config/install/block.block.umami_account_menu.yml
+++ b/core/profiles/demo_umami/config/install/block.block.umami_account_menu.yml
@@ -9,8 +9,8 @@ dependencies:
- umami
id: umami_account_menu
theme: umami
-region: header
-weight: -4
+region: pre_header
+weight: -6
provider: null
plugin: 'system_menu_block:account'
settings:
diff --git a/core/profiles/demo_umami/config/install/block.block.umami_branding.yml b/core/profiles/demo_umami/config/install/block.block.umami_branding.yml
index a6af6e484b44..bbff87e62720 100644
--- a/core/profiles/demo_umami/config/install/block.block.umami_branding.yml
+++ b/core/profiles/demo_umami/config/install/block.block.umami_branding.yml
@@ -8,7 +8,7 @@ dependencies:
id: umami_branding
theme: umami
region: header
-weight: -8
+weight: -7
provider: null
plugin: system_branding_block
settings:
diff --git a/core/profiles/demo_umami/config/install/block.block.umami_main_menu.yml b/core/profiles/demo_umami/config/install/block.block.umami_main_menu.yml
index 4788dddaa901..1feaeeea7289 100644
--- a/core/profiles/demo_umami/config/install/block.block.umami_main_menu.yml
+++ b/core/profiles/demo_umami/config/install/block.block.umami_main_menu.yml
@@ -10,7 +10,7 @@ dependencies:
id: umami_main_menu
theme: umami
region: header
-weight: -8
+weight: -6
provider: null
plugin: 'system_menu_block:main'
settings:
diff --git a/core/profiles/demo_umami/config/install/block.block.umami_search.yml b/core/profiles/demo_umami/config/install/block.block.umami_search.yml
index f86e71c71895..bf1f99b2a53a 100644
--- a/core/profiles/demo_umami/config/install/block.block.umami_search.yml
+++ b/core/profiles/demo_umami/config/install/block.block.umami_search.yml
@@ -7,8 +7,8 @@ dependencies:
- umami
id: umami_search
theme: umami
-region: header
-weight: -6
+region: pre_header
+weight: -7
provider: null
plugin: search_form_block
settings:
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/branding/branding.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/branding/branding.css
index 73377524330f..d43a031a1e0b 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/branding/branding.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/branding/branding.css
@@ -5,14 +5,11 @@
.block-system-branding-block {
flex: 0 1 40%;
- order: 2;
- text-align: center;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 220px;
- order: 3;
margin: 2.5rem 0;
text-align: left;
}
diff --git a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
index 5c268be34c8f..fe3684298847 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/blocks/search/search.css
@@ -13,10 +13,8 @@
@media screen and (min-width: 48em) {
.search-block-form {
- flex: 0 1 50%;
- order: 1;
display: block;
- border-bottom: 1px solid #e6eee0;
+ flex: 0 1 50%;
}
}
@@ -27,11 +25,8 @@
}
.search-iconwrap {
- flex: 0 1 30%;
- order: 3;
- display: flex;
- justify-content: flex-end;
- padding-right: 1rem;
+ /* Compensate for focus styling that offsets left alignment of icon */
+ margin-left: -7px;
}
@media screen and (min-width: 48em) {
@@ -42,19 +37,19 @@
/* Search icon for mobile */
.search-link {
- width: 40px;
- height: 40px;
display: flex;
- align-items: center;
justify-content: flex-end;
+ align-items: center;
+ width: 40px;
+ height: 40px;
/* Centres the icon when focused/hovered */
- padding-right: 7px;
margin-right: -7px;
+ padding-right: 7px;
}
.search-link:focus,
.search-link:hover {
- background-color: #fff;
outline: 3px solid #00836d;
+ background-color: #fff;
}
.search-link svg {
display: block;
@@ -74,19 +69,19 @@
height: auto;
margin: 0 -2px 0 0;
padding: 7px 8px 7px 32px;
+ color: #464646;
border: 1px solid #dbdbdb;
border-right: none;
border-radius: 3px;
+ background: url(../../../../images/svg/search.svg) no-repeat 0.5em center #fff;
font-size: 0.875rem;
line-height: normal;
- background: url(../../../../images/svg/search.svg) no-repeat 0.5em center #fff;
- color: #464646;
}
.form-search:focus {
- outline: none;
margin: 0 0 -2px -2px;
padding: 5px 8px 5px 32px;
+ outline: none;
}
.form-search::placeholder {
@@ -98,10 +93,10 @@
/* Search submit */
.search-block-form .form-actions {
- margin-top: 0;
- margin-bottom: 0;
position: relative;
z-index: 1;
+ margin-top: 0;
+ margin-bottom: 0;
}
.search-block-form .form-submit,
.search-form .form-submit {
@@ -114,7 +109,7 @@
.search-block-form .form-submit:hover,
.search-form .form-submit:focus,
.search-form .form-submit:hover {
+ margin: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
- margin: 0;
}
diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css
index 07e0dde9c3a5..ac4f39185258 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-account/menu-account.css
@@ -3,34 +3,28 @@
* This file is used to style the account menu.
*/
-.menu--account {
- display: none;
-}
-
@media screen and (min-width: 48em) {
.menu--account {
- flex: 0 1 50%;
- order: 2;
display: block;
- border-bottom: 1px solid #e6eee0;
+ flex: 0 1 50%;
text-align: right;
}
}
.menu-account {
display: inline-flex;
- margin: 1.6em 0;
+ margin: 0;
padding: 0;
- line-height: 1.5;
list-style-type: none;
+ line-height: 1.5;
}
.menu-account__item + .menu-account__item {
margin-left: 1em;
}
.menu-account__link,
.menu-account__link:hover {
- color: inherit;
text-decoration: none;
+ color: inherit;
background-color: inherit;
}
.menu-account__link:hover {
diff --git a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
index 72eb2db80f8b..44b715b18243 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/navigation/menu-main/menu-main.css
@@ -31,7 +31,7 @@
line-height: 1;
/* the padding, margin & transparent border means the hamburger doesn't move on focus/hover */
padding: 0 6px;
- margin-left: -9px;
+ margin-right: -9px;
border: 3px solid transparent;
border-radius: 0;
text-align: left;
@@ -90,12 +90,6 @@
}
}
-.menu-main-togglewrap {
- flex: 0 1 30%;
- order: 1;
- padding-left: 1rem;
-}
-
@media screen and (min-width: 48em) {
.menu-main-togglewrap {
display: none;
@@ -103,14 +97,12 @@
}
.menu-main__wrapper {
- order: 4;
flex: 0 1 100%;
text-align: center;
}
@media screen and (min-width: 48em) {
.menu-main__wrapper {
- order: 4;
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc(100% - 220px);
diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css b/core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
index 35f75c45c35b..cc7b7b40d64a 100644
--- a/core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
+++ b/core/profiles/demo_umami/themes/umami/css/components/regions/header/header.css
@@ -15,7 +15,8 @@
display: flex;
flex-wrap: wrap;
align-items: center;
- padding: 0.75rem 0;
+ justify-content: space-between;
+ padding: 0.75rem 1rem;
}
@media screen and (min-width: 48em) {
diff --git a/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css b/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css
new file mode 100644
index 000000000000..0e3ca3a90e54
--- /dev/null
+++ b/core/profiles/demo_umami/themes/umami/css/components/regions/pre-header/pre-header.css
@@ -0,0 +1,29 @@
+/**
+ * @file
+ * This file is used to style the pre-header.
+ *
+ * It styles the pre-header as a global component; it does not style individual
+ * pre-header items, such as search, which are styled by their own CSS files.
+ */
+
+.region-pre-header {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid #e6eee0;
+}
+
+@media screen and (min-width: 48em) {
+ .region-pre-header {
+ padding: 0 1rem;
+ }
+}
+
+/* 77em == the max width of .container + 1em either side */
+@media screen and (min-width: 77em) {
+ .region-pre-header {
+ padding: 0;
+ }
+}
diff --git a/core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig b/core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
index 0cce8e4f96fe..0d7ed3bef317 100644
--- a/core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
+++ b/core/profiles/demo_umami/themes/umami/templates/layout/page.html.twig
@@ -44,10 +44,16 @@
#}
<div class="layout-container">
- {% if page.header|render|striptags|trim is not empty %}
+ {% if page.pre_header|render|striptags|trim is not empty or
+ page.header|render|striptags|trim is not empty %}
<header class="layout-header" role="banner">
<div class="container">
- {{ page.header }}
+ {% if page.pre_header|render|striptags|trim is not empty %}
+ {{ page.pre_header }}
+ {% endif %}
+ {% if page.header|render|striptags|trim is not empty %}
+ {{ page.header }}
+ {% endif %}
</div>
</header>
{% endif %}
diff --git a/core/profiles/demo_umami/themes/umami/umami.info.yml b/core/profiles/demo_umami/themes/umami/umami.info.yml
index cd324a8faccd..c38daa7bb68f 100644
--- a/core/profiles/demo_umami/themes/umami/umami.info.yml
+++ b/core/profiles/demo_umami/themes/umami/umami.info.yml
@@ -13,6 +13,7 @@ libraries-override:
classy/messages: false
regions:
+ pre_header: Pre-header
header: Header
highlighted: Highlighted
tabs: Tabs
diff --git a/core/profiles/demo_umami/themes/umami/umami.libraries.yml b/core/profiles/demo_umami/themes/umami/umami.libraries.yml
index 83f4e9b59719..467b2bf9a183 100644
--- a/core/profiles/demo_umami/themes/umami/umami.libraries.yml
+++ b/core/profiles/demo_umami/themes/umami/umami.libraries.yml
@@ -33,6 +33,7 @@ global:
css/components/regions/bottom/bottom.css: {}
css/components/regions/footer/footer.css: {}
css/components/regions/header/header.css: {}
+ css/components/regions/pre-header/pre-header.css: {}
layout:
css/layout/grid-2.css: {}
css/layout/grid-3.css: {}
--
GitLab