From a6116e0b3ebfcdeafc394d76c64c1fc8490e3d3a Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Mon, 27 Jun 2022 13:33:28 -0400
Subject: [PATCH] ISTWCMS-5633: addition of the site name to the header, and
clean up of the hamburger menu css
---
src/patterns/03-layouts/header/header.twig | 5 ++-
src/patterns/04-components/_index.scss | 1 +
.../menu/menu--header/_menu--header.scss | 4 +--
.../menu--horizontal/_menu--horizontal.scss | 20 ++++++++----
.../menu--secondary/_menu--secondary.scss | 3 ++
.../_mobile-menu-button.scss | 6 ++--
.../04-components/site-name/_site-name.scss | 31 +++++++++++++++++++
.../04-components/site-name/site-name.md | 8 +++++
.../04-components/site-name/site-name.twig | 8 +++++
9 files changed, 74 insertions(+), 12 deletions(-)
create mode 100644 src/patterns/04-components/site-name/_site-name.scss
create mode 100644 src/patterns/04-components/site-name/site-name.md
create mode 100644 src/patterns/04-components/site-name/site-name.twig
diff --git a/src/patterns/03-layouts/header/header.twig b/src/patterns/03-layouts/header/header.twig
index 9de3fadd..e2f99791 100644
--- a/src/patterns/03-layouts/header/header.twig
+++ b/src/patterns/03-layouts/header/header.twig
@@ -29,7 +29,10 @@
<nav class="uw-header__nav">
<div class="uw-header__center">
<div class="uw-header__site-name">
- Site Name
+ {% include '@components/site-name/site-name.twig' with {
+ 'site_name': site_name,
+ 'home_link': home_link
+ } %}
</div>
<button class="uw-navigation-button" aria-controls="uw-header__navigation" aria-expanded="false">
<span class="uw-navigation-button__text">Menu</span>
diff --git a/src/patterns/04-components/_index.scss b/src/patterns/04-components/_index.scss
index cff7a1d7..54c7a0bb 100644
--- a/src/patterns/04-components/_index.scss
+++ b/src/patterns/04-components/_index.scss
@@ -16,6 +16,7 @@
@forward 'social-media/social-media--icon/social-media--icon';
@forward 'svg/svg';
@forward 'site-logo/site-logo';
+@forward 'site-name/site-name';
@forward 'tag/tag';
@forward 'tag-list/tag-list';
@forward 'territorial-statement/territorial-statement';
diff --git a/src/patterns/04-components/menu/menu--header/_menu--header.scss b/src/patterns/04-components/menu/menu--header/_menu--header.scss
index 2296e38a..bb2d1326 100644
--- a/src/patterns/04-components/menu/menu--header/_menu--header.scss
+++ b/src/patterns/04-components/menu/menu--header/_menu--header.scss
@@ -23,7 +23,7 @@
border: var(--size-xs) solid var(--uw-white);
height: auto;
position: relative;
- width: 6rem;
+ width: var(--size-12);
a{
color: var(--uw-white);
outline: none;
@@ -48,7 +48,7 @@
width: 100%;
&.has-submenu {
> a{
- padding-right: var(--size-4);
+ padding-right: var(--size-3);
position: relative;
&::after {
@include svg-background(mobile-arrow-down-w);
diff --git a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
index 485247de..f5c319b8 100644
--- a/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
+++ b/src/patterns/04-components/menu/menu--horizontal/_menu--horizontal.scss
@@ -6,6 +6,7 @@ $menu-horizontal-sub-font: var(--font-system);
$menu-horizontal-sub-font-bold: var(--font-systembold);
$menu-horizontal-bar-font-size: var(--font-size-000);
$menu-horizontal-sub-font-size: var(--font-size-000);
+$menu-horizontal-drop-bg: #f7f7f7;
// Colors
$menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school', 'org-stp', 'org-cgc', 'org-stj', 'org-ren';
@each $faculty in $menu-faculties {
@@ -288,6 +289,9 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
font-family: $menu-horizontal-bar-font;
justify-content: flex-start;
width: 100%;
+ li{
+ font-size: $menu-horizontal-bar-font-size;
+ }
> .menu__item{
border-bottom: var(--size-xs) solid var(--gray-3);
font-size: $menu-horizontal-bar-font-size;
@@ -321,7 +325,7 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
position: absolute;
right: var(--size-05);
text-align: center;
- top: var(--size-105);
+ top: 14px;
width: var(--size-1);
}
}
@@ -357,6 +361,7 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
width: 100%;
}
.submenu-active {
+
&[aria-expanded="true"]{
> a{
&::after {
@@ -367,7 +372,7 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
.menu__subnav{
background-color: #f7f7f7;
display: block;
- height: calc(100vh - var(--size-14));
+ height: calc(100vh - 7rem);
position: absolute;
top: 0;
z-index: var(--layer-dropdown);
@@ -392,7 +397,7 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
z-index: inherit;
}
@media(min-width: $screen-md) {
- @include uw-contained-width;
+ //@include uw-contained-width;
background-color: #f7f7f7;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.13);
break-inside: avoid;
@@ -400,11 +405,11 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
column-fill: balance;
column-gap: var(--grid-gap);
height: auto;
- left: var(--size-3);
+ left: var(--size-6);
overflow-y: inherit;
padding: 0 var(--size-2) var(--size-3) var(--size-2);
top: 100%;
- width: calc(100% - var(--size-12));
+ width: calc(100% - 6rem);
// Puts the dropdown at z-index 7
z-index: var(--layer-dropdown);
}
@@ -414,6 +419,9 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
@media(min-width: $screen-xl) {
column-count: 4;
}
+ li{
+ font-size: $menu-horizontal-bar-font-size;
+ }
.menu__item{
@supports (break-inside: avoid-column) {
display: block;
@@ -524,7 +532,7 @@ $menu-faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org
font-size: var(--font-size-00);
margin: 0 0 var(--size-05) 0;
&::after {
- right: -(var(--size-05));
+ right: -1rem !important;
}
}
}
diff --git a/src/patterns/04-components/menu/menu--secondary/_menu--secondary.scss b/src/patterns/04-components/menu/menu--secondary/_menu--secondary.scss
index 41b0f924..966e2f17 100644
--- a/src/patterns/04-components/menu/menu--secondary/_menu--secondary.scss
+++ b/src/patterns/04-components/menu/menu--secondary/_menu--secondary.scss
@@ -45,6 +45,9 @@ $menu-horizontal-bg-sm: var(--uw-white);
justify-content: flex-start;
text-transform: inherit;
width: 100%;
+ li{
+ font-size: var(--font-size-000);
+ }
> .menu__item{
@media(min-width: $screen-md) {
width: auto;
diff --git a/src/patterns/04-components/mobile-menu-button/_mobile-menu-button.scss b/src/patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
index 1978048c..9896b125 100644
--- a/src/patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
+++ b/src/patterns/04-components/mobile-menu-button/_mobile-menu-button.scss
@@ -15,7 +15,7 @@
}
font-family: var(--font-book);
font-size: var(--font-size-00000);
- font-weight: 400;
+ font-weight: var(--font-weight-400);
height: 2.98125rem;
letter-spacing: 0;
margin: inherit;
@@ -49,12 +49,12 @@
width: var(--size-3);
}
> .uw-navigation-button__lines {
- background-color: gesso-grayscale(gray-5);
+ background-color: var(--gray-5);
display: block;
font-size: 0;
height: var(--size-sm);
left: 50%;
- margin-left: -(var(--size-105));
+ margin-left: -0.75rem;
position: absolute;
top: 28%;
transition: background-color 0.3s;
diff --git a/src/patterns/04-components/site-name/_site-name.scss b/src/patterns/04-components/site-name/_site-name.scss
new file mode 100644
index 00000000..31752d7b
--- /dev/null
+++ b/src/patterns/04-components/site-name/_site-name.scss
@@ -0,0 +1,31 @@
+// @file
+// Styles for Site name.
+@use '../../01-core' as *;
+
+$site-name-font-family: var(--gray-2);
+$site-name-font-size: var(--font-size-5);
+
+.uw-site-name {
+ a{
+ &:hover{
+ text-decoration: underline;
+ }
+ }
+ &__wrapper{
+ padding: 0 var(--size-1);
+ @media(min-width: $screen-md) {
+ @include uw-contained-width();
+ }
+ }
+ &__link{
+ display: inline-block;
+ letter-spacing: inherit;
+ text-decoration: none;
+ text-transform: uppercase;
+ }
+ &__text{
+ font-size: $site-name-font-size;
+ margin: 0;
+ padding: var(--size-1) 0;
+ }
+}
diff --git a/src/patterns/04-components/site-name/site-name.md b/src/patterns/04-components/site-name/site-name.md
new file mode 100644
index 00000000..7a7003d8
--- /dev/null
+++ b/src/patterns/04-components/site-name/site-name.md
@@ -0,0 +1,8 @@
+---
+el: .site-name
+title: Site Name
+---
+
+__Variables:__
+* url: [string] URL of the site name link.
+* site_name: [string] Text of the site name.
diff --git a/src/patterns/04-components/site-name/site-name.twig b/src/patterns/04-components/site-name/site-name.twig
new file mode 100644
index 00000000..74b9c200
--- /dev/null
+++ b/src/patterns/04-components/site-name/site-name.twig
@@ -0,0 +1,8 @@
+<div class="uw-site-name">
+ <div class="uw-site-name__wrapper">
+ <a class="uw-site-name__link" href="{{ home_link }}" title="{{ site_name}} {{ 'Home'|t }}" rel="home">
+ <h1 class="uw-site-name__text">{{ site_name }}</h1>
+ </a>
+ </div>
+</div>
+
--
GitLab