Przeglądaj źródła

HUE-1945 [core] Navigation bar is cut on some resolutions

Introduced media queries for the navigation bar
Enrico Berti 11 lat temu
rodzic
commit
c53e420

+ 3 - 3
desktop/core/src/desktop/templates/common_header.mako

@@ -270,13 +270,13 @@ from django.utils.translation import ugettext as _
   <ul class="nav nav-pills">
     <li class="divider-vertical"></li>
     % if 'filebrowser' in apps:
-    <li><a title="${_('Manage HDFS')}" rel="navigator-tooltip" href="/${apps['filebrowser'].display_name}"><i class="fa fa-file"></i>&nbsp;${_('File Browser')}&nbsp;</a></li>
+    <li><a title="${_('Manage HDFS')}" rel="navigator-tooltip" href="/${apps['filebrowser'].display_name}"><i class="fa fa-file"></i><span class="hideable">&nbsp;${_('File Browser')}&nbsp;</span></a></li>
     % endif
     % if 'jobbrowser' in apps:
-    <li><a title="${_('Manage jobs')}" rel="navigator-tooltip" href="/${apps['jobbrowser'].display_name}"><i class="fa fa-list-alt"></i>&nbsp;${_('Job Browser')}&nbsp;<span id="jobBrowserCount" class="badge badge-warning hide" style="padding-top:0;padding-bottom: 0"></span></a></li>
+    <li><a title="${_('Manage jobs')}" rel="navigator-tooltip" href="/${apps['jobbrowser'].display_name}"><i class="fa fa-list-alt"></i><span class="hideable">&nbsp;${_('Job Browser')}&nbsp;</span><span id="jobBrowserCount" class="badge badge-warning hide" style="padding-top:0;padding-bottom: 0"></span></a></li>
     % endif
     <li class="dropdown">
-      <a title="${ _('Administration') }" rel="navigator-tooltip" href="index.html#" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-cogs"></i>&nbsp;&nbsp;${user.username}<b class="caret"></b></a>
+      <a title="${ _('Administration') }" rel="navigator-tooltip" href="index.html#" data-toggle="dropdown" class="dropdown-toggle"><i class="fa fa-cogs"></i>&nbsp;<span class="hideable">${user.username}&nbsp;</span><b class="caret"></b></a>
       <ul class="dropdown-menu">
         <li><a href="${ url('useradmin.views.edit_user', username=urllib.quote(user.username)) }"><i class="fa fa-key"></i>&nbsp;&nbsp;${_('Edit Profile')}</a></li>
         %if user.is_superuser:

+ 20 - 1
desktop/core/static/css/hue3.css

@@ -1392,13 +1392,32 @@ a#advanced-btn:hover {
   background-color: #338BB8;
   height: 28px;
   z-index: 1033;
-  min-width: 1100px;
+  min-width: 740px;
 }
 
 .navigator .brand {
   padding-top: 0 !important;
 }
 
+@media (max-width: 1180px) {
+  .navigator .nav-tabs > li > a, .navigator .nav-pills > li > a {
+    padding-right: 6px;
+    padding-left: 6px;
+  }
+}
+
+@media (max-width: 1024px) {
+  .navigator .hideable {
+    display: none;
+  }
+}
+
+@media (max-width: 830px) {
+  .brand {
+    display: none;
+  }
+}
+
 .navbar-fixed-top {
   top: 28px;
 }