[visualize/wizard] remove flickering and hover effect

elastic · Jan 7, 2015 · 90ef122 · 90ef122
1 parent b2d8172
commit 90ef122
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 36 deletions.
diff --git a/src/kibana/plugins/visualize/styles/main.less b/src/kibana/plugins/visualize/styles/main.less
@@ -1,23 +1,45 @@
-@import (reference) "../../../styles/_mixins.less";
-@import (reference) "../../../styles/_bootstrap.less";
-@import (reference) "../../../styles/theme/_theme.less";
-@import (reference) "../../../styles/_variables.less";
-@import (reference) "lesshat.less";
+@import (reference) "../../../styles/main.less";
 
 .vis-wizard {
   h1 {
     margin-top: 45px;
   }
 }
 
-.visualizations .visualization i {
-  margin-right: @padding-base-horizontal;
-  font-size: 1.5em;
-  width: 1.5em;
-}
+.wizard-vis-type {
+  .list-group-item();
+  .list-group-menu .list-group-menu-item();
+
+  // overrided for tablet and desktop
+  @media (min-width: @screen-md-min) {
+    .display(flex);
+    .align-items(flex-start);
+  }
 
-.visualizations {
-  font-size: 1.2em;
+  &-heading {
+    .flex(0 0 200px);
+    .display(flex);
+    .align-items(center);
+    font-size: 1.2em;
+
+    .fa {
+      .flex(0 0 auto);
+      margin-right: @padding-base-horizontal;
+      font-size: 1.5em;
+      width: 1em;
+      text-align: center;
+    }
+
+    h4 {
+      .flex(1 0 auto);
+    }
+  }
+
+  &-description {
+    .flex(1 1 auto);
+    margin-top: -5px;
+    margin-bottom: -5px;
+  }
 }
 
 .visualize-info {
@@ -32,7 +54,6 @@
     font-weight: bold;
   }
 
-
 }
 
 @import "../editor/styles/editor.less";
diff --git a/src/kibana/plugins/visualize/wizard/step_1.html b/src/kibana/plugins/visualize/wizard/step_1.html
@@ -4,31 +4,17 @@ <h1>
   <span class="label label-default visible-xs">Step 1</span>
 </h1>
 
-<ul class="visualizations list-group list-group-menu">
-  <a class="visualization list-group-item list-group-menu-item"
+<div class="wizard-vis-types">
+  <a class="wizard-vis-type"
      ng-repeat="type in visTypes.inTitleOrder"
-     ng-href="{{ visTypeUrl(type) }}"
-     ng-mouseenter="showDescription=true" ng-mouseleave="showDescription=false">
-    <li>
-      <!--
-      <div>
-        <i class="fa" ng-class="type.icon"></i>
-      </div>
-      <div>
-        {{type.title}}<br>
-        <small class="text-small">{{type.description}}</small>
-      </div>
-      -->
-      <div class="media">
-          <i class="media-left fa" ng-class="type.icon"></i>
-        <div class="media-body">
-          <h4 class="media-heading">{{type.title}}</h4>
-          <span ng-show="showDescription">{{type.description}}</span>
-        </div>
-      </div>
-    </li>
+     ng-href="{{ visTypeUrl(type) }}">
+    <div class="wizard-vis-type-heading">
+      <i class="fa" ng-class="type.icon"></i>
+      <h4>{{type.title}}</h4>
+    </div>
+    <span class="wizard-vis-type-description">{{type.description}}</span>
   </a>
-</ul>
+</div>
 
 <h1>Or, open a saved visualization</h1>