Hide username and password in eg2 when screen is narrow

The Angular staff client navbar doesn't collapse when the screen is narrow
but currently the username and password can wrap, pushing the navbar over
the content. This patch doesn't add a collapsing navbar but hiding the user
information does at least stop the navbar from growing.

Signed-off-by: Jason Boyer <JBoyer@equinoxOLI.org>
Signed-off-by: rfrasur <rfrasur@library.in.gov>
Signed-off-by: Mike Rylander <mrylander@gmail.com>

diff --git a/Open-ILS/src/eg2/src/app/staff/nav.component.css b/Open-ILS/src/eg2/src/app/staff/nav.component.css
index cb779b0..2df005a 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/nav.component.css
+++ b/Open-ILS/src/eg2/src/app/staff/nav.component.css
@@ -69,3 +69,10 @@
     align-items: center;
 }
 
+/* Hide the username@workstation if the screen is too narrow.
+Based on the hidden-sm class selector in Bootstrap. */
+@media (max-width: 991px) {
+    .navbar-user {
+        display: none !important
+    }
+}

diff --git a/Open-ILS/src/eg2/src/app/staff/nav.component.html b/Open-ILS/src/eg2/src/app/staff/nav.component.html
index 76f4e71..6440486 100644 (file)
--- a/Open-ILS/src/eg2/src/app/staff/nav.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/nav.component.html
@@ -405,7 +405,7 @@
 
 
     <div class="navbar-nav mr-auto"></div>
-    <div class="navbar-nav" *ngIf="user()">
+    <div class="navbar-nav navbar-user" *ngIf="user()">
       <span i18n>{{user()}} @ {{workstation()}}</span>
     </div>
     <div class="navbar-nav" *ngIf="locales.length > 1 && currentLocale">