Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Improve UI, add user menu and menu panels
@arlen
arlen committed Mar 28, 2019
1 parent a3938e3 commit b19c82e
Showing 4 changed files with 202 additions and 40 deletions.
51 changes: 48 additions & 3 deletions app/src/Template/Element/javascript.ctp
View file
@@ -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
17 changes: 11 additions & 6 deletions app/src/Template/Element/menuUser.ctp
View file
@@ -28,24 +28,29 @@
?>
<?php if(!empty($vv_user)): ?>
<div id="user">
<a href="#" class="topMenu" id="user-links">
<a href="#" class="topMenu" id="user-panel-toggle" aria-controls="user-panel">
<span id="user-common-name">
<?= $vv_user['username']; ?>
</span>
<em class="material-icons icon-adjust">person</em>
<em class="material-icons drop-arrow">arrow_drop_down</em>
</a>
<ul id="user-links-menu" class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="user-links">
<li id="user-links-cn">XXX Put something here</li>
<li id="logout-in-menu" class="co-menu-button">
<!-- Account Dropdown -->
<div id="user-panel" aria-expanded="false" style="display: none;">
<div id="logout-in-panel">
<?php
print $this->Html->link(__('match.op.logout') . ' <span class="fa fa-sign-out"></span>',
'/auth/logout/logout.php',
['escape' => false,
'class' => 'mdl-button mdl-js-button mdl-js-ripple-effect']);
?>
</li>
</ul>
</div>
<div id="user-panel-user-info">
<em class="material-icons">person</em>
<div id="user-panel-cn"><?= $vv_user['username']; ?></div>
<div id="user-panel-id"><?php print $this->Session->read('Auth.User.username'); ?></div>
</div>
</div>
</div>
<?php endif; ?>

153 changes: 126 additions & 27 deletions app/webroot/css/co-base.css
View file
@@ -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;
}
21 changes: 17 additions & 4 deletions app/webroot/css/co-responsive.css
View file
@@ -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;

0 comments on commit b19c82e

Please sign in to comment.