Skip to content

Decoupled flyout region #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 44 commits into
base: develop
Choose a base branch
from
Open

Decoupled flyout region #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
44 commits
Select commit Hold shift + click to select a range
718f00f
Update drawer help text to indicate that including a menu block with …
darkodevubc Jun 21, 2018
04557f8
Moved sticky option down into the clf_navigation_option section
darkodevubc Jun 21, 2018
8d3b545
Removed duplicate clf_navoption and clf_secondarynavoption defined la…
darkodevubc Jun 21, 2018
adc3faa
Targetting btn-navbar:first-child with right margin so it does not mo…
darkodevubc Jun 21, 2018
20eeb4d
Making the secondary sticky on mobile
darkodevubc Jun 21, 2018
ed4695e
Adjusting position of secondary drop-down nav on mobile
darkodevubc Jun 21, 2018
56ed870
Moved secondary so it is also sticky
darkodevubc Jun 21, 2018
e011f9a
Remove whitespace in theme-settings.php
darkodevubc Jun 21, 2018
a5a1046
Increase z-index of sticky nav
darkodevubc Jun 21, 2018
22b00dc
Adjusted margin of secondary on mobile when it was already done - rev…
darkodevubc Jun 21, 2018
af67041
Adding navigation.sticky.less and adjusting z-index of sticky nav
darkodevubc Jun 21, 2018
04f2ea5
Adjusted z-index of sticky nav after adding navigation.sticky.less
darkodevubc Jun 21, 2018
194163c
Add flyout region to .info
darkodevubc Jun 22, 2018
62f96ca
Add flyout option to theme settings
darkodevubc Jun 22, 2018
637776a
Add flyout js and css in template.php
darkodevubc Jun 22, 2018
0a11c80
Add flyout region to page.tpl.php
darkodevubc Jun 22, 2018
fad3f89
Add off.canvas.flyout.js
darkodevubc Jun 22, 2018
a20d368
Add off.canvas.flyout.less
darkodevubc Jun 22, 2018
a6f5ad7
Add off.canvas.flyout.css
darkodevubc Jun 22, 2018
4255816
Fixed conflict with both drawer and flyout using $container_attribute…
darkodevubc Jun 22, 2018
07675fe
Fixed issue with primary nav not hiding when used in drawer and issue…
darkodevubc Jun 22, 2018
8020a23
A few fixes for secondary nav behaviour when drawer and flyout are en…
darkodevubc Jun 22, 2018
e0f89fb
Reverted conversion of drawer CSS to LESS because some stuff broke
darkodevubc Jun 22, 2018
d95f1e7
Providing dark blue flyout bg boilerplate
darkodevubc Jun 22, 2018
8391e45
Moved flyout button oiut of nav structure so it can be z-indexed belo…
darkodevubc Jun 27, 2018
fcdfafa
Added bg to main menu items that do not expand so that flyout menu do…
darkodevubc Jun 27, 2018
c59c018
Flyout button z-index only needs to be 1
darkodevubc Jun 27, 2018
d63cb66
Cleaned CSS files
darkodevubc Jun 27, 2018
9729f48
Adding .DS_Store to gitignore
darkodevubc Jul 4, 2018
63d5d0d
Fixes for drawer and made the mobile drop-down nav scrollable like th…
darkodevubc Jul 4, 2018
e62e38b
flyout changes for develop merge
darkodevubc Jul 4, 2018
5e5c5c1
ubc7-unit-menu transparent background only on mobile where its height…
darkodevubc Jul 4, 2018
028d634
#ubc7-unit-menu should not have a bg on it because it hides everythin…
darkodevubc Jul 4, 2018
155045e
Removed unconditional height 100% on mobile drop-down menu because it…
darkodevubc Jul 5, 2018
1bbff81
Fixed merge conflict and uncommented $fluidcontainerstart because gra…
darkodevubc Jul 6, 2018
0532616
Error finding includes/template-ubc-clf-elements.inc so we add theme …
darkodevubc Jul 6, 2018
657fc4a
Updated help text for clf_use_primary_menu_in_drawer
darkodevubc Jul 6, 2018
d9701d0
Changed to drupal_get_path from path_to_theme
darkodevubc Jan 21, 2019
4835546
Removed git conflict
darkodevubc Jan 21, 2019
9b7c2d5
Removed toggle behaviour in flyout js that was killed by webform cond…
darkodevubc Jan 21, 2019
c4ff0fd
Merge branch 'flyout' of github.com:darko-hrgovic/Megatron into flyout
darkodevubc Jan 21, 2019
50034db
Cleaned up whitespace and formatting
darkodevubc Jan 21, 2019
88feb8e
Checking stickynav > 0 because modal close button adds numerous zero …
darkodevubc Jan 28, 2019
bb2875a
Whitespace and formatting
darkodevubc Jan 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,5 @@ node_modules/

# Postcss-fied CSS files
postcss/

.DS_Store
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd suggest moving some of the clean-up changes to their own issue so they can be reviewed as one thing.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Understood.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've pushed the changes wrt to your comments, Joel. Thanks very much for reviewing.

