From d319382980a5cf845667036baee53ad349c480e1 Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Wed, 19 Dec 2018 15:19:06 -0500
Subject: [PATCH] New styles/view for city weather display

---
 css/front.css                        | 69 +++++++++++++++++++++-------
 views/front/members/cityWeather.html | 48 +++++++++++--------
 2 files changed, 81 insertions(+), 36 deletions(-)

diff --git a/css/front.css b/css/front.css
index 7b424998..caf5ff8a 100644
--- a/css/front.css
+++ b/css/front.css
@@ -1262,34 +1262,71 @@ glm-member-detail-content-toggle {
 /* Featured Grid End */
 
 /* City Weather */
-.weatherBlock {
+.glm-weather-block {
     overflow: hidden;
     width: 48%;
     float: left;
-    background: #f5f5f5;
+    background: #f8f8f8;
     margin: 8px 1%;
-    padding: 6px;
-    border: 1px solid #CBCBAA;
+    border: 1px solid whitesmoke;
     border-radius: 8px;
-    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
-    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
-    box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
+    -webkit-box-shadow: 2px 2px 6px -1px rgba(0,0,0,0.3);
+    -moz-box-shadow: 2px 2px 6px -1px rgba(0,0,0,0.3);
+    box-shadow: 2px 2px 6px -1px rgba(0,0,0,0.3);
 }
-
-.weatherBlock img {
-    max-width: 100%;
-    border: 10px solid #FFF;
+.glm-weather-block:hover {
+    background: #f4f4f4;
+}
+@media (max-width: 640px) {
+    .glm-weather-block {
+        width: 98%;
+        max-width: 360px;
+        float: none;
+        margin: 15px auto;
+    }
+}
+.glm-weather-image-wrapper {
+    display: block;
+    width: 24%;
+}
+.glm-weather-image-wrapper img {
+    width: 100%;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
-    -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
+    /* -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
     -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
-    box-shadow: 0px 0px 5px rgba(0,0,0,0.4);
-    margin: 6px;
-    border-radius: 8px;
+    box-shadow: 0px 0px 5px rgba(0,0,0,0.4); */
+    border-radius: 5px 0 0 5px;
 }
-.weatherIn {
+.glm-weather-block-content {
     overflow: hidden;
     background: url("../assets/bg-form.jpg");
 }
+.glm-weather-block-city {
+    font-size: 18px;
+    font-weight: bold;
+    margin: 0;
+    line-height: 1.4;
+}
+.glm-weather-block-weather {
+    font-size: 15px;
+    font-weight: normal;
+}
+.glm-weather-block-temp {
+    font-size: 15px;
+    font-weight: normal;
+}
+.glm-weather-block-text {
+    color: #333333;
+    margin: 0; 
+    font-weight: bold; 
+    font-size: 15px;
+    display: block;
+    float: right;
+    width: 75%;
+    padding: 10px;
+    line-height: 1.4;
+}
+
 /* City Weather End */
diff --git a/views/front/members/cityWeather.html b/views/front/members/cityWeather.html
index 1dcdbc58..638f06ec 100644
--- a/views/front/members/cityWeather.html
+++ b/views/front/members/cityWeather.html
@@ -3,29 +3,37 @@
         <a href="{$thisUrl}?glm_action=cityWeather&alpha={$a.alpha}" class="glm-alpha-link{if $a.default} glm-alpha-link-selected{/if}">{$a.alpha}</a>
     {/foreach}
 </div>
-<div id="weather_wrapper">
+<div id="glm-weather-wrapper">
     {foreach $cities as $city}
         {if $city.moreinfo}
-            <div class="weatherBlock">
-                <div class="weatherIn">
-                    {if $city.moreinfo}
-                    <a style="float:left;" target="_blank" href="{$city.moreinfo}" title="Weather Forecast">
-                        <img src="{$icon_url_path}\{$city.icon}" style="margin: 10px 15px 10px 10px; float: left; display: block;" />
-                    </a>
-                    {/if}
-                    {if !$city.moreinfo}
-                    <img width="55" height="58" src="http://app.gaslightmedia.com/city/na.jpg" style="margin: 10px 15px 10px 10px; float: left; display: block;" />
-                    {/if}
-                    <p style="color: #7D3619; margin: 10px 0 0 0px; font-weight: bold; font-size: 15px;">{$city.name}</p>
-                    <p style="color: #7D3619; margin: 10px 0 0 0px; font-weight: bold;">{$city.weather}</p>
-                    {if $city.temp_max}
-                    <p style="color: #7D3619; margin: 6px 0 0 0px; font-weight: bold;">{$city.temp_max}&deg;/{$city.temp_min}&deg;F</p>
-                    {/if}
-                    {if !$city.temp_max}
-                    <p style="height:15px;color: #7D3619; margin: 6px 0 0 0px; font-weight: bold;">&nbsp;</p>
-                    {/if}
+            <a class="glm-weather-block-link" href="{$city.moreinfo}">
+                <div class="glm-weather-block">
+                    <div class="glm-weather-block-content">
+                        {if $city.moreinfo}
+                        <div class="glm-weather-image-wrapper" style="float:left;" target="_blank" title="Weather Forecast">
+                            <img src="{$icon_url_path}\{$city.icon}"/>
+                        </div>
+                        {/if}
+                        {if !$city.moreinfo}
+                        <div class="glm-weather-image-wrapper">
+                            <img width="55" height="58" src=""/>
+                        </div>
+                        {/if}
+                        <div class="glm-weather-block-text">
+                            <h5 class="glm-weather-block-city">{$city.name}</h5>
+                            <div class="glm-weather-block-weather">{$city.weather}</div>
+                            <div class="glm-weather-block-temp">
+                                {if $city.temp_max}
+                                    {$city.temp_max}&deg;/{$city.temp_min}&deg;F
+                                {/if}
+                                {if !$city.temp_max}
+                                &nbsp;
+                                {/if}
+                            </div>
+                        </div>
+                    </div>
                 </div>
-            </div>
+            </a> 
         {/if}
     {/foreach}
 </div>
-- 
2.17.1