Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-07-17 00:32:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refined header bar styles

Browse Source 
- Updated many items to be flexbox-based.
- Updated & aligned hover states across header bar items.
This commit is contained in:
Dan Brown 2022-05-17 14:16:43 +01:00
parent 340c9ec7a1
commit 4866a3a198
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
2 changed files with 102 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
resources/sass/_header.scss
View File

@ -21,19 +21,28 @@ header {
color: rgb(250, 250, 250); color: rgb(250, 250, 250);
border-bottom: 1px solid #DDD; border-bottom: 1px solid #DDD;
box-shadow: $bs-card; box-shadow: $bs-card;
padding: $-xxs 0;
@include lightDark(border-bottom-color, #DDD, #000); @include lightDark(border-bottom-color, #DDD, #000);
@include whenDark { @include whenDark {
filter: saturate(0.8) brightness(0.8); filter: saturate(0.8) brightness(0.8);
} }
.header-links {
display: flex;
align-items: center;
justify-content: end;
}
.links { .links {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
.links a { .links a {
display: inline-block; display: inline-block;
padding: $-m; padding: 10px $-m;
color: #FFF; color: #FFF;
border-radius: 3px;
}
.links a:hover {
text-decoration: none;
background-color: rgba(255, 255, 255, .15);
} }
.dropdown-container { .dropdown-container {
padding-inline-start: $-m; padding-inline-start: $-m;
@ -49,19 +58,25 @@ header {
.user-name { .user-name {
vertical-align: top; vertical-align: top;
position: relative; position: relative;
display: inline-block; display: inline-flex;
align-items: center;
cursor: pointer; cursor: pointer;
> * { padding: $-s;
vertical-align: top; margin: 0 (-$-s);
} border-radius: 3px;
gap: $-xs;
> span { > span {
padding-inline-start: $-xs; padding-inline-start: $-xs;
display: inline-block; display: inline-block;
padding-top: $-xxs; line-height: 1;
} }
> svg { > svg {
padding-top: 4px;
font-size: 18px; font-size: 18px;
margin-top: -2px;
margin-inline-end: 0;
}
&:hover {
background-color: rgba(255, 255, 255, 0.15);
} }
@include between($l, $xl) { @include between($l, $xl) {
padding-inline-start: $-xs; padding-inline-start: $-xs;
@ -79,7 +94,6 @@ header {
header .search-box { header .search-box {
display: inline-block; display: inline-block;
margin-top: 10px;
input { input {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.2);
@ -91,12 +105,15 @@ header .search-box {
padding-inline-start: 40px; padding-inline-start: 40px;
&:focus { &:focus {
outline: none; outline: none;
border: 1px solid rgba(255, 255, 255, 0.6); border: 1px solid rgba(255, 255, 255, 0.4);
} }
} }
button { button {
z-index: 1; z-index: 1;
left: 16px; left: 16px;
top: 10px;
color: #FFF;
opacity: 0.6;
@include lightDark(color, rgba(255, 255, 255, 0.8), #AAA); @include lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
@include rtl { @include rtl {
left: auto; left: auto;
@ -106,36 +123,39 @@ header .search-box {
margin-block-end: 0; margin-block-end: 0;
} }
} }
::-webkit-input-placeholder { /* Chrome/Opera/Safari */ input::placeholder {
color: #DDD; color: #FFF;
} opacity: 0.6;
::-moz-placeholder { /* Firefox 19+ */
color: #DDD;
} }
@include between($l, $xl) { @include between($l, $xl) {
max-width: 200px; max-width: 200px;
} }
&:focus-within button {
opacity: 1;
}
} }
.logo { .logo {
display: inline-block; display: inline-flex;
padding: ($-s - 6px) $-s;
margin: 6px (-$-s);
gap: $-s;
align-items: center;
border-radius: 4px;
&:hover { &:hover {
color: #FFF; color: #FFF;
text-decoration: none; text-decoration: none;
background-color: rgba(255, 255, 255, .15);
} }
} }
.logo-text { .logo-text {
display: inline-block;
font-size: 1.8em; font-size: 1.8em;
color: #fff; color: #fff;
font-weight: 400; font-weight: 400;
@include padding(14px, $-l, 14px, 0);
vertical-align: top;
line-height: 1; line-height: 1;
} }
.logo-image { .logo-image {
@include margin($-xs, $-s, $-xs, 0);
vertical-align: top;
height: 43px; height: 43px;
} }

124
resources/views/common/header.blade.php
View File

@ -17,7 +17,7 @@
class="mobile-menu-toggle hide-over-l">@icon('more')</button> class="mobile-menu-toggle hide-over-l">@icon('more')</button>
</div> </div>
<div class="flex-container-row justify-center hide-under-l"> <div class="flex-container-column items-center justify-center hide-under-l">
@if (hasAppAccess()) @if (hasAppAccess())
<form action="{{ url('/search') }}" method="GET" class="search-box" role="search"> <form action="{{ url('/search') }}" method="GET" class="search-box" role="search">
<button id="header-search-box-button" type="submit" aria-label="{{ trans('common.search') }}" tabindex="-1">@icon('search') </button> <button id="header-search-box-button" type="submit" aria-label="{{ trans('common.search') }}" tabindex="-1">@icon('search') </button>
@ -28,76 +28,74 @@
@endif @endif
</div> </div>
<div class="text-right"> <nav refs="header-mobile-toggle@menu" class="header-links">
<nav refs="header-mobile-toggle@menu" class="header-links"> <div class="links text-center">
<div class="links text-center"> @if (hasAppAccess())
@if (hasAppAccess()) <a class="hide-over-l" href="{{ url('/search') }}">@icon('search'){{ trans('common.search') }}</a>
<a class="hide-over-l" href="{{ url('/search') }}">@icon('search'){{ trans('common.search') }}</a> @if(userCanOnAny('view', \BookStack\Entities\Models\Bookshelf::class) || userCan('bookshelf-view-all') || userCan('bookshelf-view-own'))
@if(userCanOnAny('view', \BookStack\Entities\Models\Bookshelf::class) || userCan('bookshelf-view-all') || userCan('bookshelf-view-own')) <a href="{{ url('/shelves') }}">@icon('bookshelf'){{ trans('entities.shelves') }}</a>
<a href="{{ url('/shelves') }}">@icon('bookshelf'){{ trans('entities.shelves') }}</a>
@endif
<a href="{{ url('/books') }}">@icon('books'){{ trans('entities.books') }}</a>
@if(signedInUser() && userCan('settings-manage'))
<a href="{{ url('/settings') }}">@icon('settings'){{ trans('settings.settings') }}</a>
@endif
@if(signedInUser() && userCan('users-manage') && !userCan('settings-manage'))
<a href="{{ url('/settings/users') }}">@icon('users'){{ trans('settings.users') }}</a>
@endif
@endif @endif
<a href="{{ url('/books') }}">@icon('books'){{ trans('entities.books') }}</a>
@if(signedInUser() && userCan('settings-manage'))
<a href="{{ url('/settings') }}">@icon('settings'){{ trans('settings.settings') }}</a>
@endif
@if(signedInUser() && userCan('users-manage') && !userCan('settings-manage'))
<a href="{{ url('/settings/users') }}">@icon('users'){{ trans('settings.users') }}</a>
@endif
@endif
@if(!signedInUser()) @if(!signedInUser())
@if(setting('registration-enabled') && config('auth.method') === 'standard') @if(setting('registration-enabled') && config('auth.method') === 'standard')
<a href="{{ url('/register') }}">@icon('new-user'){{ trans('auth.sign_up') }}</a> <a href="{{ url('/register') }}">@icon('new-user'){{ trans('auth.sign_up') }}</a>
@endif
<a href="{{ url('/login') }}">@icon('login'){{ trans('auth.log_in') }}</a>
@endif @endif
</div> <a href="{{ url('/login') }}">@icon('login'){{ trans('auth.log_in') }}</a>
@if(signedInUser()) @endif
<?php $currentUser = user(); ?> </div>
<div class="dropdown-container" component="dropdown" option:dropdown:bubble-escapes="true"> @if(signedInUser())
<?php $currentUser = user(); ?>
<div class="dropdown-container" component="dropdown" option:dropdown:bubble-escapes="true">
<span class="user-name py-s hide-under-l" refs="dropdown@toggle" <span class="user-name py-s hide-under-l" refs="dropdown@toggle"
aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.profile_menu') }}" tabindex="0"> aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.profile_menu') }}" tabindex="0">
<img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}"> <img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
<span class="name">{{ $currentUser->getShortName(9) }}</span> @icon('caret-down') <span class="name">{{ $currentUser->getShortName(9) }}</span> @icon('caret-down')
</span> </span>
<ul refs="dropdown@menu" class="dropdown-menu" role="menu"> <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
<li> <li>
<a href="{{ url('/favourites') }}" class="icon-item"> <a href="{{ url('/favourites') }}" class="icon-item">
@icon('star') @icon('star')
<div>{{ trans('entities.my_favourites') }}</div> <div>{{ trans('entities.my_favourites') }}</div>
</a> </a>
</li> </li>
<li> <li>
<a href="{{ $currentUser->getProfileUrl() }}" class="icon-item"> <a href="{{ $currentUser->getProfileUrl() }}" class="icon-item">
@icon('user') @icon('user')
<div>{{ trans('common.view_profile') }}</div> <div>{{ trans('common.view_profile') }}</div>
</a> </a>
</li> </li>
<li> <li>
<a href="{{ $currentUser->getEditUrl() }}" class="icon-item"> <a href="{{ $currentUser->getEditUrl() }}" class="icon-item">
@icon('edit') @icon('edit')
<div>{{ trans('common.edit_profile') }}</div> <div>{{ trans('common.edit_profile') }}</div>
</a> </a>
</li> </li>
<li> <li>
<form action="{{ url(config('auth.method') === 'saml2' ? '/saml2/logout' : '/logout') }}" <form action="{{ url(config('auth.method') === 'saml2' ? '/saml2/logout' : '/logout') }}"
method="post"> method="post">
{{ csrf_field() }} {{ csrf_field() }}
<button class="icon-item"> <button class="icon-item">
@icon('logout') @icon('logout')
<div>{{ trans('auth.logout') }}</div> <div>{{ trans('auth.logout') }}</div>
</button> </button>
</form> </form>
</li> </li>
<li><hr></li> <li><hr></li>
<li> <li>
@include('common.dark-mode-toggle', ['classes' => 'icon-item']) @include('common.dark-mode-toggle', ['classes' => 'icon-item'])
</li> </li>
</ul> </ul>
</div> </div>
@endif @endif
</nav> </nav>
</div>
</div> </div>
</header> </header>