+
+
diff --git a/wdn/templates_4.1/includes/share.html b/wdn/templates_4.1/includes/share.html
index efd8d4867..9ec70fe10 100644
--- a/wdn/templates_4.1/includes/share.html
+++ b/wdn/templates_4.1/includes/share.html
@@ -1,6 +1,3 @@
-
-
-
-
+
diff --git a/wdn/templates_4.1/less/all.less b/wdn/templates_4.1/less/all.less
index 6544b9af8..61f30c82b 100644
--- a/wdn/templates_4.1/less/all.less
+++ b/wdn/templates_4.1/less/all.less
@@ -12,6 +12,7 @@
// Set the layouts
@import "layouts/wrapper.less";
+@import "layouts/wdn-ui.less";
@import "layouts/share.less";
@import "layouts/navigation.less";
@import "layouts/breadcrumbs.less";
diff --git a/wdn/templates_4.1/less/layouts/idm.less b/wdn/templates_4.1/less/layouts/idm.less
index f2a3f1eb0..cb4c62684 100644
--- a/wdn/templates_4.1/less/layouts/idm.less
+++ b/wdn/templates_4.1/less/layouts/idm.less
@@ -87,12 +87,11 @@
display: block;
.is-hidden();
position: absolute;
- top: 45px;
+ top: 46px;
right: @page-offset-default;
- width: 160px;
padding: 1.069em 2.369em;
+ white-space: nowrap;
border-radius: 3px;
- background-color: @ui12;
background-color: fadeout(@ui12, 3%);
text-align: left;
.rem(11,12);
@@ -110,11 +109,11 @@
}
@media @bp-nav-full {
- top: 36px;
+ top: 37px;
}
@media @bp768 {
- top: 45px;
+ top: 47px;
}
&:before {
@@ -126,7 +125,6 @@
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
- border-bottom: 6px solid @ui10;
border-bottom: 6px solid fadeout(@ui10, 3%);
}
diff --git a/wdn/templates_4.1/less/layouts/navigation.less b/wdn/templates_4.1/less/layouts/navigation.less
index 3da241d2b..aea2a8322 100644
--- a/wdn/templates_4.1/less/layouts/navigation.less
+++ b/wdn/templates_4.1/less/layouts/navigation.less
@@ -22,43 +22,60 @@
align-items: center;
.nav-bar();
height: 40px;
- }
- @media @bp-nav-full {
- .wdn-icon-menu {
- display: none;
+ //Prevent jumping buttons on mobile page load (this will display the old label as it is being replaced by a button)
+ label.wdn-icon-menu {
+ width: 1.333em;
+ font-size: 1.333rem;
+ margin-left: 5%;
+
+ &:before {
+ padding-right: 1em;
+ }
+ }
+
+ button.wdn-nav-toggle .wdn-icon-menu {
+ margin-right: .33em;
}
}
+
}
// Shared styles for Menu & Share icons
.wdn-nav-icon() {
white-space: nowrap;
overflow: hidden;
- line-height: 1;
- cursor: pointer;
- padding: 9px 0;
color: #fff;
&:before { // Show the navigation icon
- padding-right: 1em;
+ margin: 0;
+ padding: 0;
}
}
.wdn-icon-menu { // Hide the label text off screen
.wdn-nav-icon();
position: relative;
- float: left;
- width: 1.333em;
- .inner-wrapper-margin-left();
font-size: 21px;
font-size: 1.333rem;
}
-#wdn_navigation_wrapper {
+.wdn-nav-toggle {
+ .inner-wrapper-margin-left();
+ padding: 0;
+ z-index: @nav-z-index + 1;
+ overflow: hidden;
+ line-height: 1;
+ border: none;
+ background-color: transparent;
@media @bp-nav-hidden {
- margin-top: 1em;
+ height: 40px;
+ }
+
+ @media @bp-nav-full {
+ position: absolute;
+ top: 24px;
}
}
@@ -190,7 +207,6 @@
li {
width: 100%;
padding: 0;
- border-bottom: 1px solid #c00808;
border-bottom: 1px solid fadeout(#000,94%);
&:last-child {
@@ -223,12 +239,10 @@
padding: 0 1.777em;
> li {
- border-right: 1px solid #b80808;
border-right: 1px solid fadeout(#000,90%);
line-height: 1;
&:first-child {
- border-left: 1px solid #b80808;
border-left: 1px solid fadeout(#000,90%);
}
@@ -252,6 +266,10 @@
}
}
}
+
+ label {
+ display: none; //BC fix, prevent duplicate nav buttons after change to buttons if includes are not yet updated
+ }
}
.wdn-content-slide {
diff --git a/wdn/templates_4.1/less/layouts/search.less b/wdn/templates_4.1/less/layouts/search.less
index 43359f3b7..14578d8b0 100644
--- a/wdn/templates_4.1/less/layouts/search.less
+++ b/wdn/templates_4.1/less/layouts/search.less
@@ -4,7 +4,7 @@
@media @bp-nav-hidden {
position: absolute;
- bottom: -0.802em;
+ bottom: 0;
left: 0;
width: 100%;
.inner-wrapper-margin-left();
@@ -21,7 +21,7 @@
.flexbox & {
clear: right;
display: flex;
- flex: row nowrap;
+ flex-flow: row nowrap;
align-items: center;
margin: 0;
}
@@ -77,15 +77,7 @@
}
}
- label {
- line-height: 1;
-
- @media @bp-nav-hidden {
- color: #fff;
- }
- }
-
- button {
+ form button {
display: block;
position: absolute;
z-index: 1;
@@ -113,13 +105,25 @@
}
}
-#wdn_search_toggle,
#wdn_search_toggle_label {
+
@media @bp-nav-hidden {
position: absolute;
left: 2.369em;
- cursor: pointer;
+ height: 40px;
+ padding: 0;
+ .rem(16);
+ color: #fff;
+
+ .wdn-icon-search {
+ display: block;
+ transform: translateY(-1px);
+
+ &:before {
+ margin-right: 0;
+ }
+ }
}
@media @bp-nav-full {
@@ -127,10 +131,6 @@
}
}
-#wdn_search_toggle_label {
- .rem(16);
-}
-
#wdn_search_form {
z-index: 1; // Ensure we're above the site title
top: 0.75em;
@@ -139,7 +139,7 @@
display: block;
.is-hidden();
position: absolute;
- top: 34px;
+ top: 46px;
left: 0;
width: 90%; // 100% - 5% inner wrapper margin on each side
padding: 1.069em 2.369em 1.777em;
diff --git a/wdn/templates_4.1/less/layouts/share.less b/wdn/templates_4.1/less/layouts/share.less
index 918442dc2..fef618305 100644
--- a/wdn/templates_4.1/less/layouts/share.less
+++ b/wdn/templates_4.1/less/layouts/share.less
@@ -2,96 +2,55 @@
z-index: (@nav-z-index + 1);
@media @bp-nav-hidden {
+ position: relative;
margin-left: 4.209em;
+
+ .wdn-dropdown-widget-button {
+ height: 40px;
+ }
}
@media @bp-nav-full {
position: absolute;
.inner-wrapper-margin-right();
margin-left: 0;
- top: 0.254em;
+ padding: 0 1px;
+ top: 24px;
right: 0;
}
- .wdn-share-button {
- display: block;
-
- .wdn-share-options {
- margin: 0;
- top: 38px;
-
- @media @bp-nav-hidden {
- margin: 1px 0 0 -2.083em; // center arrow under icon
- }
-
- li {
- line-height: 1.777;
- }
-
- &.wdn-hang-left {
- right: 0;
- left: auto;
-
- @media @bp-nav-hidden {
- left: 0;
- right: auto;
- }
-
- &:before {
- left: auto;
- right: 11px;
-
- @media @bp-nav-hidden {
- right: auto;
- left: 29px;
- }
- }
- }
- }
-
- .wdn-icon-share {
- display: block;
- font-size: 17px;
- font-size: 1.069rem;
- }
- }
+ .wdn-dropdown-widget-button {
+ padding: 0;
+ }
}
-.wdn-share-button {
- position: relative;
- display: inline-block;
-
- .wdn-icon-share {
- display: inline;
- .wdn-nav-icon(); // located at layouts/navigation.less
- width: 1.777em;
-
- &:before { // Show the navigation icon
- padding: 0;
- }
- }
+.wdn-icon-share {
+ .wdn-nav-icon(); // located at layouts/navigation.less
}
.wdn-share-options {
position: absolute;
z-index: (@nav-z-index + 1);
- width: 212px;
+ margin: 6px 0 0;
padding: 1.069em 2.369em;
- background-color: @ui12;
- background-color: fadeout(@ui12, 3%);
+ white-space: nowrap;
border-radius: 3px;
text-align: left;
.wdn-sans-serif();
.rem(11,12);
+ background-color: fadeout(@ui12, 3%);
// Hide until toggled
.is-hidden();
transform: scale(0.9);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.1s linear 0.6s;
+ @media @bp-nav-hidden {
+ left: -2.369em;
+ }
+
@media @bp-nav-full {
- margin: 0;
- right: 0;
+ right: -2.369em;
}
&:before {
@@ -106,98 +65,37 @@
border-bottom: 6px solid fadeout(@ui10, 3%);
@media @bp-nav-full {
- left: auto;
- right: 1.25em;
+ right: 2.369em;
}
}
- &.wdn-hang-left {
- right: 0;
- left: auto;
- margin: .75em -1.25em 0 0;
-
- &:before {
- left: auto;
- right: 1.25em;
- }
- }
-
- &.wdn-hang-right {
- margin: .75em 0 0 -1.25em;
- left: 0;
- right: auto;
-
- &:before {
- right: auto;
- left: 1.25em;
- }
- }
-
input {
color: @ui08;
}
-}
-
-.wdn-share-options li {
- list-style: none;
- padding: 0.602em 0;
- font-size: 1em;
- text-transform: none;
- line-height: 1.662;
-
- [class^="wdn-icon-"] {
-
- &:before {
- .rem(16);
- margin-right: 0.602em;
- }
- }
-
- a {
- padding: 0.602em 0;
- color: @ui05;
- border: none;
-
- &:hover {
- color: @cream;
- }
- }
-}
-
-#navigation .wdn-icon-share {
- display: none;
- cursor: pointer;
- position: absolute;
- padding: 9px 0;
- line-height: normal;
-
- @media @bp640 { right: @page-offset-640; }
- @media @bp768 { right: @page-offset-768; }
- @media @bp960 { right: @page-offset-960; }
- @media @bp1280 { right: @page-offset-1280; }
- @media @bp1600 { right: @page-offset-1600; }
-
- @media @bp-nav-full {
- display: inline-block;
- }
-}
-
-/* the share widget dropdown needs some focus love because it's icon is absolutely positioned */
-.wdn-dropdown-widget-label.focused .wdn-icon-share {
- /* Default styles including firefox */
- outline: 1px dotted #212121;
- /* For webkit */
- outline: -webkit-focus-ring-color auto 5px;
-}
-
-.wdn-dropdown-widget-label[for=wdn-main-share-button-wdn-share-toggle].focused {
- outline: none;
-}
-
-.wdn-menu-trigger .wdn-share-button .wdn-icon-share {
-
- @media @bp-nav-full {
- display: none;
+ li {
+ list-style: none;
+ padding: 0.602em 0;
+ font-size: 1em;
+ text-transform: none;
+ line-height: 1.777;
+
+ [class^="wdn-icon-"] {
+
+ &:before {
+ .rem(16);
+ margin-right: .602em;
+ }
+ }
+
+ a {
+ padding: 0.602em 0;
+ color: @ui05;
+ border: none;
+
+ &:hover {
+ color: @cream;
+ }
+ }
}
}
diff --git a/wdn/templates_4.1/less/layouts/wdn-ui.less b/wdn/templates_4.1/less/layouts/wdn-ui.less
new file mode 100644
index 000000000..d7a9aa3bb
--- /dev/null
+++ b/wdn/templates_4.1/less/layouts/wdn-ui.less
@@ -0,0 +1,9 @@
+.wdn-dropdown-widget-button {
+ background: transparent;
+ border: none;
+ display: block;
+}
+.wdn-dropdown-widget-no-outline {
+ //These don't need an outline as it is obvious that focus has already moved
+ outline: none;
+}
diff --git a/wdn/templates_4.1/less/layouts/wrapper.less b/wdn/templates_4.1/less/layouts/wrapper.less
index d24ab77b9..f6450d8be 100644
--- a/wdn/templates_4.1/less/layouts/wrapper.less
+++ b/wdn/templates_4.1/less/layouts/wrapper.less
@@ -17,13 +17,6 @@
clip: rect(1px, 1px, 1px, 1px);
}
-.wdn-dropdown-widget-label.focused {
- /* firefox */
- outline: 1px dotted #212121;
- /* -webkit-focus-ring-color = '#5B9DD9' */
- outline: -webkit-focus-ring-color auto 5px;
-}
-
.inner-wrapper-margin-left() {
margin-left: @page-offset-default;
diff --git a/wdn/templates_4.1/less/states/idm.less b/wdn/templates_4.1/less/states/idm.less
index 6c6c68047..6c21b471e 100644
--- a/wdn/templates_4.1/less/states/idm.less
+++ b/wdn/templates_4.1/less/states/idm.less
@@ -47,11 +47,11 @@
@media @bp768 {
padding-right: 50px;
}
- }
- #wdn_idm_toggle:checked ~ .wdn-idm-options {
- .is-visible();
- transform: scale(1);
- transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
- }
+ &[aria-pressed="true"] ~ .wdn-idm-options {
+ .is-visible();
+ transform: scale(1);
+ transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
+ }
+ }
}
diff --git a/wdn/templates_4.1/less/states/navigation.less b/wdn/templates_4.1/less/states/navigation.less
index f19a836ac..88b414c33 100644
--- a/wdn/templates_4.1/less/states/navigation.less
+++ b/wdn/templates_4.1/less/states/navigation.less
@@ -21,19 +21,22 @@
}
}
}
-
+
.nav_expanded & {
-
+
> ul > li > a {
@media @bp-nav-full {
- border-bottom: 1px solid #c00808;
border-bottom: 1px solid fadeout(#000,94%);
- }
+ }
}
}
}
+#wdn_menu_toggle {
+ display: none;
+}
+
@media @bp-nav-hidden {
.nav-scrolling #header {
margin-bottom: 31px; // maintain whitespace reserved by fixed trigger
@@ -88,6 +91,10 @@
z-index: @nav-z-index;
}
+ .nav-scrolling .wdn-nav-toggle {
+ position: fixed;
+ }
+
#navigation {
.js & {
position: absolute;
diff --git a/wdn/templates_4.1/less/states/search.less b/wdn/templates_4.1/less/states/search.less
index 6a3c57386..ee4fca76e 100644
--- a/wdn/templates_4.1/less/states/search.less
+++ b/wdn/templates_4.1/less/states/search.less
@@ -6,7 +6,7 @@
.nav-scrolling & {
position: fixed;
z-index: (@nav-z-index + 1);
- top: 10px;
+ top: 0;
bottom: auto;
}
@@ -14,7 +14,7 @@
left: 100%;
}
- .wdn_search_toggle:checked ~ #wdn_search_form {
+ .wdn-dropdown-widget-button[aria-pressed="true"] ~ #wdn_search_form {
.is-visible();
transform: scale(1);
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
diff --git a/wdn/templates_4.1/less/states/share.less b/wdn/templates_4.1/less/states/share.less
index 535e2a795..f964bb7a8 100644
--- a/wdn/templates_4.1/less/states/share.less
+++ b/wdn/templates_4.1/less/states/share.less
@@ -26,7 +26,7 @@
}
// Change states when toggle is checked or hovered
-.wdn_share_toggle:checked ~ .wdn-share-options {
+.wdn-share-this-page .wdn-dropdown-widget-button[aria-pressed='true'] ~ .wdn-share-options {
.is-visible();
transform: scale(1);
transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
diff --git a/wdn/templates_4.1/scripts/main-wdn-plugins.js b/wdn/templates_4.1/scripts/main-wdn-plugins.js
index 7eff8e4ce..c89291971 100644
--- a/wdn/templates_4.1/scripts/main-wdn-plugins.js
+++ b/wdn/templates_4.1/scripts/main-wdn-plugins.js
@@ -2,7 +2,6 @@ define([
'analytics',
'navigation',
'search',
- 'socialmediashare',
'unlalert',
'images',
'form_validation',
diff --git a/wdn/templates_4.1/scripts/navigation.js b/wdn/templates_4.1/scripts/navigation.js
index baedf19d1..a101762db 100644
--- a/wdn/templates_4.1/scripts/navigation.js
+++ b/wdn/templates_4.1/scripts/navigation.js
@@ -1,4 +1,4 @@
-define(['jquery', 'wdn', 'modernizr', 'require'], function($, WDN, Modernizr, require) {
+define(['jquery', 'wdn', 'modernizr', 'require', 'socialmediashare'], function($, WDN, Modernizr, require, social) {
"use strict";
var snifferServer = 'https://www1.unl.edu/nav-proxy/';
@@ -24,6 +24,8 @@ define(['jquery', 'wdn', 'modernizr', 'require'], function($, WDN, Modernizr, re
var breadPrmySel = breadSel + ' ' + prmySel;
var menuTogSel = '#wdn_menu_toggle';
var stopSelector = '.document, .terminal';
+ var navButton = '.wdn-nav-toggle';
+ var menuTrigger = '.wdn-menu-trigger';
// state related variables
var lockHover = false;
@@ -220,17 +222,17 @@ define(['jquery', 'wdn', 'modernizr', 'require'], function($, WDN, Modernizr, re
var $nav = $(navSel);
var $cWrapper = $(contentWrapperSelector);
var cssTemp = {};
- var $navBarLabels = $(navSel + ' > label > span[class^="wdn-icon"]');
+ var $navBarButtons = $(menuTrigger + ' button');
$nav.off(expandEvent);
cssTemp[cssPaddingTop] = cssTemp[cssPaddingBottom] = '';
primaryLinks.css(cssTemp);
- $navBarLabels.css(cssTemp);
+ $navBarButtons.css(cssTemp);
if (!isFullNav()) {
$cWrapper.css(cssPaddingTop, '');
secondaryLists.css(cssHeight, '');
- $nav.trigger('fixed', [$('.wdn-menu-trigger').outerHeight()]);
+ $nav.trigger('fixed', [$(menuTrigger).outerHeight()]);
return;
}
@@ -271,7 +273,7 @@ define(['jquery', 'wdn', 'modernizr', 'require'], function($, WDN, Modernizr, re
});
cssTemp = {};
- $navBarLabels.each(function() {
+ $navBarButtons.each(function() {
var row = 0;
var height = $(this).outerHeight();
var pad = parseFloat($(this).css(cssPaddingTop));
@@ -280,6 +282,7 @@ define(['jquery', 'wdn', 'modernizr', 'require'], function($, WDN, Modernizr, re
if (height + 5 < navigationRowHeights[row]) {
var barHalfPad = (navigationRowHeights[row] - height) / 2;
cssTemp[cssPaddingTop] = Math.floor(barHalfPad + pad) + pixelUnit;
+ cssTemp[cssPaddingBottom] = Math.floor(barHalfPad + pad) + pixelUnit;
$(this).css(cssTemp);
}
});
@@ -588,10 +591,60 @@ define(['jquery', 'wdn', 'modernizr', 'require'], function($, WDN, Modernizr, re
$header.trigger('fixedoffset', [barOffset]);
};
+ var fixNavButton = function() {
+
+ var $navToggleLabel = $('.wdn-content-slide label[for="wdn_menu_toggle"]');
+
+ //Remove the nav input
+ //$(menuTogSel).hide();
+
+ //handle the label (this should be a button when sends focus)
+ var $navToggleButton = $('