Skip to content
Snippets Groups Projects
Commit 3892a91d authored by Tom Robinson's avatar Tom Robinson
Browse files

Better nav dropdown implementation

parent 898bfd11
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
resources/frontend_client/app/css/home.css
+ 59
− 26
View file @ 3892a91d
......@@ -41,42 +41,75 @@
transition: background .3s linear;
}
.NavDropdown.Dropdown .NavItem {
border: 1px solid transparent;
.NavDropdown {
position: relative;
}
.NavDropdown.Dropdown.open .NavItem {
background-color: #6FB0EB;
.NavDropdown.open {
z-index: 100;
}
.NavDropdown .NavDropdown-content {
display: none;
}
.NavDropdown.open .NavDropdown-content {
display: inherit;
}
.NavDropdown .NavDropdown-button {
position: relative;
z-index: 21;
border-top: 1px solid rgba(0,0,0,0.12);
border-left: 1px solid rgba(0,0,0,0.12);
border-right: 1px solid rgba(0,0,0,0.12);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-radius: 8px;
}
.NavDropdown .NavDropdown-content {
position: absolute;
/*margin-top: -15px;*/
border-radius: 4px;
top: 38px;
min-width: 200px;
}
.NavDropdown .NavDropdown-button:before,
.NavDropdown .NavDropdown-content:before {
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 4px rgba(0, 0, 0, .12);
background-clip: padding-box;
padding-bottom: 7px;
margin-bottom: 9px;
}
.NavDropdown.Dropdown .Dropdown-content {
background-color: #6FB0EB;
border-top-left-radius: 0px;
padding-top: 0;
padding-bottom: 0;
border: 1px solid rgba(0,0,0,0.12);
.NavDropdown .NavDropdown-content:before {
z-index: -2;
border-radius: 4px;
}
.NavDropdown .NavDropdown-button:before {
z-index: -1;
border-radius: 8px;
}
.NavDropdown .NavDropdown-content-layer {
position: relative;
z-index: 1;
overflow: hidden;
}
.NavDropdown .NavDropdown-button-layer {
position: relative;
z-index: 2;
}
.NavDropdown.open .NavDropdown-button,
.NavDropdown .NavDropdown-content-layer {
background-color: #6FB0EB;
}
.NavDropdown .NavDropdown-content-layer {
padding-top: 10px;
border-radius: 4px;
}
.NavDropdown.Dropdown.open .Dropdown-content
{
transition: none;
min-width: 20em;
.NavDropdown .DashboardList {
min-width: 332px;
}
.NavDropdown.Dropdown .Dropdown-item {
padding: 1rem;
border-color: rgba(255,255,255,0.2) !important;
.NavDropdown .Dropdown-item {
border-color: rgba(255,255,255,0.2);
}
.Entity-title {
......
resources/frontend_client/app/directives.js
+ 1
− 13
View file @ 3892a91d
......@@ -165,19 +165,7 @@ NavbarDirectives.directive('mbProfileLink', [function () {
return {
restrict: 'E',
replace: true,
template: '<div class="NavDropdown Dropdown inline-block" dropdown on-toggle="toggled(open)">' +
'<a class="NavItem flex align-center p2" selectable-nav-item="settings" dropdown-toggle>' +
'<span class="UserNick">' +
'<span class="UserInitials NavItem-text">{{initials}}</span> ' +
'</span>' +
'<mb-icon name="chevrondown" class="Dropdown-chevron ml1" width="8px" height="8px"></mb-icon>' +
'</a>' +
'<ul class="Dropdown-content right">' +
'<li class="Dropdown-item"><a class="text-white no-decoration" href="/user/edit_current">Account Settings</a></li>' +
'<li class="Dropdown-item"><a class="text-white no-decoration" ng-if="user.is_superuser" href="/admin/">Admin Panel</a></li>' +
'<li class="Dropdown-item border-top"><a class="text-white no-decoration" href="/auth/logout">Logout</a></li>' +
'</ul>' +
'</div>',
templateUrl: '/app/partials/mb_profile_link.html',
scope: {
context: '=',
user: '='
......
resources/frontend_client/app/partials/mb_profile_link.html 0 → 100644
+ 18
− 0
View file @ 3892a91d
<div class="NavDropdown inline-block" dropdown on-toggle="toggled(open)">
<a class="NavDropdown-button NavItem flex align-center p2" selectable-nav-item="settings" dropdown-toggle>
<div class="NavDropdown-button-layer">
<span class="UserNick">
<span class="UserInitials NavItem-text">{{initials}}</span>
</span>
<!-- <mb-icon name="chevrondown" class="Dropdown-chevron ml1" width="8px" height="8px"></mb-icon> -->
</div>
</a>
<div class="NavDropdown-content right">
<ul class="NavDropdown-content-layer">
<li class="Dropdown-item"><a class="text-white no-decoration" href="/user/edit_current">Account Settings</a></li>
<li class="Dropdown-item" ng-if="user.is_superuser &amp;&amp; context !== 'admin'"><a class="text-white no-decoration" href="/admin/">Admin Panel</a></li>
<li class="Dropdown-item" ng-if="user.is_superuser &amp;&amp; context === 'admin'"><a class="text-white no-decoration" href="/">Exit Admin</a></li>
<li class="Dropdown-item border-top"><a class="text-white no-decoration" href="/auth/logout">Logout</a></li>
</ul>
</div>
</div>
resources/frontend_client/index.html
+ 21
− 23
View file @ 3892a91d
......@@ -21,29 +21,30 @@
<a class="NavItem cursor-pointer text-white flex align-center" href="/">
<mb-logo-icon class="text-white"></mb-logo-icon>
</a>
<div class="NavDropdown Dropdown ml1 md-ml3" dropdown on-toggle="toggled(open)">
<a class="NavItem text-white cursor-pointer p2 flex align-center" dropdown-toggle>
Dashboards
<mb-icon class="ml1" name="chevrondown" width="8px" height="8px"></mb-icon>
<div class="NavDropdown ml1 md-ml3" dropdown on-toggle="toggled(open)">
<a class="NavDropdown-button NavItem text-white cursor-pointer p2 flex align-center" dropdown-toggle>
<span class="NavDropdown-button-layer">
Dashboards
<mb-icon class="ml1" name="chevrondown" width="8px" height="8px"></mb-icon>
</span>
</a>
<ul class="Dropdown-content" ng-controller="DashList">
<li class="Dropdown-item" ng-repeat="dash in dashboards">
<a class="text-white no-decoration" href="/dash/{{dash.id}}">
<div class="flex text-bold">
{{dash.name}}
<mb-icon class="ml1 flex flex-align-right align-center" name="lock" width="12px" height="12px" ng-if="dash.public_perms === 0"></mb-icon>
</div>
<div class="mt1 text-light text-brand-light">
{{dash.description}}
</div>
</a>
</li>
</ul>
<div class="NavDropdown-content">
<ul class="NavDropdown-content-layer DashboardList" ng-controller="DashList">
<li class="Dropdown-item" ng-repeat="dash in dashboards">
<a class="text-white no-decoration" href="/dash/{{dash.id}}">
<div class="flex text-bold">
{{dash.name}}
<mb-icon class="ml1 flex flex-align-right align-center" name="lock" width="12px" height="12px" ng-if="dash.public_perms === 0"></mb-icon>
</div>
<div class="mt1 text-light text-brand-light">
{{dash.description}}
</div>
</a>
</li>
</ul>
</div>
</div>
<mb-profile-link class="text-white flex-align-right" user="user" context="nav"></mb-profile-link>
<a class="AdminLink NavItem hide sm-show sm-ml1 md-ml2" ng-if="user.is_superuser" href="/admin/">
<mb-icon class="text-white" name="gear" width="16px" height="16px"></mb-icon>
</a>
</div>
</nav>
......@@ -76,9 +77,6 @@
<!-- user profile dropdown -->
<mb-profile-link user="user" context="nav"></mb-profile-link>
<a class="text-white ml1 md-ml2" href="/">
<mb-icon name="return" width="22px" height="22px"></mb-icon>
</a>
</div>
</nav>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment