Refined header bar styles

- Updated many items to be flexbox-based.
- Updated & aligned hover states across header bar items.

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

diff --git a/resources/views/common/header.blade.php b/resources/views/common/header.blade.php
index b5ac520c18f37755388da0be91cd2a43cf01bc11..197b80c27ec10c20da9399bd195d0e190d8e69e8 100644 (file)
--- a/resources/views/common/header.blade.php
+++ b/resources/views/common/header.blade.php
@@ -17,7 +17,7 @@
                     class="mobile-menu-toggle hide-over-l">@icon('more')</button>
         </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())
             <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>
@@ -28,76 +28,74 @@
             @endif
         </div>
 
-        <div class="text-right">
-            <nav refs="header-mobile-toggle@menu" class="header-links">
-                <div class="links text-center">
-                    @if (hasAppAccess())
-                        <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'))
-                            <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
+        <nav refs="header-mobile-toggle@menu" class="header-links">
+            <div class="links text-center">
+                @if (hasAppAccess())
+                    <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'))
+                        <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
 
-                    @if(!signedInUser())
-                        @if(setting('registration-enabled') && config('auth.method') === 'standard')
-                            <a href="{{ url('/register') }}">@icon('new-user'){{ trans('auth.sign_up') }}</a>
-                        @endif
-                        <a href="{{ url('/login')  }}">@icon('login'){{ trans('auth.log_in') }}</a>
+                @if(!signedInUser())
+                    @if(setting('registration-enabled') && config('auth.method') === 'standard')
+                        <a href="{{ url('/register') }}">@icon('new-user'){{ trans('auth.sign_up') }}</a>
                     @endif
-                </div>
-                @if(signedInUser())
-                    <?php $currentUser = user(); ?>
-                    <div class="dropdown-container" component="dropdown" option:dropdown:bubble-escapes="true">
+                    <a href="{{ url('/login')  }}">@icon('login'){{ trans('auth.log_in') }}</a>
+                @endif
+            </div>
+            @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"
                               aria-haspopup="true" aria-expanded="false" aria-label="{{ trans('common.profile_menu') }}" tabindex="0">
                             <img class="avatar" src="{{$currentUser->getAvatar(30)}}" alt="{{ $currentUser->name }}">
                             <span class="name">{{ $currentUser->getShortName(9) }}</span> @icon('caret-down')
                         </span>
-                        <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
-                            <li>
-                                <a href="{{ url('/favourites') }}" class="icon-item">
-                                    @icon('star')
-                                    <div>{{ trans('entities.my_favourites') }}</div>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="{{ $currentUser->getProfileUrl() }}" class="icon-item">
-                                    @icon('user')
-                                    <div>{{ trans('common.view_profile') }}</div>
-                                </a>
-                            </li>
-                            <li>
-                                <a href="{{ $currentUser->getEditUrl() }}" class="icon-item">
-                                    @icon('edit')
-                                    <div>{{ trans('common.edit_profile') }}</div>
-                                </a>
-                            </li>
-                            <li>
-                                <form action="{{ url(config('auth.method') === 'saml2' ? '/saml2/logout' : '/logout') }}"
-                                      method="post">
-                                    {{ csrf_field() }}
-                                    <button class="icon-item">
-                                        @icon('logout')
-                                        <div>{{ trans('auth.logout') }}</div>
-                                    </button>
-                                </form>
-                            </li>
-                            <li><hr></li>
-                            <li>
-                                @include('common.dark-mode-toggle', ['classes' => 'icon-item'])
-                            </li>
-                        </ul>
-                    </div>
-                @endif
-            </nav>
-        </div>
+                    <ul refs="dropdown@menu" class="dropdown-menu" role="menu">
+                        <li>
+                            <a href="{{ url('/favourites') }}" class="icon-item">
+                                @icon('star')
+                                <div>{{ trans('entities.my_favourites') }}</div>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="{{ $currentUser->getProfileUrl() }}" class="icon-item">
+                                @icon('user')
+                                <div>{{ trans('common.view_profile') }}</div>
+                            </a>
+                        </li>
+                        <li>
+                            <a href="{{ $currentUser->getEditUrl() }}" class="icon-item">
+                                @icon('edit')
+                                <div>{{ trans('common.edit_profile') }}</div>
+                            </a>
+                        </li>
+                        <li>
+                            <form action="{{ url(config('auth.method') === 'saml2' ? '/saml2/logout' : '/logout') }}"
+                                  method="post">
+                                {{ csrf_field() }}
+                                <button class="icon-item">
+                                    @icon('logout')
+                                    <div>{{ trans('auth.logout') }}</div>
+                                </button>
+                            </form>
+                        </li>
+                        <li><hr></li>
+                        <li>
+                            @include('common.dark-mode-toggle', ['classes' => 'icon-item'])
+                        </li>
+                    </ul>
+                </div>
+            @endif
+        </nav>
 
     </div>
 </header>