Merge pull request #8080 from CartoDB/8068-review_data_style

fix styles
CartoDB · Jun 23, 2016 · 4775575 · 4775575
2 parents 1cb7949 + 05cb1ae
commit 4775575
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 24 deletions.
diff --git a/app/assets/stylesheets/editor-3/stats-list.css.scss b/app/assets/stylesheets/editor-3/stats-list.css.scss
@@ -5,36 +5,23 @@
 .StatsList-item.is-hidden {
   display: none;
 }
-
 .StatsList-item {
   @include display-flex;
-  width: 294px;
   margin: 0 0 $baseSize * 3;
   box-sizing: border-box;
-  background: $cWhite;
 }
-
 .StatsList-header {
-  @include display-flex;
-  @include justify-content(space-between);
+  margin-top: 1px;
 }
-
 .StatsList-arrow {
   @include transform(rotate(90deg));
 }
-
-.StatsList-details {
-  @include display-flex;
-  @include align-items(baseline);
-}
-
 .StatsList-tag {
   padding: 1px $baseSize / 2;
   border-radius: $baseSize / 2;
   background-color: $cThirdBackground;
   color: $cAltText;
 }
-
 .StatsList-style.is-hidden {
   display: none;
 }
diff --git a/lib/assets/javascripts/cartodb3/editor/layers/layer-content-views/data/stat-category.tpl b/lib/assets/javascripts/cartodb3/editor/layers/layer-content-views/data/stat-category.tpl
@@ -1,4 +1,4 @@
-<ul class="u-flex CDB-Text CDB-Size-small u-upperCase">
+<ul class="u-flex CDB-Text CDB-Size-small u-upperCase u-bSpace u-secondaryTextColor">
   <li class='u-rSpace--m js-null'></li>
   <li class='js-percent'></li>
 </ul>

diff --git a/lib/assets/javascripts/cartodb3/editor/layers/layer-content-views/data/stat-formula.tpl b/lib/assets/javascripts/cartodb3/editor/layers/layer-content-views/data/stat-formula.tpl
@@ -1,2 +1,2 @@
-<div class="u-flex CDB-Text CDB-Size-small u-upperCase u-rSpace js-formula-numbers"></div>
+<div class="u-flex CDB-Text CDB-Size-small u-upperCase u-bSpace u-secondaryTextColor js-formula-numbers"></div>
 <h4 class="CDB-Text CDB-Size-huge js-formula-stat"></h4>
diff --git a/lib/assets/javascripts/cartodb3/editor/layers/layer-content-views/data/stat-histogram.tpl b/lib/assets/javascripts/cartodb3/editor/layers/layer-content-views/data/stat-histogram.tpl
@@ -1,2 +1,2 @@
-<div class="u-flex CDB-Text CDB-Size-small u-upperCase u-rSpace u-bSpace--xl js-histogram-numbers"></div>
+<div class="CDB-Text CDB-Size-small u-upperCase u-bSpace u-secondaryTextColor js-histogram-numbers"></div>
 <div class="js-histogram-stat"></div>
diff --git a/lib/assets/javascripts/cartodb3/editor/layers/layer-content-views/data/stat.tpl b/lib/assets/javascripts/cartodb3/editor/layers/layer-content-views/data/stat.tpl
@@ -1,18 +1,18 @@
 <div class="StatsList-item <% if (isHidden) { %>is-hidden<% } %>">
-  <div class="WidgetList-option">
+  <div class="u-rSpace--m">
     <input class="CDB-Checkbox js-checkbox" type="checkbox" <% if (isSelected) { %>checked="checked"<% } %> />
     <span class="u-iBlock CDB-Checkbox-face"></span>
   </div>
 
   <div class="WidgetList-inner js-inner">
-    <div class="StatsList-header">
-      <h3 class="u-ellipsis CDB-Text CDB-Size-medium u-bSpace--xl"><%- _t('editor.data.stats.add-widget') %></h3>
+    <div class="StatsList-header u-flex u-justifySpace u-alignCenter u-bSpace--m">
+      <h3 class="u-ellipsis CDB-Text CDB-Size-medium"><%- _t('editor.data.stats.add-widget') %></h3>
       <a class="StatsList-style CDB-Text CDB-Size-small js-style <% if (!isSelected) { %> is-hidden <% } %>" href="#"><div class="StatsList-arrow CDB-Shape-Arrow is-blue u-iBlock  u-rSpace--m"></div> <%- _t('editor.data.stats.style') %></a>
     </div>
-    <div class="StatsList-details u-bSpace--xl">
-      <h2 class="u-ellipsis CDB-Text CDB-Size-large u-rSpace--m"><%- column %></h2>
+    <div class="u-flex u-alignCenter u-bSpace">
+      <h2 class="js-title u-ellipsis CDB-Text CDB-Size-large u-rSpace--m"><%- column %></h2>
       <div class="StatsList-tag CDB-Text CDB-Size-small u-upperCase"><%- type %></div>
     </div>
-    <div class="u-bSpace--xl js-stat"></div>
+    <div class="js-stat"></div>
   </div>
 </div>
diff --git a/lib/assets/test/spec/cartodb3/editor/layers/layer-content-view/data/stat-view.spec.js b/lib/assets/test/spec/cartodb3/editor/layers/layer-content-view/data/stat-view.spec.js
@@ -90,7 +90,7 @@ describe('editor/layers/layers-content-view/data/stat-view', function () {
   it('should render properly', function () {
     expect(view.$('.js-checkbox').length).toBe(1);
     expect(view.$('.js-stat').length).toBe(1);
-    expect(view.$('.StatsList-details h2').text()).toBe('location');
+    expect(view.$('.js-title').text()).toBe('location');
     expect(view.$('.StatsList-tag').text()).toBe('number');
   });