Pārlūkot izejas kodu

HUE-3294 [core] Add more spacing between alternatives in the the left nav

Johan Ahlen 9 gadi atpakaļ
vecāks
revīzija
16a4d02b76

+ 13 - 8
desktop/core/src/desktop/static/desktop/css/responsive.css

@@ -324,24 +324,29 @@ body {
   margin: 10px 0 0 0;
 }
 
+.left-nav-menu li.header {
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
 .left-nav-menu li {
-  padding-left: 10px;
+  padding-left: 15px;
   list-style: none;
-  line-height: 30px;
-  height: 30px;
-  cursor: pointer;
+  line-height: 33px;
+  height: 33px;
 }
 
-.left-nav-menu li:not(.divider) {
+.left-nav-menu li:not(.header) {
   background-color: transparent;
   -webkit-transition: 0.4s background-color;
   -moz-transition: 0.4s background-color;
   -ms-transition: 0.4s background-color;
   transition: 0.4s background-color;
+  cursor: pointer;
 }
 
-.left-nav-menu li:not(.divider):hover {
-  background-color: rgba(240, 240, 240, 0.8);
+.left-nav-menu li:not(.header):hover {
+  background-color: rgba(240, 240, 240, 0.9);
 }
 
 .left-nav-menu li a {
@@ -354,7 +359,7 @@ body {
   transition: 0.4s color;
 }
 
-.left-nav-menu li:not(.divider):hover a {
+.left-nav-menu li:not(.header):hover a {
   color: #003F6C;
 }
 

+ 7 - 5
desktop/core/src/desktop/templates/responsive.mako

@@ -193,22 +193,24 @@ ${ hueIcons.symbols() }
   <div class="content-wrapper">
     <div class="left-nav">
       <ul class="left-nav-menu">
+        <li class="header">&nbsp;</li>
+        <li class="header">Applications</li>
         <li><a href="javascript: void(0);">Reporter</a></li>
         <li><a href="javascript: void(0);">Hive</a></li>
         <li><a href="javascript: void(0);">Impala</a></li>
         <li><a href="javascript: void(0);">Dashboards</a></li>
         <li><a href="javascript: void(0);">Oozie</a></li>
-        <li class="divider"></li>
+        <li><a href="javascript: void(0);">Custom App 1</a></li>
+        <li><a href="javascript: void(0);">Custom App 2</a></li>
+        <li><a href="javascript: void(0);">Custom App 3</a></li>
+        <li class="header">&nbsp;</li>
+        <li class="header">Browse</li>
         <li><a href="javascript: void(0);">Metastore</a></li>
         <li><a href="javascript: void(0);">Indexes</a></li>
         <li><a href="javascript: void(0);">Job Browser</a></li>
         <li><a href="javascript: void(0);">File Browser</a></li>
         <li><a href="javascript: void(0);">HBase</a></li>
         <li><a href="javascript: void(0);">Security</a></li>
-        <li class="divider"></li>
-        <li><a href="javascript: void(0);">Custom App 1</a></li>
-        <li><a href="javascript: void(0);">Custom App 2</a></li>
-        <li><a href="javascript: void(0);">Custom App 3</a></li>
       </ul>
     </div>