Redesign menu bar to be a bit more compact

This commit is contained in:
Chris 2019-09-26 21:09:18 +01:00
parent f2dbe06d75
commit 32cff846fa
3 changed files with 36 additions and 3 deletions

View File

@ -105,3 +105,35 @@ div.time-duration-picker-content td select {
div.topspace {
margin-top: 0.5rem;
}
.top-bar, .top-bar ul {
background-color: #252888;
}
.menu .button, .menu a {
padding: 0.5rem;
}
.menu.submenu.is-dropdown-submenu {
background-color: #e6e6e6;
}
.dropdown.menu>li.is-dropdown-submenu-parent>a::after {
content: none;
}
.dropdown.menu>li.is-dropdown-submenu-parent>a {
padding-right: 0px;
}
.is-submenu-item.is-dropdown-submenu-item:hover {
background-color: #efefef;
}
div.top-bar-right .menu>li {
margin-left: 0.2rem;
}
div.top-bar-right .dropdown.menu>li>.button{
padding: 0.5rem;
}

View File

@ -1,9 +1,10 @@
<ul class="dropdown menu" data-dropdown-menu>
<li class="image is-dropdown-submenu-parent"><a href="#" class="nopadding"><img alt="" src="https://gravatar.com/avatar/%(gravhash)s?s=32&amp;d=mm&amp;r=g" class="avatar avatar-32" height="32" width="32" /> %(realname)s</a>
<li><a href="%(url-new)s" class="button"><i class="fas fa-plus"></i></a></li>
<li class="image is-dropdown-submenu-parent"><a href="#" class="nopadding"><img alt="" src="https://gravatar.com/avatar/%(gravhash)s?s=32&amp;d=mm&amp;r=g" class="avatar avatar-32" height="32" width="32" /></a>
<ul class="menu">
<li><a href="%(url-setpass)s">Set Password</a></li>
<li><a href="%(url-signout)s">Sign out</a></li>
<!-- ... -->
</ul>
</li>
<li><a class="button failure" href="%(url-signout)s">Sign out</a></li>
</ul>

View File

@ -1,7 +1,7 @@
<div class="top-bar hide-for-print">
<div class="top-bar-left">
<ul class="menu">
<li><button id="menubtn" class="menu-icon dark" type="button" data-open="offCanvas"></button></li>
<li><button id="menubtn" class="menu-icon" type="button" data-open="offCanvas"></button></li>
<li><form action="%(url-search)s" method="POST"><input type="search" name="search" id="search" placeholder="Search"></form></li>
</ul>
</div>