Updates admin top bar html and styles

This commit is contained in:
decabeza
2018-04-09 18:03:46 +02:00
parent fcae2c0ac2
commit 55c3c79879
2 changed files with 42 additions and 28 deletions

View File

@@ -44,26 +44,34 @@ $sidebar-active: #f4fcd0;
background: #000;
}
.admin-top-bar {
background: #fff;
}
.top-bar {
background: #fff !important;
border-bottom: 1px solid #eee;
box-shadow: 0 2px 2px #eee;
color: #000;
height: auto;
@include breakpoint(medium) {
box-shadow: 0 2px 2px #eee;
}
[class^="icon-"]:not(.icon-circle) {
font-size: $base-font-size;
}
}
.top-bar-title {
.menu .menu-text {
h1 {
margin-bottom: 0;
margin-top: $line-height / 2;
margin-bottom: 0;
@include breakpoint(medium) {
margin-left: $line-height / 2;
margin-top: 0;
}
small {
@@ -94,12 +102,17 @@ $sidebar-active: #f4fcd0;
}
}
.menu-icon.dark {
.title-bar {
color: #000;
position: absolute;
right: 12px;
}
&::after,
&:hover::after {
background: #000 !important;
box-shadow: 0 7px 0 #000, 0 14px 0 #000 !important;
.menu-icon {
&::after {
background: #000;
box-shadow: 0 7px 0 #000, 0 14px 0 #000;
}
}

View File

@@ -1,38 +1,39 @@
<header class="header">
<div class="top-links">
<div class="expanded row">
<%= render 'shared/locale_switcher' %>
<%= render "shared/locale_switcher" %>
</div>
</div>
<div class="expanded row">
<div class="expanded row admin-top-bar">
<div class="title-bar" data-responsive-toggle="responsive_menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="responsive_menu"></button>
<div class="title-bar-title"><%= t("application.menu")%></div>
</div>
<div class="top-bar">
<span data-responsive-toggle="responsive_menu" data-hide-for="medium" class="float-right">
<span class="menu-icon dark" data-toggle></span>
<%= t("application.menu")%>
</span>
<div class="top-bar-title">
<div class="top-bar-left">
<ul class="menu">
<li class="menu-text">
<h1>
<%= link_to admin_root_path do %>
<%= setting['org_name'] %>
<%= link_to namespaced_root_path do %>
<%= setting["org_name"] %>
<br><small><%= namespaced_header_title %></small>
<% end %>
</h1>
</li>
</ul>
</div>
<div id="responsive_menu">
<div id="responsive_menu">
<div class="top-bar-right">
<ul class="menu" data-responsive-menu="medium-dropdown">
<ul class="dropdown menu" data-dropdown-menu>
<%= render "admin/shared/admin_shortcuts" %>
<%= render "shared/admin_login_items" %>
<%= render "layouts/notification_item" %>
<%= render "devise/menu/login_items" %>
</ul>
</div>
</div>
</div>
</div>