Ver código fonte

HUE-3380 [core] Harmonize menu labels for responsive FB and JB

Enrico Berti 9 anos atrás
pai
commit
5a7eb5eb97

+ 22 - 0
desktop/core/src/desktop/static/desktop/css/hue3.css

@@ -1470,23 +1470,45 @@ a#advanced-btn:hover {
   padding-top: 0 !important;
 }
 
+.hideMoreThan950, .hideMoreThan1180, .hideMoreThan1380 {
+  display: none;
+}
+
 @media (max-width: 1180px) {
   .navigator .nav-tabs > li > a, .navigator .nav-pills > li > a {
     padding-right: 6px;
     padding-left: 6px;
   }
+  .hide1180 {
+    display: none;
+  }
+  .hideMoreThan1180 {
+    display: block;
+  }
 }
 
 @media (max-width: 1380px) {
   .navigator .hideable {
     display: none;
   }
+  .hide1380 {
+    display: none;
+  }
+  .hideMoreThan1380 {
+    display: block;
+  }
 }
 
 @media (max-width: 950px) {
   .brand {
     display: none;
   }
+  .hide950 {
+    display: none;
+  }
+  .hideMoreThan950 {
+    display: block;
+  }
 }
 
 .navbar-fixed-top {

+ 4 - 2
desktop/core/src/desktop/templates/common_header.mako

@@ -379,10 +379,12 @@ if USE_NEW_EDITOR.get():
   <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><span class="hideable">&nbsp;${_('File Browser')}&nbsp;</span></a></li>
+    <li class="hide1380"><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 class="hideMoreThan1380"><a title="${_('File Browser')}" rel="navigator-tooltip" href="/${apps['filebrowser'].display_name}"><i class="fa fa-file"></i></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><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>
+    <li class="hide1380"><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 class="hideMoreThan1380"><a title="${_('Job Browser')}" rel="navigator-tooltip" href="/${apps['jobbrowser'].display_name}"><i class="fa fa-list-alt"></i></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;<span class="hideable">${user.username}&nbsp;</span><b class="caret"></b></a>