Fixes netbox-community#1157: Hide nav menu search bar on small displays

lampwins · May 17, 2017 · c08c991 · c08c991
1 parent 83d94e1
commit c08c991
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/netbox/project-static/css/base.css b/netbox/project-static/css/base.css
@@ -74,6 +74,13 @@ footer p {
     }
 }
 
+/* Hide the nav search bar on displays less than 1600px wide */
+@media (max-width: 1599px) {
+    #navbar_search {
+        display: none;
+    }
+}
+
 /* Forms */
 label {
     font-weight: normal;

diff --git a/netbox/templates/_base.html b/netbox/templates/_base.html
@@ -246,8 +246,8 @@
                 <ul class="nav navbar-nav navbar-right">
                     {% if request.user.is_authenticated %}
                         <li class="dropdown">
-                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-                                {{ request.user }} <span class="caret"></span>
+                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" title="{{ request.user }}" role="button" aria-haspopup="true" aria-expanded="false">
+                                {{ request.user|truncatechars:"30" }} <span class="caret"></span>
                             </a>
                             <ul class="dropdown-menu">
                                 <li><a href="{% url 'user:profile' %}"><i class="fa fa-user" aria-hidden="true"></i> Profile</a></li>
@@ -262,7 +262,7 @@
                         <li><a href="{% url 'login' %}?next={{ request.path }}"><i class="fa fa-sign-in" aria-hidden="true"></i> Log in</a></li>
                     {% endif %}
                 </ul>
-                <form action="{% url 'search' %}" method="get" class="navbar-form navbar-right" role="search">
+                <form action="{% url 'search' %}" method="get" class="navbar-form navbar-right" id="navbar_search" role="search">
                     <div class="input-group">
                         <input type="text" name="q" class="form-control" placeholder="Search">
                         <span class="input-group-btn">