Merge pull request #683 from biigle/mobile-navbar

Improve navbar (for mobile)
biigle · Oct 24, 2023 · 6798696 · 6798696
2 parents 9360e41 + bf58e81
commit 6798696
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 31 deletions.
diff --git a/resources/assets/sass/_navbar.scss b/resources/assets/sass/_navbar.scss
@@ -1,4 +1,43 @@
+// Disable navbar collapse on small screens.
+.navbar-header {
+    float: left !important;
+}
+
+.navbar-right {
+    float: right !important;
+}
+
+.navbar-nav {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+
+    .open .dropdown-menu {
+        position: absolute  !important;
+    }
+}
+
+.navbar-right .dropdown-menu {
+    right: 0 !important;
+    left: auto !important;
+}
+
+.navbar-nav > li {
+    float: left !important;
+}
+
+.navbar-default .navbar-nav .open .dropdown-menu > li > a {
+    color: $gray-darker !important;
+}
+
+@media (max-width: $screen-sm-max) {
+    .navbar-left {
+        display: none;
+    }
+}
+
 .dropdown-menu {
+    background-color: $gray-lighter !important;
+
     .divider {
         margin: 3px 0;
     }
@@ -89,3 +128,17 @@
         }
     }
 }
+
+.navbar-btn-link {
+    .btn-default:not(:hover) {
+        background-color: transparent;
+    }
+}
+
+.nav > li > a.navbar-btn-link {
+    padding: 8px 3px;
+}
+
+.nav > li:last-child > a.navbar-btn-link {
+    margin-right: 12px; // 15px space with the 3px padding
+}
diff --git a/resources/assets/sass/_notifications.scss b/resources/assets/sass/_notifications.scss
@@ -1,29 +1,7 @@
-@keyframes notification-blink {
-    0% {opacity: 0;}
-    1% {opacity: 1;}
-    2% {opacity: 0;}
-    3% {opacity: 1;}
-    4% {opacity: 0;}
-    5% {opacity: 1;}
-}
-
 .notifications-icon {
     position: relative;
 }
 
-.notifications-icon__count {
-    position: absolute;
-    display: block;
-    top: 10px;
-    right: 7px;
-    width: 10px;
-    height: 10px;
-    border-radius: 5px;
-    background-color: $brand-info;
-    border: 1px solid white;
-    animation: notification-blink 20s infinite;
-}
-
 .notification__action {
     margin-top: 10px;
     margin-bottom: 0;

diff --git a/resources/views/partials/help-menu.blade.php b/resources/views/partials/help-menu.blade.php
@@ -1,5 +1,9 @@
 <li id="help-menu" is="dropdown" ref="dropdown" tag="li">
-    <a href="#" onclick="event.preventDefault()" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" title="Help menu"><i class="fa fa-question-circle"></i></a>
+    <a href="#" onclick="event.preventDefault()" class="dropdown-toggle navbar-btn-link" role="button" aria-haspopup="true" aria-expanded="false" title="Help menu">
+        <span class="btn btn-default">
+            <i class="fa fa-question-circle"></i> <span class="caret"></span>
+        </span>
+    </a>
     <template slot="dropdown">
         <li>
             <a href="{{ route('manual') }}" title="View the manual">Manual</a>

diff --git a/resources/views/partials/navbar.blade.php b/resources/views/partials/navbar.blade.php
@@ -20,18 +20,21 @@
                 <ul class="nav navbar-nav">
                     @can('sudo')
                         <li class="sudo-mode-indicator" title="You are in Super User Mode">
-                            <p class="navbar-text">su</p>
+                            <a href="{{route('settings-account')}}" class="navbar-btn-link">
+                                <span class="btn btn-danger">
+                                    su
+                                </span>
+                            </a>
                         </li>
                     @endcan
                     <li>
-                        <a href="{{route('search')}}" title="Search"><i class="fa fa-search"></i></a>
+                        <a href="{{route('search')}}" title="Search" class="navbar-btn-link"><span class="btn btn-default"><i class="fa fa-search"></i></span></a>
                     </li>
                     <li>
-                        <a href="{{route('notifications')}}" class="notifications-icon" @if ($hasNotification) title="You have unread notifications" @else title="Notifications" @endif>
-                            <i class="fa fa-bell"></i>
-                            @if ($hasNotification)
-                                <span class="notifications-icon__count"></span>
-                            @endif
+                        <a href="{{route('notifications')}}" class="notifications-icon navbar-btn-link" @if ($hasNotification) title="You have unread notifications" @else title="Notifications" @endif>
+                            <span class="btn @if ($hasNotification) btn-info @else btn-default @endif">
+                                <i class="fa fa-bell"></i>
+                            </span>
                         </a>
                     </li>
                     @include('partials.help-menu')

diff --git a/resources/views/partials/top-menu.blade.php b/resources/views/partials/top-menu.blade.php
@@ -1,5 +1,9 @@
 <li id="top-menu" is="dropdown" ref="dropdown" tag="li">
-    <a href="#" onclick="event.preventDefault()" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false" title="Main menu"><i class="fa fa-bars"></i></a>
+    <a href="#" onclick="event.preventDefault()" class="dropdown-toggle navbar-btn-link" role="button" aria-haspopup="true" aria-expanded="false" title="Main menu">
+        <span class="btn btn-default">
+            <i class="fa fa-bars"></i> <span class="caret"></span>
+        </span>
+    </a>
     <template slot="dropdown">
         <li class="dropdown-header">
             Signed in as <strong>{{ $user->firstname }} {{ $user->lastname }}</strong>