Login
-
diff --git a/wdn/templates_4.1/less/layouts/breadcrumbs.less b/wdn/templates_4.1/less/layouts/breadcrumbs.less
index 0586bed71..f3c33b8b7 100644
--- a/wdn/templates_4.1/less/layouts/breadcrumbs.less
+++ b/wdn/templates_4.1/less/layouts/breadcrumbs.less
@@ -13,7 +13,7 @@
}
.selected-arrow() {
- left: 50%;
+ left: ~'calc(50% - 6px)';
bottom: -2px;
width: 0;
height: 0;
@@ -22,21 +22,46 @@
border-bottom: 6px solid #fff;
}
+.breadcrumb-loop(@i) when (@i > 0) {
+ .breadcrumb-loop((@i - 1)); // next iteration
+ li:nth-child(@{i}) {
+ margin-left: (12px * @i);
+ }
+}
+
#breadcrumbs {
.sans-serif-font();
font-size: 0;
+ @media @bp-nav-hidden {
+ .breadcrumb-loop(9); // add margin
+ }
+
+ ul {
+ @media @bp-nav-hidden {
+ margin-left: -12px;
+ }
+ }
+
li {
display: inline-block;
position: relative;
.rem(10);
- text-transform: none;
- line-height: 1;
vertical-align: middle;
+ @media @bp-nav-hidden {
+ display: block;
+ margin-bottom: 1em;
+ padding-left: 1.333em;
+ line-height: 1.069;
+ }
+
@media @bp-nav-full {
+ max-width: 20%;
+ padding: 0 6px 0 23px;
+ line-height: 1;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5b5b5a+0,474746+100 */
background: #5b5b5a; /* Old browsers */
background: -moz-linear-gradient(left, #5b5b5a 0%, #474746 100%); /* FF3.6+ */
@@ -46,8 +71,22 @@
background: -ms-linear-gradient(left, #5b5b5a 0%,#474746 100%); /* IE10+ */
background: linear-gradient(to right, #5b5b5a 0%,#474746 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b5b5a', endColorstr='#474746',GradientType=1 ); /* IE6-9 */
+ transition: max-width 0.5s ease-in-out 0.2s;
}
+ &:before {
+
+ @media @bp-nav-hidden {
+ .breadcrumb-pseudo();
+ top: -0.254em;
+ left: 0.254em;
+ width: 0.75em;
+ height: 0.75em;
+ border-bottom: 1px solid @ui08;
+ border-left: 1px solid @ui08;
+ }
+ }
+
&:after {
.breadcrumb-pseudo();
@@ -59,9 +98,29 @@
}
}
+ &:first-child {
+
+ @media @bp-nav-full {
+ margin-left: -23px;
+ }
+
+ &:before {
+
+ @media @bp-nav-hidden {
+ content: none;
+ }
+ }
+ }
+
&:last-child {
- padding-left: 23px;
- background: transparent;
+
+ @media @bp-nav-full {
+ padding-left: 23px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background: transparent;
+ }
&:after {
display: none;
@@ -76,6 +135,8 @@
@media @bp-nav-full {
background: @cream;
+ max-width: 100%;
+ transition: max-width 0.5s ease-in-out 0.5s;
}
&:first-child {
@@ -120,11 +181,12 @@
a {
display: block;
overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
@media @bp-nav-full {
- padding: 9px 6px 7px 23px;
+ padding: 9px 0 7px;
color: @ui03;
-
}
}
diff --git a/wdn/templates_4.1/less/layouts/idm.less b/wdn/templates_4.1/less/layouts/idm.less
index b7d1fda9b..e092aedf3 100644
--- a/wdn/templates_4.1/less/layouts/idm.less
+++ b/wdn/templates_4.1/less/layouts/idm.less
@@ -1,119 +1,75 @@
-.wdn-resource-login-trigger {
+.wdn-resource-login-trigger {
display: inline-block;
position: relative;
+ overflow: visible;
@media @bp-nav-hidden {
position: absolute;
- top: 103px; // position over the nav bar
- right: 0;
- .inner-wrapper-margin-right();
- z-index: (@nav-z-index + 1); // overlay the nav bar
+ top: 101px; // position over the nav bar
+ right: @page-offset-default;
text-align: right;
+ z-index: (@nav-z-index + 1); // overlay the nav bar
+ }
- a {
- color: #fae8e8;
- background-color: @brand; // make the background match the navigation's background so it passes automated accessibility tests
- }
+ @media @bp480 {
+ right: @page-offset-480;
+ }
+
+ @media @bp640 {
+ right: @page-offset-640;
}
@media @bp-nav-full {
font-size: 0; // removes unwanted inline spacing around elements, https://css-tricks.com/fighting-the-space-between-inline-block-elements/
-
- .flexbox & {
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- }
}
- a {
- display: block;
- height: 40px;
- .rem(12);
- line-height: 1;
-
- @media @bp-nav-full {
- display: inline-block;
- height: 30px;
- padding-top: 1.069em;
- .rem(10);
-
- .flexbox & {
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
- padding-top: 0.238em;
- }
- }
-
- @media @bp768 {
- height: 40px;
- padding-top: 1.333em;
- .rem(12);
- }
+ .flexbox & {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ justify-content: flex-end;
}
}
-#wdn_idm_logout {
- display: none;
- text-align: left;
- .wdn-sans-serif();
-
- @media @bp-nav-hidden {
- position: absolute;
- right: 1em;
- padding: 0.802em 1.069em 1.069em;
- color: @ui05;
- background-color: @ui10;
- background-color: fadeout(@ui10, 3%);
- border-radius: 3px;
- z-index: 1;
-
- &:before {
- content: '';
- position: absolute;
- top: -6px;
- width: 0;
- height: 0;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- border-bottom: 6px solid @ui10;
- border-bottom: 6px solid fadeout(@ui10, 3%);
- }
+#wdn_idm_username,
+#wdn_idm_toggle_label {
+ display: block;
+ height: 40px;
+ .rem(12);
+ line-height: 1;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
- &:hover {
- color: @cream;
- }
+ @media @bp-nav-hidden {
+ padding-top: 1.333em;
+ color: #fae8e8;
}
+ @media @bp-nav-full {
+ display: inline-block;
+ height: 30px;
+ padding-top: 1.069em;
+ .rem(10);
+ color: @scarlet;
+ }
-
-
-
- a {
- text-decoration: none;
- display: block;
- padding: 0.5em 1em;
- color: #fff;
-
- @media @bp-nav-full {
-
- }
-
-// &:hover {
-// background-color: rgba(255, 255, 255, 0.2);
-//
-// @media @bp-nav-full {
-// background-color: darken(@page-background, 2%);
-// }
-// }
+ @media @bp768 {
+ height: 40px;
+ padding-top: 1.333em;
+ .rem(12);
}
-}
-#wdn_idm_username {
+ .flexbox & {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ order: 2;
+ padding-top: 0.238em;
- @media @bp-nav-hidden {
- padding-top: 1.333em;
+ @media @bp-nav-hidden {
+ padding-top: 0.143em;
+ }
}
&:before {
@@ -126,3 +82,54 @@
}
}
}
+
+.wdn-idm-options {
+ display: block;
+ .is-hidden();
+ position: absolute;
+ top: 45px;
+ right: @page-offset-default;
+ width: 160px;
+ padding: 1.069em 2.369em;
+ border-radius: 3px;
+ background-color: @ui12;
+ background-color: fadeout(@ui12, 3%);
+ text-align: left;
+ .rem(11,12);
+ z-index: (@nav-z-index + 1);
+ transform: scale(0.9);
+ transform-origin: top;
+ transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.1s linear 0.6s;
+
+ @media @bp480 {
+ right: @page-offset-480;
+ }
+
+ @media @bp640 {
+ right: @page-offset-640;
+ }
+
+ &:before {
+ content: '';
+ position: absolute;
+ top: -6px;
+ right: 3.375em;
+ width: 0;
+ height: 0;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-bottom: 6px solid @ui10;
+ border-bottom: 6px solid fadeout(@ui10, 3%);
+ }
+
+ a {
+ display: block;
+ padding: 0.602em 0;
+ color: @ui05;
+ border: none;
+
+ &:hover {
+ color: @cream;
+ }
+ }
+}
diff --git a/wdn/templates_4.1/less/layouts/search.less b/wdn/templates_4.1/less/layouts/search.less
index 201a26aab..278875862 100644
--- a/wdn/templates_4.1/less/layouts/search.less
+++ b/wdn/templates_4.1/less/layouts/search.less
@@ -15,12 +15,15 @@
@media @bp-nav-full {
position: relative;
display: inline-block;
- margin-left: 1.777em;
+ float: right;
+ margin: 0.339em 0 0 1em;
.flexbox & {
+ clear: right;
display: flex;
flex: row nowrap;
align-items: center;
+ margin: 0;
}
&.active:after {
@@ -134,7 +137,7 @@
display: block;
.is-hidden();
position: absolute;
- top: 2.532em;
+ top: 34px;
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 fcb52ad3a..c6bc83a5b 100644
--- a/wdn/templates_4.1/less/layouts/share.less
+++ b/wdn/templates_4.1/less/layouts/share.less
@@ -18,7 +18,7 @@
.wdn-share-options {
margin: 0;
- top: 3.0208em;
+ top: 38px;
@media @bp-nav-hidden {
margin: 1px 0 0 -2.083em; // center arrow under icon
@@ -91,7 +91,7 @@
border-radius: 3px;
text-align: left;
.wdn-sans-serif();
- .rem(12);
+ .rem(11,12);
// Hide until toggled
.is-hidden();
diff --git a/wdn/templates_4.1/less/states/idm.less b/wdn/templates_4.1/less/states/idm.less
index a49e5f6c0..5e0982621 100644
--- a/wdn/templates_4.1/less/states/idm.less
+++ b/wdn/templates_4.1/less/states/idm.less
@@ -1,11 +1,12 @@
-@media @bp-nav-hidden {
- .wdn-resource-login-trigger {
+.wdn-resource-login-trigger {
+
+ @media @bp-nav-hidden {
+
.nav-scrolling & {
position: fixed;
top: 0;
z-index: (@nav-z-index + 1);
-// -webkit-font-smoothing: subpixel-antialiased;
- transition:right @nav-transition-duration ease;
+ transition: right @nav-transition-duration ease;
}
.nav-scrolling #wdn_menu_toggle:checked ~ .wdn-content-slide & {
@@ -19,15 +20,16 @@
&.wdn-resource-login-trigger {
@media @bp-nav-hidden {
- margin-right: 0;
+ width: 60%;
+ right: 0;
}
}
- #wdn_idm_username {
+ #wdn_idm_toggle_label {
white-space: nowrap;
background-repeat: no-repeat;
background-size: contain;
- background-image: url('http://planetred.unl.edu/pg/icon/unl_rdee2/small/'); // TEST
+ background-position: right center;
&:before {
content: '';
@@ -35,13 +37,6 @@
@media @bp-nav-hidden {
padding-right: 50px;
-
- &:hover {
-
- ~ #wdn_idm_logout {
- display: block;
- }
- }
}
@media @bp-nav-full {
@@ -53,31 +48,9 @@
}
}
- #wdn_idm_logout {
-
- @media @bp-nav-hidden {
-
- &:hover {
- display: block;
- }
- }
-
- @media @bp960 {
- display: inline-block;
- margin-left: 10px;
-
- .flexbox & {
- display: flex;
- }
- }
- }
-
- #wdn_idm_username {
- background-position: right center;
- background-size: contain;
-
- &:before {
- content: "";
- }
- }
+ #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;
+ }
}
diff --git a/wdn/templates_4.1/scripts/idm.js b/wdn/templates_4.1/scripts/idm.js
index cf5f66d1c..7a8bdeda8 100644
--- a/wdn/templates_4.1/scripts/idm.js
+++ b/wdn/templates_4.1/scripts/idm.js
@@ -21,7 +21,9 @@ define(['wdn', 'jquery', 'require'], function(WDN, $, require) {
mainSel = wdnSel + 'identity_management',
idmSel = wdnSel + 'idm_',
userSel = idmSel + 'username',
+ profileSel = idmSel + 'profile',
logoutSel = idmSel + 'logout',
+ toggleSel = idmSel + 'toggle_label',
loginSrv = 'https://login.unl.edu/',
ssoCook = 'unl_sso',
encLoc = encodeURIComponent(window.location),
@@ -29,8 +31,6 @@ define(['wdn', 'jquery', 'require'], function(WDN, $, require) {
loginURL = loginSrv + 'cas/login?service=' + encLoc,
serviceURL = loginSrv + 'services/whoami/?id=',
planetRed = '//planetred.unl.edu/pg/',
- loggedInTitle = 'Review and update your profile',
- loggedOutTitle = 'Log in to UNL',
defaultLinkText,
user = false;
@@ -215,12 +215,11 @@ define(['wdn', 'jquery', 'require'], function(WDN, $, require) {
* @param {string} uid
*/
displayNotice : function(uid) {
+
var localSettings = getLocalIdmSettings(),
idm = $(mainSel),
username = $(userSel);
- idm.removeClass('hidden');
-
// in planet red's use of CAS, staff usernames are converted like jdoe2 -> unl_jdoe2
// and student usernames are converted like s-jdoe3 -> unl_s_jdoe3
var planetred_uid = 'unl_';
@@ -231,10 +230,13 @@ define(['wdn', 'jquery', 'require'], function(WDN, $, require) {
}
idm.addClass('loggedin');
- username.css('backgroundImage', "url(" + planetRed + "icon/" + planetred_uid + "/medium/)")
- .attr('href', 'http:' + planetRed + 'profile/' + planetred_uid)
- .attr('title', loggedInTitle)
- .text(displayName(uid));
+
+ $(toggleSel).css('backgroundImage', "url(" + planetRed + "icon/" + planetred_uid + "/medium/)")
+ .text(displayName(uid));
+ $(profileSel).attr('href', 'http:' + planetRed + 'profile/' + planetred_uid)
+
+ // Hide login anchor
+ $(userSel).hide();
// Any time logout link is clicked, unset the user data
var logoutLink = $('a', logoutSel);
@@ -246,11 +248,13 @@ define(['wdn', 'jquery', 'require'], function(WDN, $, require) {
var idm = $(mainSel),
loginLink = $(userSel);
- idm.removeClass('hidden loggedin');
+ idm.removeClass('loggedin');
loginLink.css('backgroundImage', null)
.attr('href', loginURL)
- .attr('title', loggedOutTitle)
.text(defaultLinkText);
+
+ // Show login anchor
+ $(userSel).show();
},
/**