From b19c82e4e131ee6ae9d327b8c7b55f86acf54926 Mon Sep 17 00:00:00 2001 From: Arlen Johnson Date: Thu, 28 Mar 2019 10:22:48 -0400 Subject: [PATCH] Improve UI, add user menu and menu panels --- app/src/Template/Element/javascript.ctp | 51 +++++++- app/src/Template/Element/menuUser.ctp | 17 ++- app/webroot/css/co-base.css | 153 +++++++++++++++++++----- app/webroot/css/co-responsive.css | 21 +++- 4 files changed, 202 insertions(+), 40 deletions(-) diff --git a/app/src/Template/Element/javascript.ctp b/app/src/Template/Element/javascript.ctp index 03ca6a3ac..c8891f937 100644 --- a/app/src/Template/Element/javascript.ctp +++ b/app/src/Template/Element/javascript.ctp @@ -49,6 +49,16 @@ if (Cookies.get("desktop-drawer-state") == "half-closed") { $("#navigation-drawer").addClass("half-closed"); $("#main").addClass("drawer-half-closed"); + } else { + // Preserve the state of the most recently selected menu item if it is expandable (a "menuTop" item) + // (we only use this behavior when the the drawer is fully-open) + var mainMenuSelectedParentId = Cookies.get("main-menu-selected-parent-id"); + console.log(mainMenuSelectedParentId); + if(mainMenuSelectedParentId != undefined && mainMenuSelectedParentId != "") { + $("#" + mainMenuSelectedParentId).addClass("active"); + $("#" + mainMenuSelectedParentId + " > a.menuTop").attr("aria-expanded","true"); + $("#" + mainMenuSelectedParentId + " > ul").addClass("in"); + } } // Desktop hamburger menu-drawer toggle @@ -69,17 +79,52 @@ } }); - // Desktop half-closed drawer behavior + // Desktop half-closed drawer behavior & expandable menu items $('#navigation-drawer a.menuTop').click(function () { if (Cookies.get("desktop-drawer-state") == "half-closed") { $("#navigation-drawer").toggleClass("half-closed"); } + + // Save the ID of the most recently expanded menuTop item for use on reload + if ($(this).attr("aria-expanded") == "true") { + var parentId = $(this).parent().attr("id"); + Cookies.set("main-menu-selected-parent-id", parentId); + } else { + Cookies.set("main-menu-selected-parent-id", ""); + } }); // END DESKTOP MENU DRAWER BEHAVIOR // USER MENU BEHAVIORS - $("#global-search label").click(function () { - $("#global-search-box").toggle(); + // Toggle the global search box + $("#global-search label").click(function (e) { + e.stopPropagation(); + if ($("#global-search-box").is(":visible")) { + $("#global-search-box").hide(); + $("#global-search-box").attr("aria-expanded","false"); + } else { + $("#global-search-box").show(); + $("#global-search-box").attr("aria-expanded","true"); + } + }); + + // Toggle the custom user panel in the user menu + $("#user-panel-toggle").click(function(e) { + e.stopPropagation(); + if ($("#user-panel").is(":visible")) { + $("#user-panel").hide(); + $("#user-panel").attr("aria-expanded","false"); + } else { + $("#user-panel").show(); + $("#user-panel").attr("aria-expanded","true"); + } + }); + + // Hide custom user menu items on click outside + $(document).on('click', function (e) { + if ($(e.target).closest("#user-panel, #global-search-box").length === 0) { + $("#user-panel, #global-search-box").hide(); + } }); // Accordion diff --git a/app/src/Template/Element/menuUser.ctp b/app/src/Template/Element/menuUser.ctp index e776d14d2..6ebb09aa6 100644 --- a/app/src/Template/Element/menuUser.ctp +++ b/app/src/Template/Element/menuUser.ctp @@ -28,24 +28,29 @@ ?>
- + person arrow_drop_down - +
+
+ person +
+
Session->read('Auth.User.username'); ?>
+
+ diff --git a/app/webroot/css/co-base.css b/app/webroot/css/co-base.css index 5f734e59e..0610d8907 100644 --- a/app/webroot/css/co-base.css +++ b/app/webroot/css/co-base.css @@ -59,17 +59,22 @@ h1.firstPrompt { margin: 0.5em 0; } h2 { - font-size: 24px; - line-height: 28px; + font-size: 2em; + line-height: 2.5em; + margin: 0; +} +h3 { + font-size: 1.6em; + line-height: 1.6em; margin: 0; } a { - /*color: #2395E0;*/ - color: #07b; /* slightly darker: passes accessibility contrast checks */ + color: #07b; /* slightly darker: passes accessibility contrast checks against white */ text-decoration: none; } #main a:active, #main a:hover { + color: #0067A3; /* to ensure accessibility on hover when backgrounds change as low as #e5e5e5 */ text-decoration: underline; } #main a.mdl-button:active, @@ -147,9 +152,11 @@ body.redirect .mdl-layout--fixed-drawer > .mdl-layout__header .mdl-layout__heade } /* USER MENU */ #user-menu { - text-align: right; z-index: 4; } +body.logged-out #user-menu { + text-align: right; +} body.logged-in #user-menu { float: right; margin: 0 0 1em; @@ -221,22 +228,84 @@ body.logged-in #user-menu { #user { margin-top: 2px; } -#user-links-menu li { - text-align: center; +#user-panel { + position: absolute; + right: 0; + top: 27px; + z-index: 200; + color: #222; + background-color: #f8f8f8; + border: 1px solid #eee; + padding: 1em; + min-width: calc(100vw - 50px); + box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12); } -#user-links-cn { - background-color: #1C77AF; - color: white; +#user-panel a:hover { + text-decoration: underline; +} +#user-panel-cn { margin-top: -8px; - text-align: center; - padding: 0.4em; + padding: 1em 0 0 0; + font-size: 1.2em; + line-height: 1em; } -#user-links-id { - background-color: #2395E0; - /*background-color: #186696;*/ - color: white; - text-align: center; +#user-panel-id { padding: 0.4em; + max-width: 80vw; + word-wrap:break-word; +} +#user-panel-user-info { /* mobile only styling */ + border-top: 1px solid #ddd; + margin-top: 1em; + padding-top: 1em; +} +#user-panel-user-info .material-icons { + float: left; + font-size: 5em; +} +#user-panel ul { + padding-left: 2em; +} +#user-panel .co-info-topbox { + background-color: #f3f3f3; + margin-top: 2em; +} +#user-panel .co-info-topbox strong { + font-weight: normal; +} +#user-panel #co-profile-link:hover { + background-color: #eee; +} +#user-panel #co-profile-link .material-icons { + vertical-align: middle; + margin-right: 0.25em; + font-size: 16px; + color: #666; +} +#user-panel h2 { + font-size: 1.1em; + font-weight: normal; + margin: 1em 0 0 1em; + font-family: 'Noto Sans','Trebuchet MS',Arial,Helvetica,sans-serif; +} +#user-panel #panel-orgid-container { + margin-top: 2em; + border-top: 1px solid #ddd; + padding-top: 1em; +} +#user-panel #panel-orgid-container h2 { + margin-top: -0.25em; +} +#user-panel .org-ids { + font-style: italic; +} +#user-panel #user-panel-flows { + column-count: 2; +} +#user-panel #user-panel-flows, +#user-panel #user-panel-invite, +#user-panel #panel-orgid { + margin-top: 0; } /* NOTIFICATIONS */ #notifications { @@ -248,21 +317,21 @@ body.logged-in #user-menu { } #notifications #notifications-menu { width: 220px; - background-color: #f55; } #notifications .notification { line-height: 1.3em; padding: 0.5em 1em; border-bottom: 1px solid #dae7ef; + color: #444; } #notifications .notification a { display: block; } #notifications .notification:nth-child(odd) { - background-color: #fdfdfd; + background-color: #fff; } #notifications .notification:nth-child(even) { - background-color: #f5f5f5; + background-color: #f8f8f8; } #notifications li.notification:nth-child(n+4) { /* only show three notifications on mobile phones. */ @@ -277,6 +346,9 @@ body.logged-in #user-menu { #notifications .notification-created a { color: #444; } +#see-all a.co-raised-button { + margin: 1em 1em 0.5em; +} /* Notification page */ ul.form-list.notification-list .field-name { font-weight: bold; @@ -326,12 +398,13 @@ form#notificationStatus { #logout { display: none; } -#logout-in-menu { +#logout-in-panel { margin: 4px 0 -8px; + text-align: right; } +/* Specialty Buttons */ .co-menu-button a { background-color: #2395E0; - /*background-color: #186696;*/ color: white; text-align: center; padding: 0.4em; @@ -341,6 +414,15 @@ form#notificationStatus { .co-menu-button a:hover { background-color: #53B1F4; } +.co-raised-button { /* should be used with mdl-button--raised */ + display: block; + text-align: center; + vertical-align: middle; + background-color: #f4f4f4; + margin-top: 1em; + font-weight: normal; + font-size: 1.1em; +} /* Shib IDP */ #idp-select-container { clear: both; @@ -438,7 +520,7 @@ form#notificationStatus { font-size: 0.9em; padding: 7px 8px 7px 16px; line-height: 1.4em; - color: #2395E0; + color: #07b; border: 1px solid transparent; } #main-menu > li a:hover, @@ -448,6 +530,16 @@ form#notificationStatus { #main-menu > li li a:focus { border: 1px dotted #53B1F4; } +#main-menu a.selected { + background-color: #f5f5f5; +} +#main-menu li li a.selected { + color: #07b; + background-color: #fafafa; + /* keep these if we find a better method of selecting sub-menu items: + color: #0067A3; + background-color: #e6f4ff; */ +} #main-menu .fa-fw { width: 2em; } @@ -464,7 +556,7 @@ form#notificationStatus { margin-right: 6px; vertical-align: bottom; } -#main-menu .serviceMenu ul .material-icons { +#main-menu #serviceMenu ul .material-icons { font-size: 1.1em; position: relative; top: -2px; @@ -500,9 +592,9 @@ form#notificationStatus { #breadcrumbs { font-size: 0.9em; } -body.co_petitions.view #titleNavContainer, -body.co_person_roles #titleNavContainer, -body.co_people.canvas #titleNavContainer { +body.co_petitions.view .titleNavContainer, +body.co_person_roles .titleNavContainer, +body.co_people.canvas .titleNavContainer { padding-bottom: 0; } .pageTitle { @@ -547,6 +639,10 @@ body.co_people.canvas #titleNavContainer { #topLinks a:hover { color: #222; } +#main #topLinks a:active, +#main #topLinks a:hover { + text-decoration: underline; +} /* RIGHT SIDEBAR */ #right-sidebar { background-color: #fafafa; @@ -1707,6 +1803,9 @@ ul, ol { /* MDL override */ font-size: 12px; line-height: 20px; } +.clearfix { + clear: both; +} .fieldTitle { font-weight: bold; } diff --git a/app/webroot/css/co-responsive.css b/app/webroot/css/co-responsive.css index 34ee850b1..50ed55a08 100644 --- a/app/webroot/css/co-responsive.css +++ b/app/webroot/css/co-responsive.css @@ -76,11 +76,21 @@ position: relative; top: -1px; } - #user-links-cn { - display: none; + #user-panel { + width: 400px; + min-width: 0; + } + #user-panel-user-info { + border-top: none; + margin: 0 80px 0 0; + padding-top: 0; } - #user-links-id { - margin-top: -8px; + #user-panel-user-info #user-panel-cn { + } + #logout-in-panel { + position: absolute; + top: 0; + right: 0; } #notifications li.notification:nth-child(n+4) { /* show all notifications on tablets (and larger) */ display: block; @@ -414,6 +424,9 @@ min-height: 150px; min-width: 0; width: 180px; + -webkit-box-shadow: 1px 1px 1px 0px rgba(245,245,245,1); + -moz-box-shadow: 1px 1px 1px 0px rgba(245,245,245,1); + box-shadow: 1px 1px 1px 0px rgba(245,245,245,1); } .co-dept ul.form-list .field-title { font-weight: normal;