From c593820a746ccc5d805da2c112f8b70bdd9e3117 Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Thu, 23 Nov 2017 15:09:11 -0500
Subject: [PATCH] ISTWCMS-2304: Setting all breakpoints and ensuring that
header is themed correctly at each breakpoint
---
.../hamburger-button/_hamburger-button.scss | 95 +++++++++++++++++++
.../hamburger-button/hamburger-button.twig | 7 ++
.../search-button/_search-button.scss | 0
.../search-button/search-button.twig | 0
.../09-menu/social-media/_social-media.scss | 8 +-
.../social-media-menu/_social-media-menu.scss | 1 +
.../site/site-footer/_site-footer.scss | 1 +
.../site/site-header/_site-header.scss | 47 ++++++---
.../site/site-header/site-header.twig | 7 +-
templates/layout/page.html.twig | 1 -
10 files changed, 148 insertions(+), 19 deletions(-)
create mode 100644 components/_patterns/01-atoms/06-buttons/hamburger-button/_hamburger-button.scss
create mode 100644 components/_patterns/01-atoms/06-buttons/hamburger-button/hamburger-button.twig
rename components/_patterns/{02-molecules => 01-atoms/06-buttons}/search-button/_search-button.scss (100%)
rename components/_patterns/{02-molecules => 01-atoms/06-buttons}/search-button/search-button.twig (100%)
diff --git a/components/_patterns/01-atoms/06-buttons/hamburger-button/_hamburger-button.scss b/components/_patterns/01-atoms/06-buttons/hamburger-button/_hamburger-button.scss
new file mode 100644
index 00000000..c4ecd190
--- /dev/null
+++ b/components/_patterns/01-atoms/06-buttons/hamburger-button/_hamburger-button.scss
@@ -0,0 +1,95 @@
+.uw-header--buttons_hamburger {
+ border-left: 1px solid rgba(255, 255, 255, 0.2);
+ background-color: $uw-black;
+ font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
+ text-transform: uppercase;
+
+ .navigation-button {
+ height: auto;
+ }
+
+ span.navigation_toggle--text {
+ letter-spacing: 0.045rem;
+ font-size: 0.88889rem;
+ color: $uw-white;
+ text-decoration: none;
+ display: block;
+ padding: 2.25rem 0 0;
+ height: auto;
+ width: auto;
+ margin-top: -0.5rem
+ }
+
+ button {
+ background-color: inherit;
+ border-radius: none;
+ border: none;
+ cursor: pointer;
+ letter-spacing: 0.055rem;
+ padding: 0;
+ display: inline-block;
+ text-decoration: none;
+ user-select: none;
+ vertical-align: middle;
+ white-space: nowrap;
+ width: 100%;
+ height: 0;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ max-width: inherit;
+ margin: 0 auto;
+ color: $uw-white;
+ overflow: visible;
+ }
+
+ label {
+ display: block;
+ position: relative;
+ text-align: center;
+ margin-bottom: 0;
+ font-weight: 400;
+ font-size: 1.26562rem;
+ }
+
+ span.navigation-toggle--text {
+ text-decoration: none;
+ display: block;
+ padding: 2.25rem 0 0;
+ letter-spacing: 0.045rem;
+ font-size: 0.88889rem;
+ }
+
+ span.navigation-button--lines {
+ margin-left: -0.75rem;
+ position: absolute;
+ top: 33.5%;
+ left: 50%;
+ display: block;
+ text-shadow: rgba(0, 0, 0, 0.95) 1px 1px 2px;
+ height: 0.1rem;
+ width: 1.5rem;
+ background-color: #fff;
+ font-size: 0;
+ }
+
+ span.navigation-button--lines::before,
+ span.navigation-button--lines::after {
+ text-shadow: rgba(0, 0, 0, 0.95) 1px 1px 2px;
+ position: absolute;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: #fff;
+ content: '';
+ box-sizing: inherit;
+ }
+
+ span.navigation-button--lines::before {
+ transform: translateY(300%);
+ }
+
+ span.navigation-button--lines::after {
+ transform: translateY(-300%);
+ }
+}
diff --git a/components/_patterns/01-atoms/06-buttons/hamburger-button/hamburger-button.twig b/components/_patterns/01-atoms/06-buttons/hamburger-button/hamburger-button.twig
new file mode 100644
index 00000000..f1b323f7
--- /dev/null
+++ b/components/_patterns/01-atoms/06-buttons/hamburger-button/hamburger-button.twig
@@ -0,0 +1,7 @@
+<div id="uw-header-hamburger-button" class="uw-header--buttons_hamburger">
+ <label for="responsive-nav-check" class="navigation-button" aria-label="navigation menu" aria-controls="navigation" aria-expanded="false" onclick title="Menu">
+ <span class="navigation_toggle--text">Menu</span>
+ <button tabindex="-1" class="navigation-button--toggle" aria-label="Navigation menu"> </button>
+ <span class="navigation-button--lines"></span>
+ </label>
+</div>
\ No newline at end of file
diff --git a/components/_patterns/02-molecules/search-button/_search-button.scss b/components/_patterns/01-atoms/06-buttons/search-button/_search-button.scss
similarity index 100%
rename from components/_patterns/02-molecules/search-button/_search-button.scss
rename to components/_patterns/01-atoms/06-buttons/search-button/_search-button.scss
diff --git a/components/_patterns/02-molecules/search-button/search-button.twig b/components/_patterns/01-atoms/06-buttons/search-button/search-button.twig
similarity index 100%
rename from components/_patterns/02-molecules/search-button/search-button.twig
rename to components/_patterns/01-atoms/06-buttons/search-button/search-button.twig
diff --git a/components/_patterns/01-atoms/09-menu/social-media/_social-media.scss b/components/_patterns/01-atoms/09-menu/social-media/_social-media.scss
index 7a1ab83f..4db1a42f 100644
--- a/components/_patterns/01-atoms/09-menu/social-media/_social-media.scss
+++ b/components/_patterns/01-atoms/09-menu/social-media/_social-media.scss
@@ -31,12 +31,12 @@ i.social-media-i {
}
i.social-media-i:hover {
- .global-footer-social-media &{
+ .global-footer-social-media & {
background-color: $uw-black;
color: $uw-gold;
}
- .local-site-footer-social-media &{
+ .local-site-footer-social-media & {
background-color: $uw-local-site-footer-background-color;
color: $uw-white;
}
@@ -45,11 +45,11 @@ i.social-media-i:hover {
a.social-media-link {
text-decoration: none;
- .global-footer-social-media &{
+ .global-footer-social-media & {
color: $uw-black;
}
- .local-site-footer-social-media &{
+ .local-site-footer-social-media & {
color: $uw-local-site-footer-background-color;
}
}
diff --git a/components/_patterns/02-molecules/menus/social-media-menu/_social-media-menu.scss b/components/_patterns/02-molecules/menus/social-media-menu/_social-media-menu.scss
index 6fb9133d..c7e25054 100644
--- a/components/_patterns/02-molecules/menus/social-media-menu/_social-media-menu.scss
+++ b/components/_patterns/02-molecules/menus/social-media-menu/_social-media-menu.scss
@@ -14,6 +14,7 @@ ul.social-media-list {
.uw-footer-social-media {
text-align: right;
+
.global-footer-social-media {
background-color: $uw-black;
}
diff --git a/components/_patterns/03-organisms/site/site-footer/_site-footer.scss b/components/_patterns/03-organisms/site/site-footer/_site-footer.scss
index a635059b..9dcaefc5 100644
--- a/components/_patterns/03-organisms/site/site-footer/_site-footer.scss
+++ b/components/_patterns/03-organisms/site/site-footer/_site-footer.scss
@@ -55,6 +55,7 @@ footer {
grid-column: 3 / 4;
grid-row: 1 / 2;
+
.uw-footer-social-directory {
text-align: right;
}
diff --git a/components/_patterns/03-organisms/site/site-header/_site-header.scss b/components/_patterns/03-organisms/site/site-header/_site-header.scss
index aca398c4..afdb3d45 100644
--- a/components/_patterns/03-organisms/site/site-header/_site-header.scss
+++ b/components/_patterns/03-organisms/site/site-header/_site-header.scss
@@ -31,12 +31,11 @@
}
display: grid;
- grid-template-columns: 90% 10%;
- grid-template-rows: auto auto;
+ grid-template-columns: 60% 20% 20%;
+ grid-template-rows: auto;
- @include medium {
+ @include large {
grid-template-columns: 17% auto 10%;
- grid-template-rows: auto;
}
}
@@ -46,10 +45,10 @@
width: 17%;
}
- grid-column: 1 / 3;
+ grid-column: 1 / 2;
grid-row: 1 / 2;
- @include medium {
+ @include large {
grid-column: 1 / 2;
grid-row: 1 / 2;
}
@@ -61,10 +60,14 @@
width: 73%;
}
- grid-column: 1 / 2;
- grid-row: 2 / 3;
+ visibility: hidden;
+ height: 0;
+ width: 0;
- @include medium {
+ @include large {
+ visibility: visible;
+ width: 100%;
+ height: 100%;
grid-column: 2 / 3;
grid-row: 1 / 2;
}
@@ -77,24 +80,44 @@
}
grid-column: 2 / 3;
- grid-row: 2 / 3;
+ grid-row: 1 / 2;
- @include medium {
+ @include large {
grid-column: 3 / 4;
grid-row: 1 / 2;
}
}
+.uw-header-grid .header-4 {
+ @supports not (display: grid) {
+ float: left;
+ width: 10%;
+ }
+
+ grid-column: 3 / 4;
+ grid-row: 1 / 2;
+
+ @include large {
+ display: none;
+ }
+}
+
.uw-header--content {
box-sizing: inherit;
}
-.uw-header--buttons__search {
+.uw-header--search-button {
text-transform: uppercase;
+ border-left: 1px solid rgba(255, 255, 255, 0.2);
+
+ @include large {
+ border-left: none;
+ }
}
.uw-header--logo {
background-color: $uw-black;
+ padding-left: 1rem;
}
.uw-header-content ul {
diff --git a/components/_patterns/03-organisms/site/site-header/site-header.twig b/components/_patterns/03-organisms/site/site-header/site-header.twig
index e4b70e53..a3ad954b 100644
--- a/components/_patterns/03-organisms/site/site-header/site-header.twig
+++ b/components/_patterns/03-organisms/site/site-header/site-header.twig
@@ -9,8 +9,11 @@
"menu_class": "global-menu"
} %}
</div>
- <div id="uw-header-buttons" class="uw-header--buttons header-3">
- {% include "@molecules/search-button/search-button.twig" %}
+ <div id="uw-header-search" class="uw-header--search-button header-3">
+ {% include "@atoms/06-buttons/search-button/search-button.twig" %}
+ </div>
+ <div id="uw-header-menu" class="uw-header--hamburger-button header-4">
+ {% include "@atoms/06-buttons/hamburger-button/hamburger-button.twig" %}
</div>
</div>
</header>
diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig
index ea4ecb3a..560908c7 100644
--- a/templates/layout/page.html.twig
+++ b/templates/layout/page.html.twig
@@ -43,7 +43,6 @@
* @see html.html.twig
*/
#}
-<div class="breakpoint"></div>
{% set main_nav = simplify_menu('main') %}
{% include "@pages/_page.twig" with {
--
GitLab