660 changes: 659 additions & 1 deletion css/clf_drupal.css
View file
Open in desktop

Large diffs are not rendered by default.

33 changes: 24 additions & 9 deletions css/navigation.sticky.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

189 changes: 104 additions & 85 deletions css/off.canvas.drawer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,43 @@
body.drawer-contains-primary-nav #ubc7-unit-navigation.collapse {
display: none;
}
#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;
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;
outline: 0;
}

#drawer-button:hover {
background-color: #002145;
color: #fff;
}
#drawer-button:hover .icon-bar {
background-color: #f5f5f5;
}

#drawer-button .icon-bar {
display: block;
width: 18px;
height: 2px;
margin-top: 2px;
background-color: #000;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-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);
}
.icon-bar#drawer-button + .icon-bar {
margin-top: 3px;
}
#drawer-button .hamburger__elem {
display: inline-block;
}
.drawer-toggle--hamburger {
background-color: #fff;
box-shadow: 1px 1px 1px #191938;
Expand All @@ -27,46 +47,25 @@
padding: 11px 0 0 13px;
width: 32px;
}

.drawer-toggle--hamburger:hover {
box-shadow: 1px 1px 1px #191938;
-webkit-box-shadow: inset 1px 1px 1px #191938;
-moz-box-shadow: 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);
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) {
.drawer-toggle--hamburger {
display: block;
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;
}
#drawer-button {
line-height: 1.75em;
}
.drawer-toggle--hamburger .off-canvas-drawer {
color: #fff;
}

#pushed-content {
position: relative;
z-index: 1;
Expand All @@ -75,11 +74,11 @@
}
#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;
Expand All @@ -92,11 +91,19 @@
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 {
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--push-left {
right: 0;
transform: translate3D(20rem, 0, 0);
}
#off-canvas-drawer--primary.drawer--cover-right {
left: 0;
transform: translate3D(-20rem, 0, 0);
}
#off-canvas-drawer--primary.drawer--push-right {
left: 0;
transform: translate3D(-20rem, 0, 0);
}
Expand Down Expand Up @@ -127,13 +134,22 @@
width: 100%;
opacity: 0.5;
}
@media screen and (max-width: 979px) {
.has-off-canvas-drawer #ubc7-unit-menu {
display: none;
}
.off-canvas-drawer a {
color: #fff;
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;
}
.drawer-toggle--hamburger .off-canvas-drawer, .off-canvas-drawer a, .off-canvas-drawer .dropdown-menu a {
/* Alter CLF Navigation markup to work vertically */
.off-canvas-drawer .dropdown-menu a {
color: #fff;
}
.off-canvas-drawer .drawer__close {
Expand All @@ -156,26 +172,28 @@
.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 {
background-color: #4f4f4f;
}
.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:hover {
background-color: #4f4f4f;
}
.off-canvas-drawer .btn-group {
width: 100%;
}
.off-canvas-drawer .btn-group:hover > .btn {
background-color: #4f4f4f;
}
.off-canvas-drawer .btn-group:hover > .dropdown-toggle {
background-color: #424242;
}
.off-canvas-drawer .btn-group > a {
width: 100%;
z-index: 1;
}
.off-canvas-drawer .btn-group > a:focus {
background-color: #4f4f4f;
}
.off-canvas-drawer .btn-group .dropdown-toggle {
z-index: 2;
float: none;
Expand All @@ -185,15 +203,18 @@
height: 55px;
box-shadow: none;
}
.off-canvas-drawer .btn-group .dropdown-toggle:hover:after, .off-canvas-drawer .btn-group .dropdown-toggle:focus:after {
.off-canvas-drawer .btn-group .dropdown-toggle:hover: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-toggle:focus:after {
color: #fff;
}
.off-canvas-drawer .btn-group .dropdown-toggle span {
transition: all 0.3s ease;
}
.off-canvas-drawer .btn-group .dropdown-menu {
border: none;
width: 100%;
Expand All @@ -207,10 +228,6 @@
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;
Expand All @@ -222,9 +239,6 @@
background-image: none;
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;
Expand All @@ -243,21 +257,26 @@
.off-canvas-drawer .ubc7-arrow {
background-position: -1113px -227px !important;
}
#drawer-button .icon-bar {
display:block;
width:18px;
height:2px;
background-color:#000;
-webkit-border-radius:1px;
-moz-border-radius:1px;
border-radius:1px;
-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-button .icon-bar+.icon-bar {
margin-top:3px
@media screen and (min-width: 998px) {
.drawer-toggle--hamburger {
display: block;
margin-top: 2px;
margin-right: 13px;
margin-bottom: 3px;
}
}
#drawer-button .hamburger__elem {
display: inline-block;
@media screen and (min-width: 1200px) {
.drawer-toggle--hamburger {
margin-top: 5px;
margin-right: 17px;
margin-bottom: 5px;
}
#drawer-button {
line-height: 1.75em;
}
}
@media screen and (max-width: 979px) {
.has-off-canvas-drawer #ubc7-unit-menu {
display: none;
}
}
Loading