Refactored DOM generation code to minimize repetition

jclarke0000 · Dec 5, 2018 · 386571a · 386571a
1 parent 19e7f66
commit 386571a
Showing 2 changed files with 206 additions and 293 deletions.
diff --git a/MMM-DarkSkyForecast.css b/MMM-DarkSkyForecast.css
@@ -26,6 +26,9 @@
   color: #6FC4F5;
 }
 
+.MMM-DarkSkyForecast .accumulation:before {
+  content: " ";
+}
 
 /* Current Conditions */
 
@@ -54,8 +57,8 @@
 
 
 /* Inline icons */
-.MMM-DarkSkyForecast .icon.inline,
-.MMM-DarkSkyForecast .wrapper.tiled .forecast-container .forecast-item .icon.inline {
+.MMM-DarkSkyForecast .inline-icon,
+.MMM-DarkSkyForecast .wrapper.tiled .forecast-container .forecast-item .inline-icon {
   display: inline-block;
   width: 24px;
   height: 24px;
@@ -68,11 +71,12 @@
 /* Extra Current Conditions */
 
 .MMM-DarkSkyForecast .extra-current-conditions-wrapper .temperature-container,
-.MMM-DarkSkyForecast .extra-current-conditions-wrapper .precipitation,
-.MMM-DarkSkyForecast .extra-current-conditions-wrapper .wind {
+.MMM-DarkSkyForecast .extra-current-conditions-wrapper .precipitation-container,
+.MMM-DarkSkyForecast .extra-current-conditions-wrapper .wind-container {
   display: inline-block;
   white-space: nowrap;
   margin:0 15px;
+  margin-bottom: 10px;
 }
 
 /* Summary */
@@ -85,6 +89,7 @@
 /* Forecast Header */
 
 .MMM-DarkSkyForecast .module-header.forecast-header {
+  margin-top: 20px;
   margin-bottom: 0;
 }
 
@@ -220,11 +225,24 @@
   text-align: right;
 }
 
-.MMM-DarkSkyForecast .wrapper.table .forecast-container .forecast-item .icon {
+.MMM-DarkSkyForecast .wrapper.table .forecast-container .forecast-item .forecast-icon {
   width: 30px;
   height: 30px;
   display: block;
   vertical-align: middle;
 }
 
+.MMM-DarkSkyForecast .wrapper.table .forecast-container .forecast-item .time,
+.MMM-DarkSkyForecast .wrapper.table .forecast-container .forecast-item  .high-temperature,
+.MMM-DarkSkyForecast .wrapper.table .forecast-container .forecast-item .low-temperature, {
+  white-space: nowrap;
+}
+
+.MMM-DarkSkyForecast .wrapper.table .forecast-container .forecast-item .wind-gusts,
+.MMM-DarkSkyForecast .wrapper.table .forecast-container .forecast-item .accumulation {
+  display: block;
+  white-space: nowrap;
+}
+
+