From 8671cc09dd31d342c8185b275abb98a888b9c51d Mon Sep 17 00:00:00 2001 From: m26lebla <m26lebla@uwaterloo.ca> Date: Fri, 13 Nov 2020 14:32:58 -0500 Subject: [PATCH] additional css for presentation layer of menu and addition of site name to header --- css/styles.css | 154 ++++++++++-- js/component_scripts.min.js | 19 ++ .../03-layouts/content/_content.scss | 157 ++++++++++++ .../_patterns/03-layouts/content/content.twig | 234 +++++++++++++++++- .../_patterns/03-layouts/header/_header.scss | 35 +-- .../_patterns/03-layouts/header/header.twig | 33 ++- .../menu/menu--horizontal/menu--horizontal.js | 2 +- .../menu/menu--secondary/menu--secondary.yml | 2 +- .../04-components/site-name/_site-name.scss | 21 +- .../04-components/site-name/site-name.twig | 12 +- 10 files changed, 606 insertions(+), 63 deletions(-) diff --git a/css/styles.css b/css/styles.css index 5bb39d90..3c7536ef 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1494,6 +1494,112 @@ svg:not(:root) { padding-left: 0; padding-right: 0; } +.cuba-bod-person { + display: block; + width: 100%; } + .cuba-bod-person__wrapper { + display: grid; + grid-gap: 1rem; + grid-template-columns: 50% 50%; } + .cuba-bod-person__picture { + grid-column: 1 / 2; + grid-row: 1 / 2; } + .cuba-bod-person__picture img { + float: right; } + .cuba-bod-person__titles { + grid-column: 2 / 3; + grid-row: 1 / 2; } + .cuba-bod-person__bio { + grid-column: 1 / 3; + grid-row: 2 / 3; + padding: 0 2rem; } + +.cuba-bod-view { + display: block; + width: 100%; } + @media screen and (min-width: 48em) { + .cuba-bod-view { + display: flex; + flex-wrap: wrap; } } + .cuba-bod-view__profile { + padding: 1rem 0; } + .cuba-bod-view__profile .button { + border-radius: 0; + width: 75%; } + .cuba-bod-view__row { + display: block; + flex: 1 1 100%; + margin-bottom: 1.5rem; } + @media screen and (min-width: 48em) { + .cuba-bod-view__row { + display: flex; + flex: 1 1 51%; + flex-wrap: wrap; } } + @media screen and (min-width: 64em) { + .cuba-bod-view__row { + flex: 1 1 50%; + max-width: 50%; } } + .cuba-bod-view__row:first-child { + flex: 1 1 100%; + margin: 4.5rem auto; } + .cuba-bod-view__row:first-child .cuba-bod-view__card { + margin-left: auto; + margin-right: auto; } + @media screen and (min-width: 64em) { + .cuba-bod-view__row:first-child { + max-width: inherit; } + .cuba-bod-view__row:first-child .cuba-bod-view__card { + max-width: 40rem; } } + .cuba-bod-view__row:last-of-type { + margin-left: auto; + margin-right: auto; } + .cuba-bod-view__card { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + display: grid; + grid-template-columns: 100%; + margin: 0 1rem; + width: calc(100% - 2rem); } + @media screen and (min-width: 48em) { + .cuba-bod-view__card { + grid-gap: 2rem; + grid-template-columns: 30% 70%; } } + .cuba-bod-view__picture { + grid-column: 1 / 2; + grid-row: 1 / 2; + margin-left: auto; + margin-right: auto; } + @media screen and (min-width: 48em) { + .cuba-bod-view__picture { + margin-left: initial; + margin-right: initial; } } + .cuba-bod-view__picture img { + margin: 0; + padding: 0; } + @media screen and (min-width: 48em) { + .cuba-bod-view__picture img { + float: right; } } + .cuba-bod-view__titles { + grid-column: 1 / 2; + grid-row: 2 / 3; + padding: 0 1rem; + text-align: center; } + @media screen and (min-width: 48em) { + .cuba-bod-view__titles { + grid-column: 2 / 3; + grid-row: 1 / 2; + text-align: left; } } + .cuba-bod-view__titles a { + text-decoration: none; } + +.cuba-bod-page-title h1 { + font-size: 2rem; + margin: 0; + padding: 0; + text-align: center; } + @media screen and (min-width: 48em) { + .cuba-bod-page-title h1 { + font-size: 3rem; } } + .uw-footer { background-color: #000; margin-top: 0; @@ -1840,7 +1946,7 @@ svg:not(:root) { padding-right: 0; } } @media (min-width: 48.06rem) { .uw-header__wrapper { - grid-template-columns: auto 10rem; } } + grid-template-columns: auto 8rem; } } .uw-header__wrapper .uw-site-logo { grid-column: 1 / 3; grid-row: 1 / 2; } @@ -1855,24 +1961,15 @@ svg:not(:root) { .uw-header__wrapper .uw-header-menu { grid-column: 2 / 3; grid-row: 1 / 2; } } - .uw-header__wrapper .uw-colour-bar { - padding-top: 1rem; - width: 100%; } - .uw-header__wrapper .uw-main-nav { - display: none; - grid-column: 1 / 5; - grid-row: 4 / 5; } - @media (min-width: 48.06rem) { - .uw-header__wrapper .uw-main-nav { - grid-column: 1 / 5; - grid-row: 3 / 4; } } - .uw-header__wrapper .messages-list { - background-color: #fff; - grid-column: 1 / 5; - grid-row: 4 / 5; - margin-bottom: 0; - margin-top: 0; - padding: 0 1rem; } + .uw-header .uw-site-name { + background-color: #eee; } + .uw-header .messages-list { + background-color: #fff; + grid-column: 1 / 5; + grid-row: 4 / 5; + margin-bottom: 0; + margin-top: 0; + padding: 0 1rem; } .layout { margin-left: auto; @@ -5268,8 +5365,23 @@ picture { text-indent: -999rem; width: 100%; } -.site-name { - padding: 1rem; } +.uw-site-name__wrapper { + margin-left: auto; + margin-right: auto; + max-width: 75rem; + padding: 0 16px; } + @media (min-width: 75rem) { + .uw-site-name__wrapper { + padding-left: 0; + padding-right: 0; } } + +.uw-site-name__link { + text-decoration: none; } + +.uw-site-name__text { + font-size: 28.832px; + margin: 0; + padding: 0.5rem 0; } .skiplinks { display: flex; diff --git a/js/component_scripts.min.js b/js/component_scripts.min.js index c36cf177..a7773da4 100644 --- a/js/component_scripts.min.js +++ b/js/component_scripts.min.js @@ -261,6 +261,25 @@ attach: function (context, settings) { $(document).ready(function(){ + // $(document, context).once('horizontal_menu').each( function() { + // + // acc = document.getElementsByClassName('menu--horizontal'); + // + // for (i = 0; i < acc.length; i++) { + // + // acc[i].addEventListener('click', function (acc_clicked) { + // + // /* Toggle between adding and removing the "active" class, + // to highlight the button that controls the panel */ + // this.classList.toggle('active'); + // }); + // } + // }); + + + + + // const toggle = document.querySelector(".toggle"); const menu = document.querySelector(".menu--horizontal"); diff --git a/source/_patterns/03-layouts/content/_content.scss b/source/_patterns/03-layouts/content/_content.scss index 16ec3a2a..5d2f9a22 100644 --- a/source/_patterns/03-layouts/content/_content.scss +++ b/source/_patterns/03-layouts/content/_content.scss @@ -2,3 +2,160 @@ // Styles for Content Layout. // .l-content {} +.cuba-bod-person { + display: block; + width: 100%; + + &__wrapper { + display: grid; + grid-gap: 1rem; + grid-template-columns: 50% 50%; + + } + + &__picture { + grid-column: 1 / 2; + grid-row: 1 / 2; + + img { + float: right; + } + } + + &__titles { + grid-column: 2 / 3; + grid-row: 1 / 2; + } + + &__bio { + + grid-column: 1 / 3; + grid-row: 2 / 3; + padding: 0 2rem; + } +} + +.cuba-bod-view { + display: block; + width: 100%; + + @media screen and (min-width: 48em) { + display: flex; + flex-wrap: wrap; + } + + &__profile { + padding: 1rem 0; + + .button { + border-radius: 0; + width: 75%; + } + } + + &__row { + display: block; + flex: 1 1 100%; + margin-bottom: 1.5rem; + + @media screen and (min-width: 48em) { + display: flex; + flex: 1 1 51%; + flex-wrap: wrap; + + } + @media screen and (min-width: 64em) { + flex: 1 1 50%; + max-width:50%; + } + } + + &__row:first-child { + flex: 1 1 100%; + margin:4.5rem auto; + .cuba-bod-view__card { + margin-left: auto; + margin-right: auto; + } + @media screen and (min-width: 64em) { + max-width:inherit; + .cuba-bod-view__card { + max-width:40rem; + } + } + + } + &__row:last-of-type { + margin-left: auto; + margin-right: auto; + } + &__card { + box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); + display: grid; + grid-template-columns: 100%; + margin: 0 1rem; + width:calc(100% - 2rem); + @media screen and (min-width: 48em) { + grid-gap: 2rem; + grid-template-columns: 30% 70%; + } + } + + &__picture { + + grid-column: 1 / 2; + grid-row: 1 / 2; + margin-left: auto; + margin-right: auto; + + @media screen and (min-width: 48em) { + + margin-left: initial; + margin-right: initial; + } + + img { + + margin: 0; + padding: 0; + + @media screen and (min-width: 48em) { + float: right; + } + } + } + + &__titles { + + grid-column: 1 / 2; + grid-row: 2 / 3; + padding: 0 1rem; + text-align: center; + + @media screen and (min-width: 48em) { + + grid-column: 2 / 3; + grid-row: 1 / 2; + text-align: left; + } + + a { + text-decoration: none; + } + } +} + +.cuba-bod-page-title { + h1 { + + font-size: 2rem; + margin: 0; + padding: 0; + text-align: center; + + + @media screen and (min-width: 48em) { + font-size: 3rem; + } + } +} \ No newline at end of file diff --git a/source/_patterns/03-layouts/content/content.twig b/source/_patterns/03-layouts/content/content.twig index c98be1bd..cef49655 100644 --- a/source/_patterns/03-layouts/content/content.twig +++ b/source/_patterns/03-layouts/content/content.twig @@ -1,5 +1,237 @@ <main id="main" class="uw-main" role="main" tabindex="-1"> {% block content %} - Content Region Content + {#<div class="view view-cuba-view-bod view-id-cuba_view_bod view-display-id-page_1 js-view-dom-id-68027caf5b0907a4a3377d5f79a06e13ef238b89dbd208e7fdecfc9531a492c5">#} + + + + {#<div class="view-content">#} + {#<div class="cuba-bod-page-title">#} + {#<h1>Board of Directors</h1>#} + {#</div>#} + {#<div class="cuba-bod-description">#} + {#The board of directors is elected annually by the association’s members. Members of the CUBA Board of Directors are shown below. Click on their names or photos to read more about each of them.#} + {#</div>#} + + {#<div class="cuba-bod-view">#} + + + + {#<div class="cuba-bod-view__row">#} + {#<div class="cuba-bod-view__card">#} + {#<div class="cuba-bod-view__picture">#} + {#<a href="/node/12">#} + {#<img src="https://dev.cuba-accau.ca/profiles/cuba_base_profile/themes/cuba_theme/images/default_board_member.jpg" alt="Member does not have picture">#} + {#</a>#} + {#</div>#} + {#<div class="cuba-bod-view__titles">#} + {#<h2><a href="/node/12">Vacant(President)</a></h2>#} + {#<div class="cuba-bod-view__university-position">#} + + {#</div>#} + + {#<div class="cuba-bod-view__university-position">#} + + {#</div>#} + {#<div class="cuba-bod-view__profile">#} + {#<button class="button"><a href="/node/12">View Profile</a></button>#} + {#</div>#} + {#</div>#} + {#</div>#} + {#</div>#} + + + + {#<div class="cuba-bod-view__row">#} + {#<div class="cuba-bod-view__card">#} + {#<div class="cuba-bod-view__picture">#} + {#<a href="/node/11">#} + {#<article class="media media--type-board-of-directors media--view-mode-default">#} + + + {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/jcrawford-%281%29.jpg?itok=Fb99iQPP" width="256" height="300" alt="as" typeof="foaf:Image" class="image-style-cuba-is-bod">#} + + + {#</div>#} + + {#</article>#} + + {#</a>#} + {#</div>#} + {#<div class="cuba-bod-view__titles">#} + {#<h2><a href="/node/11">Joy Crawford(Vice Chair)</a></h2>#} + {#<div class="cuba-bod-view__university-position">#} + {#Vice-Chair of the Board of Governors#} + {#</div>#} + + {#<div class="cuba-bod-view__university-position">#} + {#University of Saskatchewan#} + {#</div>#} + {#<div class="cuba-bod-view__profile">#} + {#<button class="button"><a href="/node/11">View Profile</a></button>#} + {#</div>#} + {#</div>#} + {#</div>#} + {#</div>#} + + + + {#<div class="cuba-bod-view__row">#} + {#<div class="cuba-bod-view__card">#} + {#<div class="cuba-bod-view__picture">#} + {#<a href="/node/10">#} + {#<article class="media media--type-board-of-directors media--view-mode-default">#} + + + {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/Mike-Grivicic-2.jpg?itok=4Wsjqrs7" width="240" height="300" alt="MG" typeof="foaf:Image" class="image-style-cuba-is-bod">#} + + + {#</div>#} + + {#</article>#} + + {#</a>#} + {#</div>#} + {#<div class="cuba-bod-view__titles">#} + {#<h2><a href="/node/10">Mike Grivicic(Secretary)</a></h2>#} + {#<div class="cuba-bod-view__university-position">#} + {#Associate University Secretary#} + {#</div>#} + + {#<div class="cuba-bod-view__university-position">#} + {#University of Waterloo#} + {#</div>#} + {#<div class="cuba-bod-view__profile">#} + {#<button class="button"><a href="/node/10">View Profile</a></button>#} + {#</div>#} + {#</div>#} + {#</div>#} + {#</div>#} + + + + {#<div class="cuba-bod-view__row">#} + {#<div class="cuba-bod-view__card">#} + {#<div class="cuba-bod-view__picture">#} + {#<a href="/node/13">#} + {#<article class="media media--type-board-of-directors media--view-mode-default">#} + + + {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/Carrie-Andersen_0.jpg?itok=wDVpBECR" width="214" height="300" alt="asdg" typeof="foaf:Image" class="image-style-cuba-is-bod">#} + + + {#</div>#} + + {#</article>#} + + {#</a>#} + {#</div>#} + {#<div class="cuba-bod-view__titles">#} + {#<h2><a href="/node/13">Carrie Anderson</a></h2>#} + {#<div class="cuba-bod-view__university-position">#} + {#University Secretary#} + {#</div>#} + + {#<div class="cuba-bod-view__university-position">#} + {#University of Victoria#} + {#</div>#} + {#<div class="cuba-bod-view__profile">#} + {#<button class="button"><a href="/node/13">View Profile</a></button>#} + {#</div>#} + {#</div>#} + {#</div>#} + {#</div>#} + + {#<div class="cuba-bod-view__row">#} + {#<div class="cuba-bod-view__card">#} + {#<div class="cuba-bod-view__picture">#} + {#<a href="/node/14">#} + {#<article class="media media--type-board-of-directors media--view-mode-default">#} + + + {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/Lynn_castonguy.jpg?itok=m2ILIAfr" width="259" height="300" alt="asdg" typeof="foaf:Image" class="image-style-cuba-is-bod">#} + + + {#</div>#} + + {#</article>#} + + {#</a>#} + {#</div>#} + {#<div class="cuba-bod-view__titles">#} + {#<h2><a href="/node/14">Lynne Castonguay</a></h2>#} + {#<div class="cuba-bod-view__university-position">#} + {#Secretary-General#} + {#</div>#} + + {#<div class="cuba-bod-view__university-position">#} + {#University of Moncton#} + {#</div>#} + {#<div class="cuba-bod-view__profile">#} + {#<button class="button"><a href="/node/14">View Profile</a></button>#} + {#</div>#} + {#</div>#} + {#</div>#} + {#</div>#} + + {#<div class="cuba-bod-view__row">#} + {#<div class="cuba-bod-view__card">#} + {#<div class="cuba-bod-view__picture">#} + {#<a href="/node/14">#} + {#<article class="media media--type-board-of-directors media--view-mode-default">#} + + + {#<div class="field field--name-field-media-image-1 field--type-image field--label-hidden field__item"> <img src="https://dev.cuba-accau.ca/sites/default/files/styles/cuba_is_bod/public/2020-11/Lynn_castonguy.jpg?itok=m2ILIAfr" width="259" height="300" alt="asdg" typeof="foaf:Image" class="image-style-cuba-is-bod">#} + + + {#</div>#} + + {#</article>#} + + {#</a>#} + {#</div>#} + {#<div class="cuba-bod-view__titles">#} + {#<h2><a href="/node/14">Lynne Castonguay</a></h2>#} + {#<div class="cuba-bod-view__university-position">#} + {#Secretary-General#} + {#</div>#} + + {#<div class="cuba-bod-view__university-position">#} + {#University of Moncton#} + {#</div>#} + {#<div class="cuba-bod-view__profile">#} + {#<button class="button"><a href="/node/14">View Profile</a></button>#} + {#</div>#} + {#</div>#} + {#</div>#} + {#</div>#} + + + + {#<div class="cuba-bod-view__row">#} + {#<div class="cuba-bod-view__card">#} + {#<div class="cuba-bod-view__picture">#} + {#<a href="/node/19">#} + {#<img src="https://dev.cuba-accau.ca/profiles/cuba_base_profile/themes/cuba_theme/images/default_board_member.jpg" alt="Member does not have picture">#} + {#</a>#} + {#</div>#} + {#<div class="cuba-bod-view__titles">#} + {#<h2><a href="/node/19">Vacant(New position)</a></h2>#} + {#<div class="cuba-bod-view__university-position">#} + + {#</div>#} + + {#<div class="cuba-bod-view__university-position">#} + + {#</div>#} + {#<div class="cuba-bod-view__profile">#} + {#<button class="button"><a href="/node/19">View Profile</a></button>#} + {#</div>#} + {#</div>#} + {#</div>#} + {#</div>#} + {#</div>#} + {#</div>#} + + {#</div>#} {% endblock %} </main> diff --git a/source/_patterns/03-layouts/header/_header.scss b/source/_patterns/03-layouts/header/_header.scss index b6babb8d..9ed265ba 100644 --- a/source/_patterns/03-layouts/header/_header.scss +++ b/source/_patterns/03-layouts/header/_header.scss @@ -1,5 +1,6 @@ // @file // Styles for Header Layout. +$site-name-bg: gesso-grayscale(gray-2); .uw-header { @include uw-full-width; @@ -13,7 +14,7 @@ padding:gesso-spacing(sm); position: relative; @include medium { - grid-template-columns: auto 10rem; + grid-template-columns: auto 8rem; } .uw-site-logo { @@ -35,29 +36,19 @@ } } - .uw-colour-bar { - padding-top: 1rem; - width:100%; - } - .uw-main-nav { - display:none; - grid-column: 1 / 5; - grid-row: 4 / 5; + } - @include medium{ - grid-column: 1 / 5; - grid-row: 3 / 4; - } - } + .uw-site-name{ + background-color: $site-name-bg; - .messages-list { - background-color: $uw-white; - grid-column: 1 / 5; - grid-row: 4 / 5; - margin-bottom: 0; - margin-top: 0; - padding: 0 1rem; - } + } + .messages-list { + background-color: $uw-white; + grid-column: 1 / 5; + grid-row: 4 / 5; + margin-bottom: 0; + margin-top: 0; + padding: 0 1rem; } } diff --git a/source/_patterns/03-layouts/header/header.twig b/source/_patterns/03-layouts/header/header.twig index b20d8984..16222ae5 100644 --- a/source/_patterns/03-layouts/header/header.twig +++ b/source/_patterns/03-layouts/header/header.twig @@ -6,23 +6,34 @@ <div class="uw-header__wrapper"> {% include '@components/site-logo/site-logo.twig' %} - {% block content %} - - {% endblock %} {% include "@components/menu/menu--header/menu--header.twig" with { 'modifier_classes': header_modifier_classes, 'items': header_items } %} + {% block content %} + + {% endblock %} + </div> + {% include '@components/color-bar/color-bar.twig' with { 'faculty': faculty }%} - {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with { - 'modifier_classes': main_modifier_classes, - 'items': nav_items - }%} - {% include "@components/menu/menu--secondary/menu--secondary.twig" with { - 'modifier_classes': secondary_modifier_classes, - 'items': secondary_items - }%} + + + <div class="uw-header__site-name"> + {% include '@components/site-name/site-name.twig' with { + 'site_name': 'PSYCHOLOGY' + } %} + </div> + <div class="uw-header__navigation"> + {% include "@components/menu/menu--horizontal/menu--horizontal.twig" with { + 'modifier_classes': main_modifier_classes, + 'items': nav_items + }%} + {% include "@components/menu/menu--secondary/menu--secondary.twig" with { + 'modifier_classes': secondary_modifier_classes, + 'items': secondary_items + }%} + </div> </header> diff --git a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js index 96347c0b..3b8cb60d 100644 --- a/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js +++ b/source/_patterns/04-components/menu/menu--horizontal/menu--horizontal.js @@ -37,7 +37,7 @@ } } - + /* Close Submenu From Anywhere */ function closeSubmenu(e) { diff --git a/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml index 6b747021..00631369 100644 --- a/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml +++ b/source/_patterns/04-components/menu/menu--secondary/menu--secondary.yml @@ -1,5 +1,5 @@ --- -secondary_modifier_classes: 'secondary' +modifier_classes: 'secondary' menu_name: 'horizontal' is_demo: true items: diff --git a/source/_patterns/04-components/site-name/_site-name.scss b/source/_patterns/04-components/site-name/_site-name.scss index 8323335c..c5e86ccf 100644 --- a/source/_patterns/04-components/site-name/_site-name.scss +++ b/source/_patterns/04-components/site-name/_site-name.scss @@ -1,6 +1,21 @@ // @file // Styles for Site name. - .site-name { - padding:1rem; - } +$site-name-font-family: gesso-grayscale(gray-2); +$site-name-font-size: gesso-font-size(5); + +.uw-site-name { + + &__wrapper{ + @include uw-contained-width(); + } + &__link{ + text-decoration:none; + } + &__text{ + font-size:$site-name-font-size; + margin:0; + padding:0.5rem 0; + + } +} \ No newline at end of file diff --git a/source/_patterns/04-components/site-name/site-name.twig b/source/_patterns/04-components/site-name/site-name.twig index 154cfd94..08e87dee 100644 --- a/source/_patterns/04-components/site-name/site-name.twig +++ b/source/_patterns/04-components/site-name/site-name.twig @@ -1,3 +1,9 @@ -<a class="site-name" href="{{ url }}" title="{{ 'Home'|t }}" rel="home"> - <h1 class="site-name__text">{{ site_name }}</h1> -</a> +<div class="uw-site-name"> + <div class="uw-site-name__wrapper"> + <a class="uw-site-name__link" href="{{ url }}" title="{{ 'Home'|t }}" rel="home"> + <h1 class="uw-site-name__text">{{ site_name }}</h1> + </a> + </div> + +</div> + -- GitLab