small css weather changes

css/organizr.css

@@ -4069,3 +4069,48 @@ html {
 .spinner-grow-sm {
     width: 1rem;
     height: 1rem; }
+
+.pollen-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 20px;
+    margin-top: 20px;
+}
+.pollen-wrapper .details {
+    margin-bottom: 4px;
+    line-height: 19px;
+    color: #2d2d2d;
+    display: flex;
+}
+.pollen-wrapper .details .details__level {
+    display: flex;
+    padding-left: 1px;
+    opacity: .5;
+}
+.pollen-wrapper .details .details__numeric-value {
+    margin-left: auto;
+}
+.pollen-wrapper .level {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+    grid-column-gap: 3px;
+    width: 100%;
+}
+.pollen-wrapper .level .level-item {
+    display: block;
+    height: 4px;
+    background: #d1d1d1;
+    position: relative;
+    overflow: hidden;
+}
+.pollen-wrapper .level.level--1 .level-item span {
+    background: #00c853;
+}
+.pollen-wrapper .level .level-item span {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: block;
+    -webkit-animation: pollen-wrapz .4s;
+    animation: pollen-wrapz .4s;
+}

js/functions.js

@@ -6965,11 +6965,11 @@ function buildWeatherAndAir(array){
                                 <li class="text-right"><span class="counter">`+Math.round(v.temperature.value)+`<small><sup>°`+v.temperature.units+`</sup></small></span></li>
                             </ul>
                             <ul class="list-inline m-b-0">
-                                <li class="pull-left"><h5 class="text-uppercase">`+v.weather_text+`</h5></li>
-                                <li class="pull-right"><h5><i class="wi wi-strong-wind m-r-5 text-primary tooltip-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wind"></i>`+Math.round(v.wind.speed.value)+` `+v.wind.speed.units+`</h5></li>
-                                <li class="pull-right"><h5><i class="wi wi-barometer m-r-5 text-primary tooltip-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Pressure"></i>`+Math.round(v.pressure.value)+` `+v.pressure.units+`</h5></li>
-                                <li class="pull-right"><h5><i class="wi wi-humidity m-r-5 text-primary tooltip-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Humidity"></i>`+Math.round(v.relative_humidity)+`</h5></li>
-                                <li class="pull-right"><h5><i class="wi wi-raindrop m-r-5 text-primary tooltip-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Dew Point"></i>`+Math.round(v.dew_point.value)+`°</h5></li>
+                                <li class="pull-left w-50"><h5 class="text-uppercase elip">`+v.weather_text+`</h5></li>
+                                <li class="pull-right" style="width:75px"><h5><i class="wi wi-strong-wind m-r-5 text-primary tooltip-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Wind"></i>`+Math.round(v.wind.speed.value)+` `+v.wind.speed.units+`</h5></li>
+                                <li class="pull-right" style="width:75px"><h5><i class="wi wi-barometer m-r-5 text-primary tooltip-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Pressure"></i>`+Math.round(v.pressure.value)+` `+v.pressure.units+`</h5></li>
+                                <li class="pull-right" style="width:45px"><h5><i class="wi wi-humidity m-r-5 text-primary tooltip-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Humidity"></i>`+Math.round(v.relative_humidity)+`</h5></li>
+                                <li class="pull-right" style="width:45px"><h5><i class="wi wi-raindrop m-r-5 text-primary tooltip-primary" data-toggle="tooltip" data-placement="top" title="" data-original-title="Dew Point"></i>`+Math.round(v.dew_point.value)+`°</h5></li>
                                 <div class="clearfix"></div>
                             </ul>
                         </div>
@@ -6985,7 +6985,7 @@ function buildWeatherAndAir(array){
                                 <li class="text-right"><span class="counter">`+Math.round(v.temps.high)+`<small><sup>°`+v.temperature.units+`</sup></small></span></li>
                             </ul>
                             <ul class="list-inline m-b-0">
-                                <li class="pull-left"><h6 class="text-uppercase">`+v.weather_text+`</h6></li>
+                                <li class="pull-left w-100"><h6 class="text-uppercase elip">`+v.weather_text+`</h6></li>
                                 <div class="clearfix"></div>
                             </ul>
                         </div>