Merge pull request #2334 from sparc-request/yw-navbar-ui-improvement

(SPARC NavBar) UI Improvement Needed for Narrow Screens
sparc-request · May 12, 2020 · 93dd20e · 93dd20e
2 parents 4c1659f + 1b4d67d
commit 93dd20e
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 7 deletions.
diff --git a/app/assets/stylesheets/custom/bootstrap-custom.scss b/app/assets/stylesheets/custom/bootstrap-custom.scss
@@ -658,7 +658,7 @@ nav.navbar {
         padding: 1rem 1.5rem !important;
         border-right: 0 !important;
         border-bottom: 1px solid theme-color-level('light', 1);
-        justify-content: right;
+        justify-content: left;
       }
     }
 

diff --git a/app/assets/stylesheets/navbar.scss b/app/assets/stylesheets/navbar.scss
@@ -32,8 +32,8 @@ nav#siteNav {
 
     .profile {
       .notification-badge {
-        top: 2px;
         right: 10px;
+        position: relative;
       }
     }
   }

diff --git a/app/views/layouts/_navbar.html.haml b/app/views/layouts/_navbar.html.haml
@@ -24,12 +24,12 @@
       .navbar-nav.mr-auto
         - Setting.get_value("navbar_links").each do |identifier, data|
           = navbar_link(identifier, data, @highlighted_link)
+    %button.btn.btn-primary.navbar-toggler.p-0.border-0.text-light{ type: 'button', data: { toggle: 'collapse', target: '#navbarLinks' }, aria: { controls: 'navbarLinks', expanded: 'false', label: t('layout.navigation.toggle') } }
+      = icon('fas', 'bars fa-2x')
     .navbar-nav#navbarUtilities
       - if Setting.get_value('use_news_feed')
         = render 'layouts/news'
       - if Setting.get_value('use_google_calendar')
         = render 'layouts/events'
       = render 'layouts/profile'
       = render 'layouts/help'
-    %button.btn.btn-primary.navbar-toggler.p-0.border-0.text-light{ type: 'button', data: { toggle: 'collapse', target: '#navbarLinks' }, aria: { controls: 'navbarLinks', expanded: 'false', label: t('layout.navigation.toggle') } }
-      = icon('fas', 'bars fa-2x')
diff --git a/app/views/layouts/_profile.html.haml b/app/views/layouts/_profile.html.haml
@@ -21,9 +21,10 @@
 - if current_user
   .nav-item.dropdown.no-caret.profile
     = link_to 'javascript:void(0)', class: 'nav-link dropdown-toggle', id: 'profileDropdown', role: 'button', aria: { haspopup: 'true', expanded: 'false' } do
-      = icon('fas', 'user-circle fa-2x')
-      - if current_user.unread_notification_count > 0
-        %span.badge.badge-pill.badge-c.badge-danger.notification-badge &nbsp;
+      .d-flex.justify-content-center
+        = icon('fas', 'user-circle fa-2x')
+        - if current_user.unread_notification_count > 0
+          %span.badge.badge-pill.badge-c.badge-danger.notification-badge &nbsp;
     .dropdown-menu.dropdown-menu-xl-right{ aria: { labelledby: 'profileDropdown' } }
       = link_to 'javascript:void(0)', class: 'dropdown-header d-flex text-secondary' do
         = icon('fas', 'user-circle fa-3x mr-2')