From dd237ea5cc266dba84a2a220da5fa99e791fa315 Mon Sep 17 00:00:00 2001 From: James Date: Thu, 25 Jan 2018 14:37:32 -0800 Subject: [PATCH 01/27] Remove 'work in progress' from title --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6618a47..e5b65e4 100755 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -UBC CLF 7.0.4 DRUPAL THEME (aka Galactus) - WORK IN PROGRESS +UBC CLF 7.0.4 DRUPAL THEME (aka Galactus) ======================================= A responsive UBC CLF (Common Look and Feel) theme for Drupal 8. Created by the UBC IT Web Services Department. From f27f0a893296bd25d1f29b8b768ae8ec8eddfaf0 Mon Sep 17 00:00:00 2001 From: James Date: Tue, 6 Feb 2018 09:14:01 -0800 Subject: [PATCH 02/27] Update minor version number --- galactus.info.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/galactus.info.yml b/galactus.info.yml index 1b4009e..8e66130 100755 --- a/galactus.info.yml +++ b/galactus.info.yml @@ -4,7 +4,7 @@ core: 8.x base theme: classy description: 'Galactus is a Drupal base theme that provides integration with the UBC CLF (Common Look and Feel) for UBC-branded units. We recommend against using this theme for any customizations or modifications. If you require a customized UBC CLF theme, please consider the Drupal CLF theme' package: galactus -version: 1.0 +version: 1.0.1 libraries: - galactus/global From 9edb0b4afc5af5a96f7a2ecd2d2bbea535a3db13 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Fri, 23 Mar 2018 11:03:06 -0700 Subject: [PATCH 03/27] Initial commit --- .../navigation.default.css} | 0 css/navigation/navigation.double.css | 6 + css/navigation/navigation.higher.css | 12 + css/navigation/navigation.slidein.css | 239 +++++++++ css/navigation/navigation.sticky.css | 38 ++ galactus.libraries.yml | 34 +- galactus.theme | 39 ++ js/navigation.slidein.js | 30 ++ js/navigation.sticky.js | 21 + sass/navigation.slidein.scss | 213 ++++++++ templates/layout/page.html.twig | 484 +++++++++--------- theme-settings.php | 6 +- 12 files changed, 890 insertions(+), 232 deletions(-) rename css/{navigation.sticky.css => navigation/navigation.default.css} (100%) create mode 100644 css/navigation/navigation.double.css create mode 100644 css/navigation/navigation.higher.css create mode 100644 css/navigation/navigation.slidein.css create mode 100644 css/navigation/navigation.sticky.css create mode 100644 js/navigation.slidein.js create mode 100644 js/navigation.sticky.js create mode 100644 sass/navigation.slidein.scss diff --git a/css/navigation.sticky.css b/css/navigation/navigation.default.css similarity index 100% rename from css/navigation.sticky.css rename to css/navigation/navigation.default.css diff --git a/css/navigation/navigation.double.css b/css/navigation/navigation.double.css new file mode 100644 index 0000000..3ff36f1 --- /dev/null +++ b/css/navigation/navigation.double.css @@ -0,0 +1,6 @@ +/** + * @file + * Placeholder + */ + +/*# sourceMappingURL=navigation.sticky.css.map */ diff --git a/css/navigation/navigation.higher.css b/css/navigation/navigation.higher.css new file mode 100644 index 0000000..d3648de --- /dev/null +++ b/css/navigation/navigation.higher.css @@ -0,0 +1,12 @@ +/** + * @file + * Placeholder + */ +#ubc7-unit-menu .navbar-inner { + min-height: 80px!important; +} +.navbar-link { + padding: 27px 10px!important; +} + +/*# sourceMappingURL=navigation.sticky.css.map */ diff --git a/css/navigation/navigation.slidein.css b/css/navigation/navigation.slidein.css new file mode 100644 index 0000000..c57615f --- /dev/null +++ b/css/navigation/navigation.slidein.css @@ -0,0 +1,239 @@ +#button--slide-in { + float:right; + color:#000; + border:none; + background-color:rgba(0, 0, 0, 0); + font-family: Arial,Sans-Serif; + padding:10px; + font-size:14px; + line-height: 1.75em!important; + outline: 0; +} + +#button--slide-in:hover { + background-color: #002145!important; + color: #fff!important; +} + +.drawer-toggle--hamburger { + background-color: #fff; + -webkit-box-shadow: 1px 1px 1px #191938; + float: right; + height: 24px; + padding: 11px 0 0 13px; + width: 32px; +} + +.drawer-toggle--hamburger,.drawer-toggle--hamburger:hover { + box-shadow: 1px 1px 1px #191938; + -moz-box-shadow: 1px 1px 1px #191938; +} + +.drawer-toggle--hamburger:hover { + -webkit-box-shadow: inset 1px 1px 1px #191938; +} + +.drawer-toggle--hamburger span { + margin-top: 3px; + display: block; + width: 18px; + height: 2px; + background-color: #002145; + box-shadow: 0 1px 0 rgba(0,0,0,.25); +} + +.drawer-toggle--hamburger span:first-child { + margin-top: 0; +} + +@media screen and (min-width:998px) { + .drawer-toggle--hamburger { + display: block!important; + margin-top: 2px; + margin-right: 13px; + margin-bottom: 3px; + } +} + +@media screen and (min-width:1200px) { + .drawer-toggle--hamburger { + margin-top: 5px; + margin-right: 17px; + margin-bottom: 5px; + } +} + +#pushed-content { + position: relative; + z-index: 1; + display: block; + overflow: hidden; + transition: transform 0.125s ease; +} +#pushed-content.drawer--push-left.off-canvas-drawer--is-active { + transform: translate3D(-20rem, 0, 0); + box-shadow: 2px 0 2px rgba(0, 0, 0, .15); +} +#pushed-content.drawer--push-right.off-canvas-drawer--is-active { + transform: translate3D(20rem, 0, 0); + box-shadow: 2px 0 2px rgba(0, 0, 0, .15); +} +#off-canvas-drawer--primary { + transition: transform 0.125s ease, visibility 0.125s ease; + visibility: visible; + height: 100% !important; + width: 0; + position: fixed; + top: 0; + background-color: #686868; + display: block; + overflow: auto; +} +#off-canvas-drawer--primary.drawer--cover-left, #off-canvas-drawer--primary.drawer--push-left { + right: 0; + transform: translate3D(20rem, 0, 0); +} +#off-canvas-drawer--primary.drawer--cover-right, #off-canvas-drawer--primary.drawer--push-right { + left: 0; + transform: translate3D(-20rem, 0, 0); +} +#off-canvas-drawer--primary.off-canvas-drawer--is-animating { + width: 20rem; + z-index: 10; +} +#off-canvas-drawer--primary.off-canvas-drawer--is-active { + transform: translate3D(0, 0, 0); + z-index: 10; + width: 20rem; +} +#off-canvas-mask { + height: 100%; + width: 0; + position: fixed; + z-index: 2; + top: 0; + left: 0; + background-color: rgba(255, 255, 255, 0.5); + overflow-y: auto; + overflow-x: hidden; + text-align: center; + opacity: 0; + transition: opacity 0.125s; +} +#off-canvas-mask.off-canvas-drawer--is-active { + width: 100% !important; + opacity: 0.5; +} +@media screen and (max-width: 979px) { + .has-off-canvas-drawer #ubc7-unit-menu { + display: none; + } +} +.drawer-toggle--hamburger .off-canvas-drawer, .off-canvas-drawer a, .off-canvas-drawer .dropdown-menu a { + /* Alter CLF Navigation markup to work vertically */ + color: #fff; +} +.off-canvas-drawer .drawer__close { + background-color: #686868; + border-top: 1px solid #414141; + border-bottom: none; + border-left: none; + border-right: none; + color: #fff; + padding: 18px; + display: block; + position: relative; + text-transform: uppercase; + text-align: right; + width: 100%; +} +.off-canvas-drawer .drawer__close:hover { + background-color: #4f4f4f; +} +.off-canvas-drawer .drawer__close:focus { + background-color: #424242; +} +.off-canvas-drawer a { + border-top-style: solid; + border-top-width: 1px; + border-color: #414141; + box-shadow: none; + box-sizing: border-box; + padding: 18px; + padding-right: 0; + text-decoration: none; +} +.off-canvas-drawer a:hover { + color: #fff; + border-color: #414141; +} +.off-canvas-drawer .nav > li > a:focus, .off-canvas-drawer .nav > li > a:hover, .off-canvas-drawer .btn-group:hover > .btn, .off-canvas-drawer .btn-group > a:focus { + background-color: #4f4f4f; +} +.off-canvas-drawer .btn-group { + width: 100%; +} +.off-canvas-drawer .btn-group .dropdown-toggle { + z-index: 2; + float: none; + position: absolute; + right: 0; + top: 0; + height: 55px; + box-shadow: none; +} +.off-canvas-drawer .btn-group .dropdown-toggle:hover:after, .off-canvas-drawer .btn-group .dropdown-toggle:focus:after { + color: #fff; +} +.off-canvas-drawer .btn-group .dropdown-toggle span { + transition: all 0.3s ease; +} +.off-canvas-drawer .btn-group .dropdown-toggle:hover span { + transform: rotate(90deg); +} +.off-canvas-drawer .btn-group .dropdown-menu { + border: none; + width: 100%; + margin-top: 0; +} +.off-canvas-drawer .btn-group .dropdown-menu li { + border-bottom: none; +} +.off-canvas-drawer .btn-group .dropdown-menu a { + background-color: #828282; + padding-top: 18px; + padding-bottom: 18px; +} +.off-canvas-drawer .btn-group > a { + width: 100%; + z-index: 1; +} +.off-canvas-drawer .btn-group > .btn { + background-color: #686868; + border-left: none; + border-right: none; + border-bottom: none; + border-color: #414141; + line-height: 18px; + box-shadow: none !important; + background-image: none !important; + text-align: left; +} +.off-canvas-drawer .btn-group:hover > .dropdown-toggle { + background-color: #424242; +} +.off-canvas-drawer .btn-group.open span { + transform: rotate(90deg); + transition: all 0.3s ease; +} +.off-canvas-drawer .btn-group.open .btn.dropdown-toggle { + background-color: #4f4f4f; + border-color: #4f4f4f; +} +.off-canvas-drawer .btn-group.open > .dropdown-menu { + display: block; + position: relative; +} +.off-canvas-drawer button:focus { + outline: 0; +} diff --git a/css/navigation/navigation.sticky.css b/css/navigation/navigation.sticky.css new file mode 100644 index 0000000..9c1288e --- /dev/null +++ b/css/navigation/navigation.sticky.css @@ -0,0 +1,38 @@ +/** + * @file + * Placeholder + */ +@media screen and (min-width:980px) { + body.unit-menu-is-sticky { + padding-top: 40px; + } + + #ubc7-unit-menu.navigation-is-sticky { + position: fixed; + top: 0; + width: 100%; + } +} + +@media screen and (min-width:980px) and (min-width:1200px) { + body.unit-menu-is-sticky { + padding-top: 45px; + } +} + +@media screen and (max-width:979px) { + body.unit-area-is-sticky { + padding-top: 50px; + } + + #ubc7-unit.navigation-is-sticky { + position: fixed; + top: 0; + width: 100%; + } + + #ubc7-unit.navigation-is-sticky .btn-navbar { + margin-right: 40px; + } +} +/*# sourceMappingURL=navigation.sticky.css.map */ diff --git a/galactus.libraries.yml b/galactus.libraries.yml index 06ad465..ab2eb18 100755 --- a/galactus.libraries.yml +++ b/galactus.libraries.yml @@ -132,7 +132,39 @@ clf-secondary-navigation: clf-sticky-navigation: css: theme: - css/navigation.sticky.css: {} + css/navigation/navigation.sticky.css: {} + js: + js/navigation.sticky.js: {} + dependencies: + - core/jquery + +### Default Navigation ### +clf-default-navigation: + css: + theme: + css/navigation/navigation.default.css: {} + +### Higher Navigation ### +clf-higher-navigation: + css: + theme: + css/navigation/navigation.higher.css: {} + +### Double Navigation ### +clf-double-navigation: + css: + theme: + css/navigation/navigation.double.css: {} + +### Slide-in Navigation ### +clf-slidein-navigation: + css: + theme: + css/navigation/navigation.slidein.css: {} + js: + js/navigation.slidein.js: {} + dependencies: + - core/jquery ### Whitney Font ### clf-whitney-dev: diff --git a/galactus.theme b/galactus.theme index 2cafb96..866fe49 100755 --- a/galactus.theme +++ b/galactus.theme @@ -173,6 +173,26 @@ function galactus_preprocess_html(&$variables) { $variables['#attached']['library'][] = 'galactus/clf-secondary-navigation'; } + // Add navigation class and library. + // +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ + if (theme_get_setting('clf_navigation_placement') == 'default') { + $variables['attributes']['class'][] = 'clf-navigation-default'; + $variables['#attached']['library'][] = 'galactus/clf-default-navigation'; + } + elseif (theme_get_setting('clf_navigation_placement') == 'higher') { + $variables['attributes']['class'][] = 'clf-navigation-higher'; + $variables['#attached']['library'][] = 'galactus/clf-higher-navigation'; + } + elseif (theme_get_setting('clf_navigation_placement') == 'double') { + $variables['attributes']['class'][] = 'clf-navigation-double'; + $variables['#attached']['library'][] = 'galactus/clf-double-navigation'; + } + else { + $variables['attributes']['class'][] = 'clf-navigation-slidein'; + $variables['#attached']['library'][] = 'galactus/clf-slidein-navigation'; + } + // +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ + // Add Whitney library if set. if (theme_get_setting('clf_use_whitney') == 'dev') { $variables['#attached']['library'][] = 'galactus/clf-whitney-dev'; @@ -245,6 +265,25 @@ function galactus_preprocess_page(&$variables) { $variables['sidebar_second_class_option'] = ''; } + // Navigation options. + $variables['navigation_placement'] = theme_get_setting('clf_navigation_placement'); + if (theme_get_setting('clf_navigation_placement') == 'default') { + $variables['navigation_placement_default'] = TRUE; + } + elseif (theme_get_setting('clf_navigation_placement') == 'double') { + $variables['navigation_placement_double'] = TRUE; + } + elseif (theme_get_setting('clf_navigation_placement') == 'higher') { + $variables['navigation_placement_higher'] = TRUE; + } + else { + $variables['navigation_placement_drawer'] = TRUE; + } +// $variables['navigation_placement_drawer--push-right'] = theme_get_setting('clf_navigation_placement') == 'drawer--push-right' ? TRUE: FALSE; +// $variables['navigation_placement_drawer--cover-right'] = theme_get_setting('clf_navigation_placement') == 'drawer--cover-right' ? TRUE: FALSE; +// $variables['navigation_placement_drawer--push-left'] = theme_get_setting('clf_navigation_placement') == 'drawer--push-left' ? TRUE: FALSE; +// $variables['navigation_placement_drawer--cover-left'] = theme_get_setting('clf_navigation_placement') == 'drawer--cover-left' ? TRUE: FALSE; + // Footer options. $variables['address_option'] = theme_get_setting('clf_streetaddr'); $variables['locality_option'] = theme_get_setting('clf_locality'); diff --git a/js/navigation.slidein.js b/js/navigation.slidein.js new file mode 100644 index 0000000..4a0dd67 --- /dev/null +++ b/js/navigation.slidein.js @@ -0,0 +1,30 @@ +/* Primary Drawer Toggle */ +var pushTrigger = document.getElementsByClassName("drawer-toggle--primary"); +var pushPanel = document.getElementById("off-canvas-drawer--primary"); +var pushContent = document.getElementById("pushed-content"); +var pushMask = document.getElementById("off-canvas-mask"); +var activeClass = "off-canvas-drawer--is-active"; +var animatingClass = "off-canvas-drawer--is-animating"; +var i; +document.body.classList.add("has-off-canvas-drawer"); +for (i = 0; i < pushTrigger.length; i++) { + pushTrigger[i].addEventListener("click", function() { + document.body.classList.toggle(activeClass); + pushPanel.classList.toggle(activeClass); + pushContent.classList.toggle(activeClass); + pushMask.classList.toggle(activeClass); + document.body.classList.add(animatingClass); + pushPanel.classList.add(animatingClass); + pushContent.classList.add(animatingClass); + pushMask.classList.add(animatingClass); + }); +} +/* Old Safari requires 'webkit' prefix */ +pushPanel.addEventListener("webkitTransitionEnd", finishedAnimating); +pushPanel.addEventListener("transitionend", finishedAnimating); +function finishedAnimating() { + document.body.classList.remove(animatingClass); + pushPanel.classList.remove(animatingClass); + pushContent.classList.remove(animatingClass); + pushMask.classList.remove(animatingClass); +} diff --git a/js/navigation.sticky.js b/js/navigation.sticky.js new file mode 100644 index 0000000..a165552 --- /dev/null +++ b/js/navigation.sticky.js @@ -0,0 +1,21 @@ +window.onscroll = function() { stickyNav() }; +var navbar = document.getElementById("ubc7-unit-menu"); +var unitbar = document.getElementById("ubc7-unit"); +var stickynav = navbar.offsetTop; +var stickyunit = unitbar.offsetTop; +function stickyNav() { + if (window.pageYOffset >= stickynav) { + navbar.classList.add("navigation-is-sticky"); + document.body.classList.add("unit-menu-is-sticky"); + } else { + navbar.classList.remove("navigation-is-sticky"); + document.body.classList.remove("unit-menu-is-sticky"); + }; + if (window.pageYOffset >= stickyunit) { + unitbar.classList.add("navigation-is-sticky"); + document.body.classList.add("unit-area-is-sticky"); + } else { + unitbar.classList.remove("navigation-is-sticky"); + document.body.classList.remove("unit-area-is-sticky"); + } +} diff --git a/sass/navigation.slidein.scss b/sass/navigation.slidein.scss new file mode 100644 index 0000000..9e7f9b7 --- /dev/null +++ b/sass/navigation.slidein.scss @@ -0,0 +1,213 @@ +// VARIABLES +$transition-speed: .125s; +$transition-easing: ease; +$hide-desktop-trigger-below: 979px; +$drawer--width: 20rem; +$drawer--padding: 18px; +$drawer--z-index: 10; +$mask--z-index: 2; +$pushed-content--z-index: 1; + +$mask--background: rgba(255, 255, 255, 0.5); +$drawer--background-color: #686868; +$drawer--background-color--hover: darken($drawer--background-color, 10%); +$drawer--background-color--focus: darken($drawer--background-color, 15%); +$drawer--border-color: #414141; +$drawer--inner--color: #fff; +$drawer--inner--font-size: 16px; + +@import 'components/button-clf-hamburger'; + +#pushed-content { + position: relative; + z-index: $pushed-content--z-index; + display: block; + overflow: hidden; + //transform: translate3D(0, 0, 0); + transition: transform $transition-speed $transition-easing; +} +#pushed-content.drawer--push-left.off-canvas-drawer--is-active { + transform: translate3D(-$drawer--width, 0, 0); + box-shadow: 2px 0 2px rgba(0, 0, 0, .15); +} +#pushed-content.drawer--push-right.off-canvas-drawer--is-active { + transform: translate3D($drawer--width, 0, 0); + box-shadow: 2px 0 2px rgba(0, 0, 0, .15); +} +#off-canvas-drawer--primary { + transition: transform $transition-speed $transition-easing, visibility $transition-speed $transition-easing; + visibility: visible; + height: 100% !important; + width: 0; + position: fixed; + top: 0; + background-color: $drawer--background-color; + display: block; + overflow: auto; +} +#off-canvas-drawer--primary.drawer--cover-left, +#off-canvas-drawer--primary.drawer--push-left { + right: 0; + transform: translate3D($drawer--width, 0, 0); +} +#off-canvas-drawer--primary.drawer--cover-right, +#off-canvas-drawer--primary.drawer--push-right { + left: 0; + transform: translate3D(-$drawer--width, 0, 0); +} +#off-canvas-drawer--primary.off-canvas-drawer--is-animating { + width: $drawer--width; + z-index: $drawer--z-index; +} +#off-canvas-drawer--primary.off-canvas-drawer--is-active { + transform: translate3D(0, 0, 0); + z-index: $drawer--z-index; + width: $drawer--width; +} +#off-canvas-mask { + height: 100%; + width: 0; + position: fixed; + z-index: $mask--z-index; + top: 0; + left: 0; + background-color: $mask--background; + overflow-y: auto; + overflow-x: hidden; + text-align: center; + opacity: 0; + transition: opacity $transition-speed; +} +#off-canvas-mask.off-canvas-drawer--is-active { + width: 100% !important; + opacity: .5; +} + +@media screen and (max-width: $hide-desktop-trigger-below) { + .has-off-canvas-drawer #ubc7-unit-menu { + display: none; + } +} + +// Custom Trigger +.drawer-toggle--hamburger + + +/* Alter CLF Navigation markup to work vertically */ +.off-canvas-drawer, +.off-canvas-drawer a, +.off-canvas-drawer .dropdown-menu a { + color: $drawer--inner--color; +} +.off-canvas-drawer { + .drawer__close { + background-color: $drawer--background-color; + border-top: 1px solid $drawer--border-color; + border-bottom: none; + border-left: none; + border-right: none; + color: $drawer--inner--color; + padding: $drawer--padding; + display: block; + position: relative; + text-transform: uppercase; + text-align: right; + width: 100%; + &:hover { + background-color: $drawer--background-color--hover; + } + &:focus { + background-color: $drawer--background-color--focus; + } + } + a { + border-top-style: solid; + border-top-width: 1px; + border-color: $drawer--border-color; + box-shadow: none; + box-sizing: border-box; + padding: $drawer--padding; + padding-right: 0; + text-decoration: none; + &:hover { + color: $drawer--inner--color; + border-color: $drawer--border-color; + } + } + .nav>li>a:focus, + .nav>li>a:hover, + .btn-group:hover>.btn, + .btn-group>a:focus { + background-color: $drawer--background-color--hover; + } + .btn-group { + width: 100%; + .dropdown-toggle { + &:hover:after, + &:focus:after { + color: $drawer--inner--color; + } + z-index: 2; + float: none; + position: absolute; + right: 0; + top: 0; + height: 55px; + box-shadow: none; + span { + transition: all .3s ease; + } + &:hover span { + transform: rotate(90deg); + } + } + .dropdown-menu { + border: none; + width: 100%; + margin-top: 0; + li { + border-bottom: none; + } + a { + background-color: lighten($drawer--background-color, 10%); + padding-top: $drawer--padding; + padding-bottom: $drawer--padding; + } + } + > a { + width: 100%; + z-index: 1; + } + > .btn { + background-color: $drawer--background-color; + border-left: none; + border-right: none; + border-bottom: none; + border-color: $drawer--border-color; + line-height: 18px; + box-shadow: none !important; + background-image: none !important; + text-align: left; + } + &:hover>.dropdown-toggle{ + background-color: $drawer--background-color--focus; + } + &.open { + span { + transform: rotate(90deg); + transition: all .3s ease; + } + .btn.dropdown-toggle { + background-color: $drawer--background-color--hover; + border-color: $drawer--background-color--hover; + } + > .dropdown-menu { + display: block; + position: relative; + } + } + } + button:focus { + outline: 0; + } +} diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig index 0e4e9da..965cc5e 100755 --- a/templates/layout/page.html.twig +++ b/templates/layout/page.html.twig @@ -72,269 +72,295 @@ {% set sidebarfirst_attributes = create_attribute() %} {% set sidebarsecond_attributes = create_attribute() %} - -{% if layout_option == '' %} -
+{% if navigation_placement_drawer %} +
{% endif %} - -
- - {% endif %} -
- - {% if page.prefooter %} - - {% endif %} - - {% if mobilenav_option == '' %} - - - - {% endif %} -
-
-{% if layout_option == '' %} -
+ + {% if page.prefooter %} + + {% endif %} + + {% if mobilenav_option == '' %} + + + + {% endif %} +
+ + +
+ {% if layout_option == 'full' or 'fluid' %} +
+ {% endif %} +
+ Back to top
+
+ {% if layout_option == 'full' or 'fluid' %} +
+ {% endif %} +
+ + +
+ {% if layout_option == '' %} +
+{% endif %} +{% if navigation_placement_drawer %} + {% endif %} + +{% if navigation_placement_drawer %} + +
+ + {{ page.slidein_menu }} +
+
+ +{% endif %} + diff --git a/theme-settings.php b/theme-settings.php index 552596d..9e48d06 100755 --- a/theme-settings.php +++ b/theme-settings.php @@ -353,7 +353,6 @@ function galactus_form_system_theme_settings_alter(&$form, FormStateInterface &$ '#title' => t('Navigation Settings'), '#group' => 'clf', ]; - $form['navigation']['clf_navigation_placement'] = [ '#type' => 'select', '#title' => t('Choose the type of primary navigation that should be used on this website. | NOT YET ACTIVE'), @@ -363,7 +362,10 @@ function galactus_form_system_theme_settings_alter(&$form, FormStateInterface &$ 'default' => t('Default CLF - Horizontal'), 'double' => t('Default CLF - Horizontal, Two Rows'), 'higher' => t('Default CLF - Horizontal, Double Height'), - 'slidein' => t('Right Slidein Drawer'), + 'drawer--push-left' => t('Left Push Drawer'), + 'drawer--cover-left' => t('Left Cover Drawer'), + 'drawer--push-right' => t('Right Push Drawer'), + 'drawer--cover-right' => t('Right Cover Drawer'), ], ]; From ceb1d51a54e57a159437f1954f428dc96ee873d4 Mon Sep 17 00:00:00 2001 From: Alice Date: Mon, 26 Mar 2018 16:54:13 -0700 Subject: [PATCH 04/27] Update navigation.slidein.scss --- sass/navigation.slidein.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/sass/navigation.slidein.scss b/sass/navigation.slidein.scss index 9e7f9b7..bd79b6f 100644 --- a/sass/navigation.slidein.scss +++ b/sass/navigation.slidein.scss @@ -16,6 +16,22 @@ $drawer--border-color: #414141; $drawer--inner--color: #fff; $drawer--inner--font-size: 16px; +#button--slide-in { + float:right; + color:#000; + border:none; + background-color:rgba(0, 0, 0, 0); + font-family: Arial,Sans-Serif; + padding:10px; + font-size:14px; + line-height: 1.75em!important; + outline: 0; + &:hover { + background-color: #002145!important; + color: #fff!important; + } +} + @import 'components/button-clf-hamburger'; #pushed-content { From 3c3e144009cc0a2fa491326bb3dc89a7260b23ad Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Thu, 29 Mar 2018 15:49:54 -0700 Subject: [PATCH 05/27] Remove jQuery dependency --- galactus.info.yml | 1 + galactus.libraries.yml | 2 -- templates/layout/page.html.twig | 2 +- 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/galactus.info.yml b/galactus.info.yml index 8e66130..1bfc878 100755 --- a/galactus.info.yml +++ b/galactus.info.yml @@ -29,3 +29,4 @@ regions: sidebar_second: 'Sidebar second' secondary_content: 'Secondary Content' prefooter: 'Pre-Footer' + drawer: 'Off Canvas Drawer' diff --git a/galactus.libraries.yml b/galactus.libraries.yml index ab2eb18..05d998f 100755 --- a/galactus.libraries.yml +++ b/galactus.libraries.yml @@ -163,8 +163,6 @@ clf-slidein-navigation: css/navigation/navigation.slidein.css: {} js: js/navigation.slidein.js: {} - dependencies: - - core/jquery ### Whitney Font ### clf-whitney-dev: diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig index 965cc5e..394179f 100755 --- a/templates/layout/page.html.twig +++ b/templates/layout/page.html.twig @@ -358,7 +358,7 @@
- {{ page.slidein_menu }} + {{ page.drawer }}
From 1b0ca4e0d91b9e5da0dfa809b940ad89fd1e6c60 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Thu, 29 Mar 2018 16:05:27 -0700 Subject: [PATCH 06/27] Add more variables; remove commented lines --- galactus.theme | 6 ----- sass/navigation.slidein.scss | 44 ++++++++++++++++++++++-------------- 2 files changed, 27 insertions(+), 23 deletions(-) diff --git a/galactus.theme b/galactus.theme index 866fe49..822d608 100755 --- a/galactus.theme +++ b/galactus.theme @@ -174,7 +174,6 @@ function galactus_preprocess_html(&$variables) { } // Add navigation class and library. - // +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ if (theme_get_setting('clf_navigation_placement') == 'default') { $variables['attributes']['class'][] = 'clf-navigation-default'; $variables['#attached']['library'][] = 'galactus/clf-default-navigation'; @@ -191,7 +190,6 @@ function galactus_preprocess_html(&$variables) { $variables['attributes']['class'][] = 'clf-navigation-slidein'; $variables['#attached']['library'][] = 'galactus/clf-slidein-navigation'; } - // +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ // Add Whitney library if set. if (theme_get_setting('clf_use_whitney') == 'dev') { @@ -279,10 +277,6 @@ function galactus_preprocess_page(&$variables) { else { $variables['navigation_placement_drawer'] = TRUE; } -// $variables['navigation_placement_drawer--push-right'] = theme_get_setting('clf_navigation_placement') == 'drawer--push-right' ? TRUE: FALSE; -// $variables['navigation_placement_drawer--cover-right'] = theme_get_setting('clf_navigation_placement') == 'drawer--cover-right' ? TRUE: FALSE; -// $variables['navigation_placement_drawer--push-left'] = theme_get_setting('clf_navigation_placement') == 'drawer--push-left' ? TRUE: FALSE; -// $variables['navigation_placement_drawer--cover-left'] = theme_get_setting('clf_navigation_placement') == 'drawer--cover-left' ? TRUE: FALSE; // Footer options. $variables['address_option'] = theme_get_setting('clf_streetaddr'); diff --git a/sass/navigation.slidein.scss b/sass/navigation.slidein.scss index bd79b6f..0b1a0ab 100644 --- a/sass/navigation.slidein.scss +++ b/sass/navigation.slidein.scss @@ -1,4 +1,5 @@ // VARIABLES +$box-shadow: 2px 0 2px rgba(0, 0, 0, .15); $transition-speed: .125s; $transition-easing: ease; $hide-desktop-trigger-below: 979px; @@ -7,6 +8,8 @@ $drawer--padding: 18px; $drawer--z-index: 10; $mask--z-index: 2; $pushed-content--z-index: 1; +$rotation-transition: all .3s ease; +$rotation-transform: rotate(90deg); $mask--background: rgba(255, 255, 255, 0.5); $drawer--background-color: #686868; @@ -15,20 +18,28 @@ $drawer--background-color--focus: darken($drawer--background-color, 15%); $drawer--border-color: #414141; $drawer--inner--color: #fff; $drawer--inner--font-size: 16px; +$drawer-button--background-color: rgba(0, 0, 0, 0); +$drawer-button--background-color--hover: #002145!important; +$drawer-button--color: #000; +$drawer-button--color--hover: #fff!important; +$drawer-button--font-family: Arial, Sans-Serif; +$drawer-button--font-size: 14px; +$drawer-button--line-height: 1.75em!important; +$drawer-button--padding: 10px; #button--slide-in { - float:right; - color:#000; - border:none; - background-color:rgba(0, 0, 0, 0); - font-family: Arial,Sans-Serif; - padding:10px; - font-size:14px; - line-height: 1.75em!important; + float: right; + color: $drawer-button--color; + border: none; + background-color: $drawer-button--background-color; + font-family: $drawer-button--font-family; + padding: $drawer-button--padding; + font-size: $drawer-button--font-size; + line-height: $drawer-button--line-height; outline: 0; &:hover { - background-color: #002145!important; - color: #fff!important; + background-color: $drawer-button--background-color--hover; + color: $drawer-button--color--hover; } } @@ -39,16 +50,15 @@ $drawer--inner--font-size: 16px; z-index: $pushed-content--z-index; display: block; overflow: hidden; - //transform: translate3D(0, 0, 0); transition: transform $transition-speed $transition-easing; } #pushed-content.drawer--push-left.off-canvas-drawer--is-active { transform: translate3D(-$drawer--width, 0, 0); - box-shadow: 2px 0 2px rgba(0, 0, 0, .15); + box-shadow: $box-shadow; } #pushed-content.drawer--push-right.off-canvas-drawer--is-active { transform: translate3D($drawer--width, 0, 0); - box-shadow: 2px 0 2px rgba(0, 0, 0, .15); + box-shadow: $box-shadow; } #off-canvas-drawer--primary { transition: transform $transition-speed $transition-easing, visibility $transition-speed $transition-easing; @@ -171,10 +181,10 @@ $drawer--inner--font-size: 16px; height: 55px; box-shadow: none; span { - transition: all .3s ease; + transition: $rotation-transition; } &:hover span { - transform: rotate(90deg); + transform: $rotation-transform; } } .dropdown-menu { @@ -210,8 +220,8 @@ $drawer--inner--font-size: 16px; } &.open { span { - transform: rotate(90deg); - transition: all .3s ease; + transform: $rotation-transform; + transition: $rotation-transition; } .btn.dropdown-toggle { background-color: $drawer--background-color--hover; From 773f3bd83cb511b7b62b39df0c37591641538fa1 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Thu, 29 Mar 2018 16:08:46 -0700 Subject: [PATCH 07/27] Remove not yet active tag --- theme-settings.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/theme-settings.php b/theme-settings.php index 9e48d06..78a813e 100755 --- a/theme-settings.php +++ b/theme-settings.php @@ -355,7 +355,7 @@ function galactus_form_system_theme_settings_alter(&$form, FormStateInterface &$ ]; $form['navigation']['clf_navigation_placement'] = [ '#type' => 'select', - '#title' => t('Choose the type of primary navigation that should be used on this website. | NOT YET ACTIVE'), + '#title' => t('Choose the type of primary navigation that should be used on this website.'), '#prefix' => t('

