Unverified Commit d222f799 authored by lauriii's avatar lauriii

Issue #2980528 by kjay, andrewmacpherson, markconroy, finnsky: Improve Umami...

Issue #2980528 by kjay, andrewmacpherson, markconroy, finnsky: Improve Umami Demo's header layout and responsive behaviour

(cherry picked from commit 6254e18d)
parent 6d18d392
......@@ -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:
......
......@@ -8,7 +8,7 @@ dependencies:
id: umami_branding
theme: umami
region: header
weight: -8
weight: -7
provider: null
plugin: system_branding_block
settings:
......
......@@ -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:
......
......@@ -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:
......
......@@ -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;
}
......
......@@ -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;
}
......@@ -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 {
......
......@@ -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);
......
......@@ -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) {
......
/**
* @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;
}
}
......@@ -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 %}
......
......@@ -13,6 +13,7 @@ libraries-override:
classy/messages: false
regions:
pre_header: Pre-header
header: Header
highlighted: Highlighted
tabs: Tabs
......
......@@ -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: {}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment