🎨 Add max height to percentage representation - #13

Jonur · Oct 21, 2018 · 776f8a6 · 776f8a6
1 parent 44aea68
commit 776f8a6
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 67 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,4 +1,4 @@
-(function () {
+(() => {
   'use strict';
 
   const gulp = require('gulp'),

diff --git a/index.html b/index.html
@@ -43,11 +43,11 @@ <h2 class="row m-0 squeeze">
             <div class="col pie-chart-keys">
                 <ul class="key">
                     <li>
-                        <strong id="features-passed" class="percent green"></strong>
+                        <strong><span id="features-passed" class="percent green"></span></strong>
                         <span class="choice">Features Passed</span>
                     </li>
                     <li>
-                        <strong id="features-failed" class="percent red"></strong>
+                        <strong><span id="features-failed" class="percent red"></span></strong>
                         <span class="choice">Features Failed</span>
                     </li>
                 </ul>
@@ -58,15 +58,15 @@ <h2 class="row m-0 squeeze">
             <div class="col pie-chart-keys">
                 <ul class="key">
                     <li>
-                        <strong id="scenarios-passed" class="percent green"></strong>
+                        <strong><span id="scenarios-passed" class="percent green"></span></strong>
                         <span class="choice">Scenarios Passed</span>
                     </li>
                     <li>
-                        <strong id="scenarios-failed" class="percent red"></strong>
+                        <strong><span id="scenarios-failed" class="percent red"></span></strong>
                         <span class="choice">Scenarios Failed</span>
                     </li>
                     <li>
-                        <strong id="scenarios-undefined" class="percent yellow"></strong>
+                        <strong><span id="scenarios-undefined" class="percent yellow"></span></strong>
                         <span class="choice">Scenarios Undefined</span>
                     </li>
                 </ul>

diff --git a/sources/css/partials/_media-queries.scss b/sources/css/partials/_media-queries.scss
@@ -35,3 +35,10 @@
         }
     }
 }
+
+@media screen and (max-width: 1226px) {
+    section.statistics-details > div .pie-chart-keys .choice {
+        text-align: start;
+        vertical-align: middle;
+    }
+}
diff --git a/sources/css/partials/_statistics-details.scss b/sources/css/partials/_statistics-details.scss
@@ -1,70 +1,71 @@
 section {
-  &.statistics-details {
-      .squeeze {
-          padding: 0 20px;
+    &.statistics-details {
+        .squeeze {
+            padding: 0 20px;
 
-          .pi-underlined {
-              color: $pi-purple-dark;
-              font-weight: bold;
-              font-size: 1.438rem;
-              line-height: 1.75rem;
-              padding-bottom: 8px;
-              border-bottom: 1px solid $pi-grey;
-          }
-      }
+            .pi-underlined {
+                color: $pi-purple-dark;
+                font-weight: bold;
+                font-size: 1.438rem;
+                line-height: 1.75rem;
+                padding-bottom: 8px;
+                border-bottom: 1px solid $pi-grey;
+            }
+        }
 
-      > div {
-          padding: 20px;
+        > div {
+            padding: 20px;
 
-          .chart {
-              border-radius: 50%;
-              width: 50%;
-              height: 0;
-              padding-top: 50%;
-              padding-right: 20px;
-              margin: 0 auto;
-          }
+            .chart {
+                border-radius: 50%;
+                width: 50%;
+                height: 0;
+                padding-top: 50%;
+                padding-right: 20px;
+                margin: 0 auto;
+            }
 
-          .pie-chart-keys {
-              .key {
-                  float: left;
-                  list-style: none;
-                  display: table;
-                  border-collapse: separate;
+            .pie-chart-keys {
+                .key {
+                    float: left;
+                    list-style: none;
+                    display: table;
+                    border-collapse: separate;
 
-                  > li {
-                      display: table-row;
+                    > li {
+                        display: table-row;
 
-                      > * {
-                          display: table-cell;
-                          border-bottom: 12px solid $pi-white;
-                      }
-                  }
-              }
+                        > * {
+                            display: table-cell;
+                            border-bottom: 12px solid $pi-white;
+                        }
+                    }
+                }
 
-              .percent {
-                  color: $pi-white;
-                  padding: 10px;
-                  text-shadow: 0 0 1px $pi-black;
-                  text-align: center;
-              }
+                .percent {
+                    display: block;
+                    color: $pi-white;
+                    padding: 10px;
+                    text-shadow: 0 0 1px $pi-black;
+                    text-align: center;
+                }
 
-              .choice {
-                  padding-left: 10px;
-              }
+                .choice {
+                    padding-left: 10px;
+                }
 
-              .green {
-                  background-color: $statsColorGreen;
-              }
+                .green {
+                    background-color: $statsColorGreen;
+                }
 
-              .red {
-                  background-color: $statsColorRed;
-              }
+                .red {
+                    background-color: $statsColorRed;
+                }
 
-              .yellow {
-                  background-color: $statsColorYellow;
-              }
-          }
-      }
-  }
-}
+                .yellow {
+                    background-color: $statsColorYellow;
+                }
+            }
+        }
+    }
+}
diff --git a/sources/css/styles.css b/sources/css/styles.css
diff --git a/sources/js/config.js b/sources/js/config.js
@@ -14,7 +14,7 @@ const filePaths = [
  * @desc The time interval (in seconds) to switch between projects. After the set time, the next JSON file will be rendered. Set it to 0
  * to stop the auto-navigation/auto-refresh.
  */
-const pageInterval = 30;
+const pageInterval = 0;
 
 /**
  * @desc Pie Chart Color palette optimized for data visualization from

diff --git a/sources/js/main.js b/sources/js/main.js
@@ -1,4 +1,4 @@
-(function () {
+(() => {
   'use strict';
 
   const tableReportDOM = document.getElementById('table-report'),