Address review comments

patternfly · May 30, 2018 · 049e2d6 · 049e2d6
1 parent 588922a
commit 049e2d6
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 60 deletions.
diff --git a/src/less/charts.less b/src/less/charts.less
@@ -5,11 +5,9 @@
 .bullet-chart-pf {
   display: flex;
   flex-direction: column;
-  width: 100%;
 
   &.bullet-chart-pf-vertical {
     height: 100%;
-    width: initial;
     flex-direction: row;
   }
 }
@@ -31,16 +29,11 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  .bullet-chart-pf-vertical & {
-    flex-direction: row;
-  }
-}
-
-.bullet-chart-pf-title-labels-container {
-  margin: 10px 0;
+  margin: 10px 0 25px;
   padding-right: 10px;
   text-align: right;
   .bullet-chart-pf-vertical & {
+    margin-bottom: 0;
     padding-right: 0;
     text-align: center;
   }
@@ -91,7 +84,6 @@
   height: 20px;
   margin: 20px 0;
   position: relative;
-  width: 100%;
   .bullet-chart-pf-vertical & {
     height: 100%;
     margin: 0 20px;
@@ -112,9 +104,9 @@
 }
 
 .bullet-chart-pf-value-dot {
-  border-radius: 10px;
+  border-radius: 50%;
   border-style: solid;
-  border-width: 10px;
+  border-width: 0;
   height: 20px;
   margin-left: -10px;
   position: absolute;
@@ -224,7 +216,6 @@
 .bullet-chart-pf-legend {
   margin-top: 7px;
   text-align: center;
-  width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -234,7 +225,6 @@
     margin-left: 10px;
     margin-top: 0;
     text-align: left;
-    width: initial;
   }
 }
 

diff --git a/src/sass/converted/patternfly/_charts.scss b/src/sass/converted/patternfly/_charts.scss
@@ -5,11 +5,9 @@
 .bullet-chart-pf {
   display: flex;
   flex-direction: column;
-  width: 100%;
 
   &.bullet-chart-pf-vertical {
     height: 100%;
-    width: initial;
     flex-direction: row;
   }
 }
@@ -31,16 +29,11 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  .bullet-chart-pf-vertical & {
-    flex-direction: row;
-  }
-}
-
-.bullet-chart-pf-title-labels-container {
-  margin: 10px 0;
+  margin: 10px 0 25px;
   padding-right: 10px;
   text-align: right;
   .bullet-chart-pf-vertical & {
+    margin-bottom: 0;
     padding-right: 0;
     text-align: center;
   }
@@ -91,7 +84,6 @@
   height: 20px;
   margin: 20px 0;
   position: relative;
-  width: 100%;
   .bullet-chart-pf-vertical & {
     height: 100%;
     margin: 0 20px;
@@ -112,9 +104,9 @@
 }
 
 .bullet-chart-pf-value-dot {
-  border-radius: 10px;
+  border-radius: 50%;
   border-style: solid;
-  border-width: 10px;
+  border-width: 0;
   height: 20px;
   margin-left: -10px;
   position: absolute;
@@ -224,7 +216,6 @@
 .bullet-chart-pf-legend {
   margin-top: 7px;
   text-align: center;
-  width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -234,7 +225,6 @@
     margin-left: 10px;
     margin-top: 0;
     text-align: left;
-    width: initial;
   }
 }
 

diff --git a/src/sass/converted/rcue/_charts.scss b/src/sass/converted/rcue/_charts.scss
@@ -5,11 +5,9 @@
 .bullet-chart-pf {
   display: flex;
   flex-direction: column;
-  width: 100%;
 
   &.bullet-chart-pf-vertical {
     height: 100%;
-    width: initial;
     flex-direction: row;
   }
 }
@@ -31,16 +29,11 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  .bullet-chart-pf-vertical & {
-    flex-direction: row;
-  }
-}
-
-.bullet-chart-pf-title-labels-container {
-  margin: 10px 0;
+  margin: 10px 0 25px;
   padding-right: 10px;
   text-align: right;
   .bullet-chart-pf-vertical & {
+    margin-bottom: 0;
     padding-right: 0;
     text-align: center;
   }
@@ -91,7 +84,6 @@
   height: 20px;
   margin: 20px 0;
   position: relative;
-  width: 100%;
   .bullet-chart-pf-vertical & {
     height: 100%;
     margin: 0 20px;
@@ -112,9 +104,9 @@
 }
 
 .bullet-chart-pf-value-dot {
-  border-radius: 10px;
+  border-radius: 50%;
   border-style: solid;
-  border-width: 10px;
+  border-width: 0;
   height: 20px;
   margin-left: -10px;
   position: absolute;
@@ -224,7 +216,6 @@
 .bullet-chart-pf-legend {
   margin-top: 7px;
   text-align: center;
-  width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
@@ -234,7 +225,6 @@
     margin-left: 10px;
     margin-top: 0;
     text-align: left;
-    width: initial;
   }
 }
 

diff --git a/tests/pages/bullet-charts.html b/tests/pages/bullet-charts.html
@@ -11,12 +11,8 @@ <h2>Bullet Chart</h2>
     <div class="bullet-chart-pf">
       <div class="bullet-chart-pf-chart">
         <div class="bullet-chart-pf-title-container">
-          <div class="bullet-chart-pf-title-labels-container">
-            <div class="bullet-chart-pf-title">Text Label</div>
-            <div class="bullet-chart-pf-details">Measure Details</div>
-          </div>
-          <!-- add this div to vertically center the titles -->
-          <div class="bullet-chart-pf-axis"></div>
+          <div class="bullet-chart-pf-title">Text Label</div>
+          <div class="bullet-chart-pf-details">Measure Details</div>
         </div>
         <div class="bullet-chart-pf-container">
           <div class="bullet-chart-pf-data-container">
@@ -71,7 +67,7 @@ <h2>Bullet Chart - Vertical</h2>
   <div class="col-lg-4 col-sm-6 col-xs-12" style="height: 400px;">
     <div class="bullet-chart-pf bullet-chart-pf-vertical">
       <div class="bullet-chart-pf-chart">
-        <div class="bullet-chart-pf-title-labels-container">
+        <div class="bullet-chart-pf-title-container">
           <div class="bullet-chart-pf-title">Text Label</div>
           <div class="bullet-chart-pf-details">Measure Details</div>
         </div>
@@ -131,18 +127,14 @@ <h2>Bullet Chart - Dots</h2>
     <div class="bullet-chart-pf">
       <div class="bullet-chart-pf-chart">
         <div class="bullet-chart-pf-title-container">
-          <div class="bullet-chart-pf-title-labels-container">
-            <div class="bullet-chart-pf-title">Text Label</div>
-            <div class="bullet-chart-pf-details">Measure Details</div>
-          </div>
-          <!-- add this div to vertically center the titles -->
-          <div class="bullet-chart-pf-axis"></div>
+          <div class="bullet-chart-pf-title">Text Label</div>
+          <div class="bullet-chart-pf-details">Measure Details</div>
         </div>
         <div class="bullet-chart-pf-container">
           <div class="bullet-chart-pf-data-container">
             <div class="bullet-chart-pf-values-container">
-              <div class="bullet-chart-pf-value-dot" style="left: 25%; z-index: 125; border-color: rgb(0, 136, 206);"></div>
-              <div class="bullet-chart-pf-value-dot" style="left: 100%; z-index: 150; border-color: rgb(57, 165, 220);"></div>
+              <div class="bullet-chart-pf-value-dot" style="left: 25%; z-index: 125; background-color: rgb(0, 136, 206);"></div>
+              <div class="bullet-chart-pf-value-dot" style="left: 100%; z-index: 150; background-color: rgb(57, 165, 220);"></div>
             </div>
             <div class="bullet-chart-pf-threshold-indicator warning" style="left: 70%;"></div>
             <div class="bullet-chart-pf-threshold-indicator error" style="left: 90%;"></div>
@@ -191,16 +183,16 @@ <h2>Bullet Chart - Vertical - Dots</h2>
   <div class="col-lg-4 col-sm-6 col-xs-12" style="height: 400px;">
     <div class="bullet-chart-pf bullet-chart-pf-vertical">
       <div class="bullet-chart-pf-chart">
-        <div class="bullet-chart-pf-title-labels-container">
+        <div class="bullet-chart-pf-title-container">
           <div class="bullet-chart-pf-title">Text Label</div>
           <div class="bullet-chart-pf-details">Measure Details</div>
         </div>
         <div class="bullet-chart-pf-vertical-data-container">
           <div class="bullet-chart-pf-container show-axis">
             <div class="bullet-chart-pf-data-container">
               <div class="bullet-chart-pf-values-container">
-                <div class="bullet-chart-pf-value-dot" style="bottom: calc(25% - 10px); border-color: rgb(0, 136, 206); z-index: 125;"></div>
-                <div class="bullet-chart-pf-value-dot" style="bottom: calc(100% - 10px); border-color: rgb(57, 165, 220); z-index: 150;"></div>
+                <div class="bullet-chart-pf-value-dot" style="bottom: calc(25% - 10px); background-color: rgb(0, 136, 206); z-index: 125;"></div>
+                <div class="bullet-chart-pf-value-dot" style="bottom: calc(100% - 10px); background-color: rgb(57, 165, 220); z-index: 150;"></div>
               </div>
               <div class="bullet-chart-pf-threshold-indicator warning" style="bottom: 70%;"></div>
               <div class="bullet-chart-pf-threshold-indicator error" style="bottom: 90%;"></div>