General Navigation Options

'), '#default_value' => theme_get_setting('clf_navigation_placement'), '#options' => [ @@ -371,7 +371,7 @@ function galactus_form_system_theme_settings_alter(&$form, FormStateInterface &$ $form['navigation']['clf_navigation_sticky'] = [ '#type' => 'checkbox', - '#title' => t('Make the default CLF navigation sticky | NOT YET ACTIVE'), + '#title' => t('Make the default CLF navigation sticky.'), '#description' => t("If you'd like the primary navigation to be 'sticky' (stay on top of window when scrolling downward), select this option."), '#default_value' => theme_get_setting('clf_navigation_sticky'), ]; From 8ea5f9c058a54d639d9c30839e76fd86d59d1bb6 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Thu, 29 Mar 2018 16:18:21 -0700 Subject: [PATCH 08/27] Rename drawer button; remove inline style --- css/navigation/navigation.slidein.css | 5 +++-- sass/navigation.slidein.scss | 12 +++++++----- templates/layout/page.html.twig | 2 +- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/css/navigation/navigation.slidein.css b/css/navigation/navigation.slidein.css index c57615f..490d4ce 100644 --- a/css/navigation/navigation.slidein.css +++ b/css/navigation/navigation.slidein.css @@ -1,5 +1,6 @@ -#button--slide-in { +#drawer-button { float:right; + margin-right: 17px; color:#000; border:none; background-color:rgba(0, 0, 0, 0); @@ -10,7 +11,7 @@ outline: 0; } -#button--slide-in:hover { +#drawer-button:hover { background-color: #002145!important; color: #fff!important; } diff --git a/sass/navigation.slidein.scss b/sass/navigation.slidein.scss index 0b1a0ab..137e23f 100644 --- a/sass/navigation.slidein.scss +++ b/sass/navigation.slidein.scss @@ -25,18 +25,20 @@ $drawer-button--color--hover: #fff!important; $drawer-button--font-family: Arial, Sans-Serif; $drawer-button--font-size: 14px; $drawer-button--line-height: 1.75em!important; +$drawer-button--margin-right: 17px; $drawer-button--padding: 10px; -#button--slide-in { - float: right; - color: $drawer-button--color; - border: none; +#drawer-button { background-color: $drawer-button--background-color; + border: none; + color: $drawer-button--color; + float: right; font-family: $drawer-button--font-family; - padding: $drawer-button--padding; font-size: $drawer-button--font-size; line-height: $drawer-button--line-height; + margin-right: $drawer-button--margin-right; outline: 0; + padding: $drawer-button--padding; &:hover { background-color: $drawer-button--background-color--hover; color: $drawer-button--color--hover; diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig index 394179f..a4a38f5 100755 --- a/templates/layout/page.html.twig +++ b/templates/layout/page.html.twig @@ -185,7 +185,7 @@ {% if navigation_placement_drawer %} - From 5bc8d06be5ce5e0ea923896c1a0bdd409d320dfb Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Thu, 29 Mar 2018 16:21:03 -0700 Subject: [PATCH 09/27] Remove unnecessary jQuery dependency --- galactus.libraries.yml | 2 -- 1 file changed, 2 deletions(-) diff --git a/galactus.libraries.yml b/galactus.libraries.yml index 05d998f..6a0e41b 100755 --- a/galactus.libraries.yml +++ b/galactus.libraries.yml @@ -135,8 +135,6 @@ clf-sticky-navigation: css/navigation/navigation.sticky.css: {} js: js/navigation.sticky.js: {} - dependencies: - - core/jquery ### Default Navigation ### clf-default-navigation: From d47fb8045e61afc7494109364f82fe3202f19136 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Tue, 3 Apr 2018 16:29:34 -0700 Subject: [PATCH 10/27] Add hamburger.scss file; fix overflow issue --- css/navigation/navigation.slidein.css | 42 ++++++++------------ sass/_button-clf-hamburger.scss | 56 +++++++++++++++++++++++++++ sass/navigation.slidein.scss | 4 +- 3 files changed, 74 insertions(+), 28 deletions(-) create mode 100755 sass/_button-clf-hamburger.scss diff --git a/css/navigation/navigation.slidein.css b/css/navigation/navigation.slidein.css index 490d4ce..30c673e 100644 --- a/css/navigation/navigation.slidein.css +++ b/css/navigation/navigation.slidein.css @@ -1,21 +1,3 @@ -#drawer-button { - float:right; - margin-right: 17px; - color:#000; - border:none; - background-color:rgba(0, 0, 0, 0); - font-family: Arial,Sans-Serif; - padding:10px; - font-size:14px; - line-height: 1.75em!important; - outline: 0; -} - -#drawer-button:hover { - background-color: #002145!important; - color: #fff!important; -} - .drawer-toggle--hamburger { background-color: #fff; -webkit-box-shadow: 1px 1px 1px #191938; @@ -24,16 +6,13 @@ padding: 11px 0 0 13px; width: 32px; } - .drawer-toggle--hamburger,.drawer-toggle--hamburger:hover { box-shadow: 1px 1px 1px #191938; -moz-box-shadow: 1px 1px 1px #191938; } - .drawer-toggle--hamburger:hover { -webkit-box-shadow: inset 1px 1px 1px #191938; } - .drawer-toggle--hamburger span { margin-top: 3px; display: block; @@ -42,11 +21,9 @@ background-color: #002145; box-shadow: 0 1px 0 rgba(0,0,0,.25); } - .drawer-toggle--hamburger span:first-child { margin-top: 0; } - @media screen and (min-width:998px) { .drawer-toggle--hamburger { display: block!important; @@ -55,7 +32,6 @@ margin-bottom: 3px; } } - @media screen and (min-width:1200px) { .drawer-toggle--hamburger { margin-top: 5px; @@ -63,12 +39,26 @@ margin-bottom: 5px; } } - +#drawer-button { + background-color: rgba(0, 0, 0, 0); + border: none; + color: #000; + float: right; + font-family: Arial, Sans-Serif; + font-size: 14px; + line-height: 1.75em !important; + margin-right: 17px; + outline: 0; + padding: 10px; +} +#drawer-button:hover { + background-color: #002145 !important; + color: #fff !important; +} #pushed-content { position: relative; z-index: 1; display: block; - overflow: hidden; transition: transform 0.125s ease; } #pushed-content.drawer--push-left.off-canvas-drawer--is-active { diff --git a/sass/_button-clf-hamburger.scss b/sass/_button-clf-hamburger.scss new file mode 100755 index 0000000..f06dd7a --- /dev/null +++ b/sass/_button-clf-hamburger.scss @@ -0,0 +1,56 @@ +// ----------------------------------------------------------------------------- +// This file contains all styles related to the hamburger button component. +// ----------------------------------------------------------------------------- +// BUTTONS +$toggle--background: #fff; +$toggle--color: #002145; +$toggle--shadow-color: #191938; +$toggle--bar-height: 2px; +$toggle--bar-width: 18px; +$toggle--bar-spacing: 3px; + + +.drawer-toggle--hamburger { + background-color: $toggle--background; + box-shadow: 1px 1px 1px $toggle--shadow-color; + -moz-box-shadow: 1px 1px 1px $toggle--shadow-color; + -webkit-box-shadow: 1px 1px 1px $toggle--shadow-color; + float: right; + height: 24px; + padding: 11px 0 0 13px; + width: 32px; + &:hover { + box-shadow: 1px 1px 1px $toggle--shadow-color; + -moz-box-shadow: 1px 1px 1px $toggle--shadow-color; + -webkit-box-shadow: inset 1px 1px 1px $toggle--shadow-color; + } + span { + margin-top: $toggle--bar-spacing; + display: block; + width: $toggle--bar-width; + height: $toggle--bar-height; + background-color: $toggle--color; + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + &:first-child { + margin-top: 0; + } + } +} + +@media screen and (min-width: 998px) { + .drawer-toggle--hamburger { + display: block !important; + margin-top: 2px; + margin-right: 13px; + margin-bottom: 3px; + } +} +@media screen and (min-width: 1200px) { + .drawer-toggle--hamburger { + margin-top: 5px; + margin-right: 17px; + margin-bottom: 5px; + } +} diff --git a/sass/navigation.slidein.scss b/sass/navigation.slidein.scss index 137e23f..2f83ccf 100644 --- a/sass/navigation.slidein.scss +++ b/sass/navigation.slidein.scss @@ -45,13 +45,13 @@ $drawer-button--padding: 10px; } } -@import 'components/button-clf-hamburger'; +@import 'button-clf-hamburger'; #pushed-content { position: relative; z-index: $pushed-content--z-index; display: block; - overflow: hidden; + //overflow: hidden; transition: transform $transition-speed $transition-easing; } #pushed-content.drawer--push-left.off-canvas-drawer--is-active { From 4f2a0a99caefb51c43a87e3c8ce03617ebc3e60d Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Tue, 3 Apr 2018 16:46:56 -0700 Subject: [PATCH 11/27] Give default value to navigation_placement_drawer --- galactus.theme | 1 + 1 file changed, 1 insertion(+) diff --git a/galactus.theme b/galactus.theme index 822d608..9aba36d 100755 --- a/galactus.theme +++ b/galactus.theme @@ -264,6 +264,7 @@ function galactus_preprocess_page(&$variables) { } // Navigation options. + $variables['navigation_placement_drawer'] = FALSE; $variables['navigation_placement'] = theme_get_setting('clf_navigation_placement'); if (theme_get_setting('clf_navigation_placement') == 'default') { $variables['navigation_placement_default'] = TRUE; From fb42c5fd32900e1e207c9c73dc5762a7dfa2cedf Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Wed, 4 Apr 2018 09:34:08 -0700 Subject: [PATCH 12/27] Change color, direction of ubc7-arrow --- templates/navigation/menu--main.html.twig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/navigation/menu--main.html.twig b/templates/navigation/menu--main.html.twig index cf84fff..ddbce04 100755 --- a/templates/navigation/menu--main.html.twig +++ b/templates/navigation/menu--main.html.twig @@ -50,9 +50,9 @@
{{ link(item.title, item.url, item.attributes.addClass('btn')) }} - + {% else %} - + {{ link(item.title, item.url, { 'class':['navbar-link']}) }} {% endif %} {% if item.below %} From 41406fddb3c36f00dd747ae76db3a866e9b4e79c Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Wed, 4 Apr 2018 10:01:59 -0700 Subject: [PATCH 13/27] Set default value as 'default --- config/install/galactus.settings.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/config/install/galactus.settings.yml b/config/install/galactus.settings.yml index 8e44786..6397106 100755 --- a/config/install/galactus.settings.yml +++ b/config/install/galactus.settings.yml @@ -42,6 +42,7 @@ clf_social_youtube: '' clf_searchdomain: '' clf_searchlabel: '' clf_content_row_class: 'expand row-fluid' +clf_navigation_placement: 'default' clf_no_sidebar_class: 'span12' clf_one_sidebar_class: 'span9' clf_one_sidebar_class_sidebar: 'span3' From e1ba6751bb9fccaa8a0dda31b5dc490bd4caab99 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Wed, 4 Apr 2018 10:38:46 -0700 Subject: [PATCH 14/27] Set all nav placement options to false as default --- galactus.theme | 3 +++ 1 file changed, 3 insertions(+) diff --git a/galactus.theme b/galactus.theme index 9aba36d..c44aa63 100755 --- a/galactus.theme +++ b/galactus.theme @@ -264,6 +264,9 @@ function galactus_preprocess_page(&$variables) { } // Navigation options. + $variables['navigation_placement_default'] = FALSE; + $variables['navigation_placement_double'] = FALSE; + $variables['navigation_placement_higher'] = FALSE; $variables['navigation_placement_drawer'] = FALSE; $variables['navigation_placement'] = theme_get_setting('clf_navigation_placement'); if (theme_get_setting('clf_navigation_placement') == 'default') { From f5c0f4a03042293e3537bc77e3a053e2e1ec6f41 Mon Sep 17 00:00:00 2001 From: "O'Toole, James" Date: Wed, 4 Apr 2018 13:02:13 -0700 Subject: [PATCH 15/27] Remove unused navigation options, update sticky styles, update asset location, update drawer theme functions --- css/ckeditor-iframe.css | 2 +- css/clf.social-icons.css | 2 +- css/local-tasks.css | 2 +- css/maintenance-page.css | 2 +- css/navigation.secondary.css | 6 -- css/{navigation => }/navigation.slidein.css | 113 ++++++++++++++------ css/{navigation => }/navigation.sticky.css | 39 +++---- css/navigation/navigation.default.css | 6 -- css/navigation/navigation.double.css | 6 -- css/navigation/navigation.higher.css | 12 --- galactus.libraries.yml | 22 +--- galactus.theme | 23 +--- sass/navigation.sticky.scss | 48 +++++++++ theme-settings.php | 2 - 14 files changed, 160 insertions(+), 125 deletions(-) delete mode 100644 css/navigation.secondary.css rename css/{navigation => }/navigation.slidein.css (82%) rename css/{navigation => }/navigation.sticky.css (61%) delete mode 100644 css/navigation/navigation.default.css delete mode 100644 css/navigation/navigation.double.css delete mode 100644 css/navigation/navigation.higher.css diff --git a/css/ckeditor-iframe.css b/css/ckeditor-iframe.css index 7c33f50..7eb2acb 100755 --- a/css/ckeditor-iframe.css +++ b/css/ckeditor-iframe.css @@ -36,4 +36,4 @@ text-align: right; } -/*# sourceMappingURL=ckeditor-iframe.css.map */ +/*# sourceMappingURL=ckeditor-iframe.css.map */ \ No newline at end of file diff --git a/css/clf.social-icons.css b/css/clf.social-icons.css index 70f69bc..f699aa5 100644 --- a/css/clf.social-icons.css +++ b/css/clf.social-icons.css @@ -44,4 +44,4 @@ background-image: url("../img/social-icons/gplus.svg"); } -/*# sourceMappingURL=clf.social-icons.css.map */ +/*# sourceMappingURL=clf.social-icons.css.map */ \ No newline at end of file diff --git a/css/local-tasks.css b/css/local-tasks.css index 056e949..574e70f 100755 --- a/css/local-tasks.css +++ b/css/local-tasks.css @@ -97,4 +97,4 @@ ul.secondary a .tab { line-height: 18px; } -/*# sourceMappingURL=local-tasks.css.map */ +/*# sourceMappingURL=local-tasks.css.map */ \ No newline at end of file diff --git a/css/maintenance-page.css b/css/maintenance-page.css index 673df12..3f3de0a 100755 --- a/css/maintenance-page.css +++ b/css/maintenance-page.css @@ -92,4 +92,4 @@ body.maintenance-page { } } -/*# sourceMappingURL=maintenance-page.css.map */ +/*# sourceMappingURL=maintenance-page.css.map */ \ No newline at end of file diff --git a/css/navigation.secondary.css b/css/navigation.secondary.css deleted file mode 100644 index 234db59..0000000 --- a/css/navigation.secondary.css +++ /dev/null @@ -1,6 +0,0 @@ -/** - * @file - * Placeholder - */ - -/*# sourceMappingURL=navigation.secondary.css.map */ diff --git a/css/navigation/navigation.slidein.css b/css/navigation.slidein.css similarity index 82% rename from css/navigation/navigation.slidein.css rename to css/navigation.slidein.css index 30c673e..5889dae 100644 --- a/css/navigation/navigation.slidein.css +++ b/css/navigation.slidein.css @@ -1,74 +1,87 @@ +#drawer-button { + background-color: transparent; + border: none; + color: #000; + float: right; + font-family: Arial, Sans-Serif; + font-size: 14px; + line-height: 1.75em !important; + margin-right: 17px; + outline: 0; + padding: 10px; +} + +#drawer-button:hover { + background-color: #002145 !important; + color: #fff !important; +} + .drawer-toggle--hamburger { background-color: #fff; + box-shadow: 1px 1px 1px #191938; + -moz-box-shadow: 1px 1px 1px #191938; -webkit-box-shadow: 1px 1px 1px #191938; float: right; height: 24px; padding: 11px 0 0 13px; width: 32px; } -.drawer-toggle--hamburger,.drawer-toggle--hamburger:hover { + +.drawer-toggle--hamburger:hover { box-shadow: 1px 1px 1px #191938; -moz-box-shadow: 1px 1px 1px #191938; -} -.drawer-toggle--hamburger:hover { -webkit-box-shadow: inset 1px 1px 1px #191938; } + .drawer-toggle--hamburger span { margin-top: 3px; display: block; width: 18px; height: 2px; background-color: #002145; - box-shadow: 0 1px 0 rgba(0,0,0,.25); + -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); } + .drawer-toggle--hamburger span:first-child { margin-top: 0; } -@media screen and (min-width:998px) { + +@media screen and (min-width: 998px) { .drawer-toggle--hamburger { - display: block!important; + display: block !important; margin-top: 2px; margin-right: 13px; margin-bottom: 3px; } } -@media screen and (min-width:1200px) { + +@media screen and (min-width: 1200px) { .drawer-toggle--hamburger { margin-top: 5px; margin-right: 17px; margin-bottom: 5px; } } -#drawer-button { - background-color: rgba(0, 0, 0, 0); - border: none; - color: #000; - float: right; - font-family: Arial, Sans-Serif; - font-size: 14px; - line-height: 1.75em !important; - margin-right: 17px; - outline: 0; - padding: 10px; -} -#drawer-button:hover { - background-color: #002145 !important; - color: #fff !important; -} + #pushed-content { position: relative; z-index: 1; display: block; transition: transform 0.125s ease; } + #pushed-content.drawer--push-left.off-canvas-drawer--is-active { transform: translate3D(-20rem, 0, 0); - box-shadow: 2px 0 2px rgba(0, 0, 0, .15); + box-shadow: 2px 0 2px rgba(0, 0, 0, 0.15); } + #pushed-content.drawer--push-right.off-canvas-drawer--is-active { transform: translate3D(20rem, 0, 0); - box-shadow: 2px 0 2px rgba(0, 0, 0, .15); + box-shadow: 2px 0 2px rgba(0, 0, 0, 0.15); } + #off-canvas-drawer--primary { transition: transform 0.125s ease, visibility 0.125s ease; visibility: visible; @@ -80,23 +93,30 @@ display: block; overflow: auto; } -#off-canvas-drawer--primary.drawer--cover-left, #off-canvas-drawer--primary.drawer--push-left { + +#off-canvas-drawer--primary.drawer--cover-left, +#off-canvas-drawer--primary.drawer--push-left { right: 0; transform: translate3D(20rem, 0, 0); } -#off-canvas-drawer--primary.drawer--cover-right, #off-canvas-drawer--primary.drawer--push-right { + +#off-canvas-drawer--primary.drawer--cover-right, +#off-canvas-drawer--primary.drawer--push-right { left: 0; transform: translate3D(-20rem, 0, 0); } + #off-canvas-drawer--primary.off-canvas-drawer--is-animating { width: 20rem; z-index: 10; } + #off-canvas-drawer--primary.off-canvas-drawer--is-active { transform: translate3D(0, 0, 0); z-index: 10; width: 20rem; } + #off-canvas-mask { height: 100%; width: 0; @@ -111,19 +131,25 @@ opacity: 0; transition: opacity 0.125s; } + #off-canvas-mask.off-canvas-drawer--is-active { width: 100% !important; - opacity: 0.5; + opacity: .5; } + @media screen and (max-width: 979px) { .has-off-canvas-drawer #ubc7-unit-menu { display: none; } } -.drawer-toggle--hamburger .off-canvas-drawer, .off-canvas-drawer a, .off-canvas-drawer .dropdown-menu a { - /* Alter CLF Navigation markup to work vertically */ + +.drawer-toggle--hamburger +.off-canvas-drawer, +.off-canvas-drawer a, +.off-canvas-drawer .dropdown-menu a { color: #fff; } + .off-canvas-drawer .drawer__close { background-color: #686868; border-top: 1px solid #414141; @@ -138,12 +164,15 @@ text-align: right; width: 100%; } + .off-canvas-drawer .drawer__close:hover { background-color: #4f4f4f; } + .off-canvas-drawer .drawer__close:focus { background-color: #424242; } + .off-canvas-drawer a { border-top-style: solid; border-top-width: 1px; @@ -154,16 +183,23 @@ padding-right: 0; text-decoration: none; } + .off-canvas-drawer a:hover { color: #fff; border-color: #414141; } -.off-canvas-drawer .nav > li > a:focus, .off-canvas-drawer .nav > li > a:hover, .off-canvas-drawer .btn-group:hover > .btn, .off-canvas-drawer .btn-group > a:focus { + +.off-canvas-drawer .nav > li > a:focus, +.off-canvas-drawer .nav > li > a:hover, +.off-canvas-drawer .btn-group:hover > .btn, +.off-canvas-drawer .btn-group > a:focus { background-color: #4f4f4f; } + .off-canvas-drawer .btn-group { width: 100%; } + .off-canvas-drawer .btn-group .dropdown-toggle { z-index: 2; float: none; @@ -173,32 +209,40 @@ height: 55px; box-shadow: none; } + .off-canvas-drawer .btn-group .dropdown-toggle:hover:after, .off-canvas-drawer .btn-group .dropdown-toggle:focus:after { color: #fff; } + .off-canvas-drawer .btn-group .dropdown-toggle span { transition: all 0.3s ease; } + .off-canvas-drawer .btn-group .dropdown-toggle:hover span { transform: rotate(90deg); } + .off-canvas-drawer .btn-group .dropdown-menu { border: none; width: 100%; margin-top: 0; } + .off-canvas-drawer .btn-group .dropdown-menu li { border-bottom: none; } + .off-canvas-drawer .btn-group .dropdown-menu a { background-color: #828282; padding-top: 18px; padding-bottom: 18px; } + .off-canvas-drawer .btn-group > a { width: 100%; z-index: 1; } + .off-canvas-drawer .btn-group > .btn { background-color: #686868; border-left: none; @@ -210,21 +254,28 @@ background-image: none !important; text-align: left; } + .off-canvas-drawer .btn-group:hover > .dropdown-toggle { background-color: #424242; } + .off-canvas-drawer .btn-group.open span { transform: rotate(90deg); transition: all 0.3s ease; } + .off-canvas-drawer .btn-group.open .btn.dropdown-toggle { background-color: #4f4f4f; border-color: #4f4f4f; } + .off-canvas-drawer .btn-group.open > .dropdown-menu { display: block; position: relative; } + .off-canvas-drawer button:focus { outline: 0; } + +/*# sourceMappingURL=navigation.slidein.css.map */ \ No newline at end of file diff --git a/css/navigation/navigation.sticky.css b/css/navigation.sticky.css similarity index 61% rename from css/navigation/navigation.sticky.css rename to css/navigation.sticky.css index 9c1288e..a99212a 100644 --- a/css/navigation/navigation.sticky.css +++ b/css/navigation.sticky.css @@ -2,37 +2,40 @@ * @file * Placeholder */ -@media screen and (min-width:980px) { - body.unit-menu-is-sticky { - padding-top: 40px; +@media screen and (max-width: 979px) { + body.unit-area-is-sticky { + padding-top: 50px; } - - #ubc7-unit-menu.navigation-is-sticky { + #ubc7-unit.navigation-is-sticky { position: fixed; top: 0; width: 100%; } -} - -@media screen and (min-width:980px) and (min-width:1200px) { - body.unit-menu-is-sticky { - padding-top: 45px; + body.unit-area-is-sticky #ubc7-unit-menu { + position: fixed; + top: 50px; + width: 100%; + } + #ubc7-unit.navigation-is-sticky .btn-navbar { + margin-right: 40px; } } -@media screen and (max-width:979px) { - body.unit-area-is-sticky { - padding-top: 50px; +@media screen and (min-width: 980px) { + body.unit-menu-is-sticky { + padding-top: 40px; } - - #ubc7-unit.navigation-is-sticky { + #ubc7-unit-menu.navigation-is-sticky { position: fixed; top: 0; width: 100%; } +} - #ubc7-unit.navigation-is-sticky .btn-navbar { - margin-right: 40px; +@media screen and (min-width: 980px) and (min-width: 1200px) { + body.unit-menu-is-sticky { + padding-top: 45px; } } -/*# sourceMappingURL=navigation.sticky.css.map */ + +/*# sourceMappingURL=navigation.sticky.css.map */ \ No newline at end of file diff --git a/css/navigation/navigation.default.css b/css/navigation/navigation.default.css deleted file mode 100644 index 3ff36f1..0000000 --- a/css/navigation/navigation.default.css +++ /dev/null @@ -1,6 +0,0 @@ -/** - * @file - * Placeholder - */ - -/*# sourceMappingURL=navigation.sticky.css.map */ diff --git a/css/navigation/navigation.double.css b/css/navigation/navigation.double.css deleted file mode 100644 index 3ff36f1..0000000 --- a/css/navigation/navigation.double.css +++ /dev/null @@ -1,6 +0,0 @@ -/** - * @file - * Placeholder - */ - -/*# sourceMappingURL=navigation.sticky.css.map */ diff --git a/css/navigation/navigation.higher.css b/css/navigation/navigation.higher.css deleted file mode 100644 index d3648de..0000000 --- a/css/navigation/navigation.higher.css +++ /dev/null @@ -1,12 +0,0 @@ -/** - * @file - * Placeholder - */ -#ubc7-unit-menu .navbar-inner { - min-height: 80px!important; -} -.navbar-link { - padding: 27px 10px!important; -} - -/*# sourceMappingURL=navigation.sticky.css.map */ diff --git a/galactus.libraries.yml b/galactus.libraries.yml index 6a0e41b..5de75f4 100755 --- a/galactus.libraries.yml +++ b/galactus.libraries.yml @@ -132,33 +132,15 @@ clf-secondary-navigation: clf-sticky-navigation: css: theme: - css/navigation/navigation.sticky.css: {} + css/navigation.sticky.css: {} js: js/navigation.sticky.js: {} -### Default Navigation ### -clf-default-navigation: - css: - theme: - css/navigation/navigation.default.css: {} - -### Higher Navigation ### -clf-higher-navigation: - css: - theme: - css/navigation/navigation.higher.css: {} - -### Double Navigation ### -clf-double-navigation: - css: - theme: - css/navigation/navigation.double.css: {} - ### Slide-in Navigation ### clf-slidein-navigation: css: theme: - css/navigation/navigation.slidein.css: {} + css/navigation.slidein.css: {} js: js/navigation.slidein.js: {} diff --git a/galactus.theme b/galactus.theme index c44aa63..51394d1 100755 --- a/galactus.theme +++ b/galactus.theme @@ -175,16 +175,8 @@ function galactus_preprocess_html(&$variables) { // Add navigation class and library. if (theme_get_setting('clf_navigation_placement') == 'default') { + $variables['navigation_placement'] = FALSE; $variables['attributes']['class'][] = 'clf-navigation-default'; - $variables['#attached']['library'][] = 'galactus/clf-default-navigation'; - } - elseif (theme_get_setting('clf_navigation_placement') == 'higher') { - $variables['attributes']['class'][] = 'clf-navigation-higher'; - $variables['#attached']['library'][] = 'galactus/clf-higher-navigation'; - } - elseif (theme_get_setting('clf_navigation_placement') == 'double') { - $variables['attributes']['class'][] = 'clf-navigation-double'; - $variables['#attached']['library'][] = 'galactus/clf-double-navigation'; } else { $variables['attributes']['class'][] = 'clf-navigation-slidein'; @@ -264,22 +256,13 @@ function galactus_preprocess_page(&$variables) { } // Navigation options. - $variables['navigation_placement_default'] = FALSE; - $variables['navigation_placement_double'] = FALSE; - $variables['navigation_placement_higher'] = FALSE; - $variables['navigation_placement_drawer'] = FALSE; - $variables['navigation_placement'] = theme_get_setting('clf_navigation_placement'); if (theme_get_setting('clf_navigation_placement') == 'default') { $variables['navigation_placement_default'] = TRUE; - } - elseif (theme_get_setting('clf_navigation_placement') == 'double') { - $variables['navigation_placement_double'] = TRUE; - } - elseif (theme_get_setting('clf_navigation_placement') == 'higher') { - $variables['navigation_placement_higher'] = TRUE; + $variables['navigation_placement'] = FALSE; } else { $variables['navigation_placement_drawer'] = TRUE; + $variables['navigation_placement'] = theme_get_setting('clf_navigation_placement'); } // Footer options. diff --git a/sass/navigation.sticky.scss b/sass/navigation.sticky.scss index f899bf6..99dd64d 100644 --- a/sass/navigation.sticky.scss +++ b/sass/navigation.sticky.scss @@ -2,3 +2,51 @@ * @file * Placeholder */ + + // VARIABLES +$mq-large-desktop-min: 1200px; +$mq-desktop-min: 980px; +$mq-mobile-max: 979px; +$menu-height-mobile: 50px; +$menu-height-desktop: 40px; +$menu-height-large-desktop: 45px; + + +@media screen and (max-width: $mq-mobile-max) { + body.unit-area-is-sticky { + padding-top: $menu-height-mobile; + } + + #ubc7-unit.navigation-is-sticky { + position: fixed; + top: 0; + width: 100%; + } + body.unit-area-is-sticky #ubc7-unit-menu { + position: fixed; + top: $menu-height-mobile; + width: 100%; + } + + #ubc7-unit.navigation-is-sticky .btn-navbar { + margin-right: $menu-height-desktop; + } +} + +@media screen and (min-width: $mq-desktop-min) { + body.unit-menu-is-sticky { + padding-top: $menu-height-desktop; + } + + #ubc7-unit-menu.navigation-is-sticky { + position: fixed; + top: 0; + width: 100%; + } +} + +@media screen and (min-width: $mq-desktop-min) and (min-width: $mq-large-desktop-min) { + body.unit-menu-is-sticky { + padding-top: $menu-height-large-desktop; + } +} diff --git a/theme-settings.php b/theme-settings.php index 78a813e..3ec0515 100755 --- a/theme-settings.php +++ b/theme-settings.php @@ -360,8 +360,6 @@ function galactus_form_system_theme_settings_alter(&$form, FormStateInterface &$ '#default_value' => theme_get_setting('clf_navigation_placement'), '#options' => [ 'default' => t('Default CLF - Horizontal'), - 'double' => t('Default CLF - Horizontal, Two Rows'), - 'higher' => t('Default CLF - Horizontal, Double Height'), 'drawer--push-left' => t('Left Push Drawer'), 'drawer--cover-left' => t('Left Cover Drawer'), 'drawer--push-right' => t('Right Push Drawer'), From b816e0f1e204b93c7379f9b7c84d53aee0dc19aa Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Thu, 5 Apr 2018 15:37:16 -0700 Subject: [PATCH 16/27] Denote unpublished pages --- css/clf.drupal.css | 15 ++++++++++++++- galactus.theme | 10 +++++++++- templates/content/node.html.twig | 3 +++ templates/layout/page.html.twig | 6 +++--- 4 files changed, 29 insertions(+), 5 deletions(-) diff --git a/css/clf.drupal.css b/css/clf.drupal.css index d08a432..d27d056 100644 --- a/css/clf.drupal.css +++ b/css/clf.drupal.css @@ -101,6 +101,19 @@ textarea, clear: both; } +.node--unpublished div.unpublished { + height: 0; + overflow: visible; + color: #d8d8d8; + font-size: 4.6875em; + line-height: 1; + font-family: Impact, "Arial Narrow", Helvetica, sans-serif; + font-weight: bold; + text-transform: uppercase; + text-align: center; + word-wrap: break-word +} + /* Remove the overly-opinionated CLF footer style */ footer { background-color: inherit; @@ -174,4 +187,4 @@ a.close:hover { border-color: #00162f; } -/*# sourceMappingURL=clf.drupal.css.map */ \ No newline at end of file +/*# sourceMappingURL=clf.drupal.css.map */ diff --git a/galactus.theme b/galactus.theme index 51394d1..56f0b39 100755 --- a/galactus.theme +++ b/galactus.theme @@ -313,7 +313,15 @@ function galactus_preprocess_node(&$variables) { if ($variables['teaser'] || !empty($variables['content']['comments']['comment_form'])) { unset($variables['content']['links']['comment']['#links']['comment-add']); } - + //.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- + if (!$variables['status']) { + $variables['classes_array'][] = 'node-unpublished'; + $variables['unpublished'] = TRUE; + } + else { + $variables['unpublished'] = FALSE; + } + //.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- // Add node--node_type--view_mode.html.twig suggestions. $variables['theme_hook_suggestions'][] = 'node__' . $variables['elements']['#node']->bundle() . '__' . $variables['view_mode']; diff --git a/templates/content/node.html.twig b/templates/content/node.html.twig index 40b670c..b5f4a01 100755 --- a/templates/content/node.html.twig +++ b/templates/content/node.html.twig @@ -102,6 +102,9 @@ {{ content|without('links') }} + {% if unpublished %} +
Unpublished
+ {% endif %}
{% if content.links %} diff --git a/templates/layout/page.html.twig b/templates/layout/page.html.twig index a4a38f5..24da4e5 100755 --- a/templates/layout/page.html.twig +++ b/templates/layout/page.html.twig @@ -121,7 +121,7 @@ {% endif %}
@@ -131,7 +131,7 @@
- The University of British Columbia + The University of British Columbia {% if campus_option == 'vancouver' %} Vancouver Campus {% endif %} @@ -324,7 +324,7 @@ {% if layout_option == 'full' or 'fluid' %}
{% endif %} - + {% if layout_option == 'full' or 'fluid' %}
From bb42b3d22fa2dc4be34ec64b510a0db711893e24 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Fri, 6 Apr 2018 12:07:04 -0700 Subject: [PATCH 17/27] Add overflow:hidden property when drawer is active/animating --- css/navigation.slidein.css | 8 +++++++- sass/navigation.slidein.scss | 8 +++++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/css/navigation.slidein.css b/css/navigation.slidein.css index 5889dae..61ceb8f 100644 --- a/css/navigation.slidein.css +++ b/css/navigation.slidein.css @@ -65,10 +65,16 @@ } } +body.off-canvas-drawer--is-animating, +body.off-canvas-drawer--is-active { + overflow: hidden !important; +} + #pushed-content { position: relative; z-index: 1; display: block; +/* overflow: hidden; */ transition: transform 0.125s ease; } @@ -278,4 +284,4 @@ outline: 0; } -/*# sourceMappingURL=navigation.slidein.css.map */ \ No newline at end of file +/*# sourceMappingURL=navigation.slidein.css.map */ diff --git a/sass/navigation.slidein.scss b/sass/navigation.slidein.scss index 2f83ccf..b7aa05b 100644 --- a/sass/navigation.slidein.scss +++ b/sass/navigation.slidein.scss @@ -47,11 +47,17 @@ $drawer-button--padding: 10px; @import 'button-clf-hamburger'; +body { + &.off-canvas-drawer--is-animating, + &.off-canvas-drawer--is-active { + overflow: hidden !important; + } +} #pushed-content { position: relative; z-index: $pushed-content--z-index; display: block; - //overflow: hidden; +// overflow: hidden; transition: transform $transition-speed $transition-easing; } #pushed-content.drawer--push-left.off-canvas-drawer--is-active { From b8ebfc44d712c1fe3d31f3d84effb38a0620a435 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Fri, 6 Apr 2018 13:57:33 -0700 Subject: [PATCH 18/27] Fix padding when both admin tool bar & drawer are active --- css/navigation.slidein.css | 4 ++++ sass/navigation.slidein.scss | 3 +++ 2 files changed, 7 insertions(+) diff --git a/css/navigation.slidein.css b/css/navigation.slidein.css index 61ceb8f..d90390f 100644 --- a/css/navigation.slidein.css +++ b/css/navigation.slidein.css @@ -65,6 +65,10 @@ } } +body.toolbar-tray-open.toolbar-vertical.toolbar-fixed.off-canvas-drawer--is-active { + margin-left:0 !important; +} + body.off-canvas-drawer--is-animating, body.off-canvas-drawer--is-active { overflow: hidden !important; diff --git a/sass/navigation.slidein.scss b/sass/navigation.slidein.scss index b7aa05b..110c3fd 100644 --- a/sass/navigation.slidein.scss +++ b/sass/navigation.slidein.scss @@ -47,6 +47,9 @@ $drawer-button--padding: 10px; @import 'button-clf-hamburger'; +body.toolbar-tray-open.toolbar-vertical.toolbar-fixed.off-canvas-drawer--is-active { + margin-left:0 !important; +} body { &.off-canvas-drawer--is-animating, &.off-canvas-drawer--is-active { From f0768b5d418ee26d10b6a2188494557618e09917 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Mon, 9 Apr 2018 10:02:38 -0700 Subject: [PATCH 19/27] Fix line-height for min-width: 1200px --- css/navigation.slidein.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/css/navigation.slidein.css b/css/navigation.slidein.css index d90390f..05da521 100644 --- a/css/navigation.slidein.css +++ b/css/navigation.slidein.css @@ -5,7 +5,6 @@ float: right; font-family: Arial, Sans-Serif; font-size: 14px; - line-height: 1.75em !important; margin-right: 17px; outline: 0; padding: 10px; @@ -63,6 +62,9 @@ margin-right: 17px; margin-bottom: 5px; } + #drawer-button { + line-height: 1.75em !important; + } } body.toolbar-tray-open.toolbar-vertical.toolbar-fixed.off-canvas-drawer--is-active { From 592090d3b2c6f823fb213f603cde36b9b1232188 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Mon, 9 Apr 2018 10:32:55 -0700 Subject: [PATCH 20/27] Place unpublished mark to center, behind content --- css/clf.drupal.css | 11 ++++++++++- sass/_system.theme.local.scss | 20 ++++++++++++++++++++ templates/content/node.html.twig | 2 +- 3 files changed, 31 insertions(+), 2 deletions(-) diff --git a/css/clf.drupal.css b/css/clf.drupal.css index d27d056..17290af 100644 --- a/css/clf.drupal.css +++ b/css/clf.drupal.css @@ -111,7 +111,16 @@ textarea, font-weight: bold; text-transform: uppercase; text-align: center; - word-wrap: break-word + word-wrap: break-word; + position: absolute; + top: 50%; + left: 0; + right: 0; + bottom: 0; +} + +.node--unpublished div.field__item { + position: relative; } /* Remove the overly-opinionated CLF footer style */ diff --git a/sass/_system.theme.local.scss b/sass/_system.theme.local.scss index 8a8e55d..853c199 100644 --- a/sass/_system.theme.local.scss +++ b/sass/_system.theme.local.scss @@ -25,3 +25,23 @@ ul.menu { ul.menu a.is-active { color: inherit; } +.node--unpublished div.unpublished { + height: 0; + overflow: visible; + color: #d8d8d8; + font-size: 4.6875em; + line-height: 1; + font-family: Impact, "Arial Narrow", Helvetica, sans-serif; + font-weight: bold; + text-transform: uppercase; + text-align: center; + word-wrap: break-word; + position: absolute; + top: 50%; + left: 0; + right: 0; + bottom: 0; +} +.node--unpublished div.field__item { + position: relative; +} diff --git a/templates/content/node.html.twig b/templates/content/node.html.twig index b5f4a01..75ff854 100755 --- a/templates/content/node.html.twig +++ b/templates/content/node.html.twig @@ -101,10 +101,10 @@ {% endif %} - {{ content|without('links') }} {% if unpublished %}
Unpublished
{% endif %} + {{ content|without('links') }}
{% if content.links %} From ae9a4580213c41bbc62ca752324e55609822d3aa Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Tue, 10 Apr 2018 08:48:24 -0700 Subject: [PATCH 21/27] Fix arrow color, direction --- templates/navigation/menu--main.html.twig | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/navigation/menu--main.html.twig b/templates/navigation/menu--main.html.twig index 0632473..152a178 100755 --- a/templates/navigation/menu--main.html.twig +++ b/templates/navigation/menu--main.html.twig @@ -45,7 +45,7 @@
{{ link(item.title, item.url, item.attributes.addClass('btn')) }} - + {% else %} {{ link(item.title, item.url, {'class': ['navbar-link']}) }} From d12e85c446eb66edaad5127eeda6979b40ae3a4b Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Tue, 10 Apr 2018 10:12:30 -0700 Subject: [PATCH 22/27] Place main nav with default config to drawer region --- .../install/block.block.galactus_drawer.yml | 27 +++++++++++++++++++ galactus.theme | 2 -- 2 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 config/install/block.block.galactus_drawer.yml diff --git a/config/install/block.block.galactus_drawer.yml b/config/install/block.block.galactus_drawer.yml new file mode 100644 index 0000000..712676e --- /dev/null +++ b/config/install/block.block.galactus_drawer.yml @@ -0,0 +1,27 @@ +#Defines settings for the Main Menu block + +langcode: en +status: true +dependencies: + config: + - system.menu.main + module: + - system + theme: + - galactus +id: galactus_drawer +theme: galactus +region: drawer +weight: 0 +provider: null +plugin: 'system_menu_block:main' +settings: + id: 'system_menu_block:main' + label: 'Main navigation' + provider: system + label_display: '0' + cache: + max_age: -1 + level: 1 + depth: 2 +visibility: { } diff --git a/galactus.theme b/galactus.theme index 56f0b39..d667140 100755 --- a/galactus.theme +++ b/galactus.theme @@ -313,7 +313,6 @@ function galactus_preprocess_node(&$variables) { if ($variables['teaser'] || !empty($variables['content']['comments']['comment_form'])) { unset($variables['content']['links']['comment']['#links']['comment-add']); } - //.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- if (!$variables['status']) { $variables['classes_array'][] = 'node-unpublished'; $variables['unpublished'] = TRUE; @@ -321,7 +320,6 @@ function galactus_preprocess_node(&$variables) { else { $variables['unpublished'] = FALSE; } - //.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.-.- // Add node--node_type--view_mode.html.twig suggestions. $variables['theme_hook_suggestions'][] = 'node__' . $variables['elements']['#node']->bundle() . '__' . $variables['view_mode']; From 526b2d7438aa481a1d25c23b2c24103d06712d10 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Tue, 10 Apr 2018 10:20:10 -0700 Subject: [PATCH 23/27] Change arrow color/direction in drawer region --- css/navigation.slidein.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/css/navigation.slidein.css b/css/navigation.slidein.css index 05da521..5d48629 100644 --- a/css/navigation.slidein.css +++ b/css/navigation.slidein.css @@ -162,6 +162,10 @@ body.off-canvas-drawer--is-active { color: #fff; } +.off-canvas-drawer .ubc7-arrow { + background-position: -1113px -227px !important; +} + .off-canvas-drawer .drawer__close { background-color: #686868; border-top: 1px solid #414141; From 103bc4de444a1693d391a21a47437db477110964 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Tue, 10 Apr 2018 12:32:34 -0700 Subject: [PATCH 24/27] Unpublished mark only when node is unpublished --- galactus.theme | 8 +------- templates/content/node.html.twig | 2 +- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/galactus.theme b/galactus.theme index d667140..51394d1 100755 --- a/galactus.theme +++ b/galactus.theme @@ -313,13 +313,7 @@ function galactus_preprocess_node(&$variables) { if ($variables['teaser'] || !empty($variables['content']['comments']['comment_form'])) { unset($variables['content']['links']['comment']['#links']['comment-add']); } - if (!$variables['status']) { - $variables['classes_array'][] = 'node-unpublished'; - $variables['unpublished'] = TRUE; - } - else { - $variables['unpublished'] = FALSE; - } + // Add node--node_type--view_mode.html.twig suggestions. $variables['theme_hook_suggestions'][] = 'node__' . $variables['elements']['#node']->bundle() . '__' . $variables['view_mode']; diff --git a/templates/content/node.html.twig b/templates/content/node.html.twig index 75ff854..2b16fb7 100755 --- a/templates/content/node.html.twig +++ b/templates/content/node.html.twig @@ -101,7 +101,7 @@ {% endif %} - {% if unpublished %} + {% if not node.isPublished() %}
Unpublished
{% endif %} {{ content|without('links') }} From 5fc6ffcbf832bd46216f1f0ed9247274159ead1f Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Fri, 27 Apr 2018 11:56:04 -0700 Subject: [PATCH 25/27] Fix call to undefined function on maintenance page; attach Drupal behaviors --- css/maintenance-page.css | 2 +- galactus.theme | 3 -- js/navigation.slidein.js | 67 ++++++++++++++++++++++------------------ js/navigation.sticky.js | 48 ++++++++++++++++------------ 4 files changed, 66 insertions(+), 54 deletions(-) diff --git a/css/maintenance-page.css b/css/maintenance-page.css index 3f3de0a..673df12 100755 --- a/css/maintenance-page.css +++ b/css/maintenance-page.css @@ -92,4 +92,4 @@ body.maintenance-page { } } -/*# sourceMappingURL=maintenance-page.css.map */ \ No newline at end of file +/*# sourceMappingURL=maintenance-page.css.map */ diff --git a/galactus.theme b/galactus.theme index 51394d1..9ebf384 100755 --- a/galactus.theme +++ b/galactus.theme @@ -299,9 +299,6 @@ function galactus_preprocess_maintenance_page(&$variables) { // Galactus has custom styling for the maintenance page. $variables['#attached']['library'][] = 'galactus/maintenance_page'; - - // Set the options that apply to both page and maintenance page. - _galactus_process_page($variables); } /** diff --git a/js/navigation.slidein.js b/js/navigation.slidein.js index 4a0dd67..6d2575a 100644 --- a/js/navigation.slidein.js +++ b/js/navigation.slidein.js @@ -1,30 +1,37 @@ -/* Primary Drawer Toggle */ -var pushTrigger = document.getElementsByClassName("drawer-toggle--primary"); -var pushPanel = document.getElementById("off-canvas-drawer--primary"); -var pushContent = document.getElementById("pushed-content"); -var pushMask = document.getElementById("off-canvas-mask"); -var activeClass = "off-canvas-drawer--is-active"; -var animatingClass = "off-canvas-drawer--is-animating"; -var i; -document.body.classList.add("has-off-canvas-drawer"); -for (i = 0; i < pushTrigger.length; i++) { - pushTrigger[i].addEventListener("click", function() { - document.body.classList.toggle(activeClass); - pushPanel.classList.toggle(activeClass); - pushContent.classList.toggle(activeClass); - pushMask.classList.toggle(activeClass); - document.body.classList.add(animatingClass); - pushPanel.classList.add(animatingClass); - pushContent.classList.add(animatingClass); - pushMask.classList.add(animatingClass); - }); -} -/* Old Safari requires 'webkit' prefix */ -pushPanel.addEventListener("webkitTransitionEnd", finishedAnimating); -pushPanel.addEventListener("transitionend", finishedAnimating); -function finishedAnimating() { - document.body.classList.remove(animatingClass); - pushPanel.classList.remove(animatingClass); - pushContent.classList.remove(animatingClass); - pushMask.classList.remove(animatingClass); -} +(function ($) { + + Drupal.behaviors.galactusDrawer = { + attach: function(context, settings) { + // Primary drawer toggle. + var pushTrigger = document.getElementsByClassName("drawer-toggle--primary"); + var pushPanel = document.getElementById("off-canvas-drawer--primary"); + var pushContent = document.getElementById("pushed-content"); + var pushMask = document.getElementById("off-canvas-mask"); + var activeClass = "off-canvas-drawer--is-active"; + var animatingClass = "off-canvas-drawer--is-animating"; + var i; + document.body.classList.add("has-off-canvas-drawer"); + for (i = 0; i < pushTrigger.length; i++) { + pushTrigger[i].addEventListener("click", function() { + document.body.classList.toggle(activeClass); + pushPanel.classList.toggle(activeClass); + pushContent.classList.toggle(activeClass); + pushMask.classList.toggle(activeClass); + document.body.classList.add(animatingClass); + pushPanel.classList.add(animatingClass); + pushContent.classList.add(animatingClass); + pushMask.classList.add(animatingClass); + }); + } + // Old Safari requires 'webkit' prefix. + pushPanel.addEventListener("webkitTransitionEnd", finishedAnimating); + pushPanel.addEventListener("transitionend", finishedAnimating); + function finishedAnimating() { + document.body.classList.remove(animatingClass); + pushPanel.classList.remove(animatingClass); + pushContent.classList.remove(animatingClass); + pushMask.classList.remove(animatingClass); + } + } + } +}(jQuery)); diff --git a/js/navigation.sticky.js b/js/navigation.sticky.js index a165552..fbb11b9 100644 --- a/js/navigation.sticky.js +++ b/js/navigation.sticky.js @@ -1,21 +1,29 @@ -window.onscroll = function() { stickyNav() }; -var navbar = document.getElementById("ubc7-unit-menu"); -var unitbar = document.getElementById("ubc7-unit"); -var stickynav = navbar.offsetTop; -var stickyunit = unitbar.offsetTop; -function stickyNav() { - if (window.pageYOffset >= stickynav) { - navbar.classList.add("navigation-is-sticky"); - document.body.classList.add("unit-menu-is-sticky"); - } else { - navbar.classList.remove("navigation-is-sticky"); - document.body.classList.remove("unit-menu-is-sticky"); - }; - if (window.pageYOffset >= stickyunit) { - unitbar.classList.add("navigation-is-sticky"); - document.body.classList.add("unit-area-is-sticky"); - } else { - unitbar.classList.remove("navigation-is-sticky"); - document.body.classList.remove("unit-area-is-sticky"); +(function ($) { + + Drupal.behaviors.galactusStickyNav = { + attach: function(context, settings) { + window.onscroll = function() { stickyNav() }; + var navbar = document.getElementById("ubc7-unit-menu"); + var unitbar = document.getElementById("ubc7-unit"); + var stickynav = navbar.offsetTop; + var stickyunit = unitbar.offsetTop; + function stickyNav() { + if (window.pageYOffset >= stickynav) { + navbar.classList.add("navigation-is-sticky"); + document.body.classList.add("unit-menu-is-sticky"); + } else { + navbar.classList.remove("navigation-is-sticky"); + document.body.classList.remove("unit-menu-is-sticky"); + }; + if (window.pageYOffset >= stickyunit) { + unitbar.classList.add("navigation-is-sticky"); + document.body.classList.add("unit-area-is-sticky"); + } else { + unitbar.classList.remove("navigation-is-sticky"); + document.body.classList.remove("unit-area-is-sticky"); + } + } + } } -} + +}(jQuery)); From 2f69574efd86de492af37c76e05854b7b39d87e1 Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Fri, 27 Apr 2018 12:21:40 -0700 Subject: [PATCH 26/27] Add core/drupal dependencies to fix Drupal not defined error for anonymous users --- galactus.libraries.yml | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/galactus.libraries.yml b/galactus.libraries.yml index 5de75f4..bf71e24 100755 --- a/galactus.libraries.yml +++ b/galactus.libraries.yml @@ -135,6 +135,8 @@ clf-sticky-navigation: css/navigation.sticky.css: {} js: js/navigation.sticky.js: {} + dependencies: + - core/drupal ### Slide-in Navigation ### clf-slidein-navigation: @@ -143,6 +145,9 @@ clf-slidein-navigation: css/navigation.slidein.css: {} js: js/navigation.slidein.js: {} + dependencies: + - core/drupal + ### Whitney Font ### clf-whitney-dev: From a11e6b0583e1a8ade0774b010030eeb8867f78bb Mon Sep 17 00:00:00 2001 From: alice-0-kim Date: Thu, 24 May 2018 11:45:37 -0700 Subject: [PATCH 27/27] add debouncing to onscroll event --- js/navigation.slidein.js | 4 ++-- js/navigation.sticky.js | 34 +++++++++++++++++++++++++++------- 2 files changed, 29 insertions(+), 9 deletions(-) diff --git a/js/navigation.slidein.js b/js/navigation.slidein.js index 6d2575a..8488703 100644 --- a/js/navigation.slidein.js +++ b/js/navigation.slidein.js @@ -1,4 +1,4 @@ -(function ($) { +(function () { Drupal.behaviors.galactusDrawer = { attach: function(context, settings) { @@ -34,4 +34,4 @@ } } } -}(jQuery)); +}()); diff --git a/js/navigation.sticky.js b/js/navigation.sticky.js index fbb11b9..e964a22 100644 --- a/js/navigation.sticky.js +++ b/js/navigation.sticky.js @@ -1,29 +1,49 @@ -(function ($) { +(function () { Drupal.behaviors.galactusStickyNav = { attach: function(context, settings) { - window.onscroll = function() { stickyNav() }; var navbar = document.getElementById("ubc7-unit-menu"); var unitbar = document.getElementById("ubc7-unit"); var stickynav = navbar.offsetTop; var stickyunit = unitbar.offsetTop; - function stickyNav() { - if (window.pageYOffset >= stickynav) { + var latestKnownScrollY = 0; + var ticking = false; + + function onScroll() { + latestKnownScrollY = window.scrollY; + requestTick(); + } + + function requestTick() { + if(!ticking) { + window.requestAnimationFrame(update); + } + ticking = true; + } + + function update() { + ticking = false; + var currentScrollY = latestKnownScrollY; + + //toggle classes + if (currentScrollY >= stickynav) { navbar.classList.add("navigation-is-sticky"); document.body.classList.add("unit-menu-is-sticky"); } else { navbar.classList.remove("navigation-is-sticky"); document.body.classList.remove("unit-menu-is-sticky"); }; - if (window.pageYOffset >= stickyunit) { + if (currentScrollY >= stickyunit) { unitbar.classList.add("navigation-is-sticky"); document.body.classList.add("unit-area-is-sticky"); } else { unitbar.classList.remove("navigation-is-sticky"); document.body.classList.remove("unit-area-is-sticky"); } + } + // window.requestAnimationFrame(update); + window.addEventListener('scroll', onScroll, false); } } - -}(jQuery)); +}());