display tweaks

1 files changed, 63 insertions, 57 deletions

diff --git a/forecast.html.tt b/forecast.html.tt
index 9b981fd..17cef7f 100644
--- a/forecast.html.tt
+++ b/forecast.html.tt
@@ -1,4 +1,5 @@
 [%
+ USE Number.Format(DECIMAL_DIGITS=1);
  cur = f.currently; today = f.daily.data.0;
  today_start = f.hourly.data.0.time.clone
  today_stop = f.hourly.data.0.time.clone.add('days'=>1);
@@ -30,28 +31,44 @@
       body, table {
         font-size: 15px;
       }
+      
+      table { border-collapse: collapse; empty-cells: show }
+      table td { border: dotted thin black; padding: 2px }
+
+      div.forecast dt { display: none }
+      div.forecast dd { display: inline; margin: 0; border: 0 }
+
+      .icon img {
+        width: 2em; height: 2em;
+        float: left; margin: 0 5px 5px 0;
+      }
+
       div.currently, div.next-hour, div.next-day, div.next-week {
         float: left; clear: none;
         width: 24%;
       }
-      div.days { clear: both }
-      div.days dl { float: left; width: 30% }
+      div.today { clear: both }
+      div.today { float: left; width: 40%; margin-right: 10px; }
+
+      dl.today dt.temperature, dl.today dd.temperature { display: inherit }
+      dl.today dt.sunrise, dl.today dt.sunset { display: inline }
 
       div.bus, div.tube { float: left  }
-      
-      table { border-collapse: collapse; empty-cells: show }
-      table td { border: dotted thin black }
+      div.tube { width: 75% }
+
+      div.tube table { font-size: 75% }
+
+      div.tube td.status { width: 10em }
+      div.tube td.details { width: 10em }
+
+      div.timeline { float: right }
+      div.timeline table { font-size: 75% }
 
-      .icon img {
-        width: 2em; height: 2em;
-        float: left;
-      }
       .stripes {
         text-align: center;
         border: solid thin black;
       }
       .stripes span {
-        font-size: 30%;
         vertical-align: middle;
       }
     </style>
@@ -63,13 +80,13 @@
         <span class="icon"><img src="[% icon_for(cur.icon) %]" alt="[% cur.icon %]" /></span>
         <dl class="currently">
           <dt class="temperature">Temperature:</dt>
-          <dd class="temperature">[% cur.temperature %]°</dd>
+          <dd class="temperature">[% cur.temperature|round %]°</dd>
           <dt class="summary">Summary:</dt>
           <dd class="summary">[% cur.summary %]</dd>
         </dl>
       </div>
       <div class="next-hour">
-        <h2>Next hour</h2>
+        <h2>Hour</h2>
         <span class="icon"><img src="[% icon_for(f.minutely.icon) %]" alt="[% f.minutely.icon %]" /></span>
         <dl class="next-hour">
           <dt class="summary">Summary:</dt>
@@ -77,7 +94,7 @@
         </dl>
       </div>
       <div class="next-day">
-        <h2>Next 24 hours</h2>
+        <h2>Day</h2>
         <span class="icon"><img src="[% icon_for(hourly.icon) %]" alt="[% hourly.icon %]" /></span>
         <dl class="next-day">
           <dt class="summary">Summary:</dt>
@@ -85,50 +102,28 @@
         </dl>
       </div>
       <div class="next-week">
-        <h2>Next 7 days</h2>
+        <h2>Week</h2>
         <span class="icon"><img src="[% icon_for(f.daily.icon) %]" alt="[% f.daily.icon %]" /></span>
         <dl class="next-week">
           <dt class="summary">Summary:</dt>
           <dd class="summary">[% f.daily.summary %]</dd>
         </dl>
       </div>
-      <div class="days">
-        <div class="day today">
-          <h2>Today</h2>
-          <span class="icon"><img src="[% icon_for(today.icon) %]" alt="[% today.icon %]" /></span>
-          <dl class="today">
-            <dt class="summary">Summary:</dt>
-            <dd class="summary">[% today.summary %]</dd>
-            <dt class="temperature min">Min temperature:</dt>
-            <dd class="temperature min">[% today.temperatureMin %]° <span class="time">[% time(today.temperatureMinTime) %]</span></dd>
-            <dt class="temperature max">Max temperature:</dt>
-            <dd class="temperature max">[% today.temperatureMax %]° <span class="time">[% time(today.temperatureMaxTime) %]</span></dd>
-            <dt class="sunrise">Sunrise:</dt>
-            <dd class="sunrise"><span class="time">[% time(today.sunriseTime) %]</span></dd>
-            <dt class="sunset">Sunset:</dt>
-            <dd class="sunset"><span class="time">[% time(today.sunsetTime) %]</span></dd>
-          </dl>
-          <div class="timeline">
-            <table class="timeline">
-              <tr class="summary">
-                [% FOR span IN hourly.spans_by_string('summary');
-                width=hours_length(span) %]
-                <td class="stripes" colspan="[% width %]"><span>[% span.value %]</span></td>
-                [% END %]
-              </tr>
-              <tr class="hours">
-                [% FOR h IN hourly.data; BREAK IF loop.last %]
-                <td class="stripes"><span>[% time(h.time) %]</span></td>
-                [% END %]
-              </tr>
-              <tr class="temperature">
-                [% FOR h IN hourly.data; BREAK IF loop.last %]
-                <td class="stripes"><span>[% h.temperature %]°</span></td>
-                [% END %]
-              </tr>
-            </table>
-          </div>
-        </div>
+      <div class="today">
+        <h2>Today</h2>
+        <span class="icon"><img src="[% icon_for(today.icon) %]" alt="[% today.icon %]" /></span>
+        <dl class="today">
+          <dt class="summary">Summary:</dt>
+          <dd class="summary">[% today.summary %]</dd>
+          <dt class="temperature min">Min temperature:</dt>
+          <dd class="temperature min">[% today.temperatureMin|round %]° <span class="time">[% time(today.temperatureMinTime) %]</span></dd>
+          <dt class="temperature max">Max temperature:</dt>
+          <dd class="temperature max">[% today.temperatureMax|round %]° <span class="time">[% time(today.temperatureMaxTime) %]</span></dd>
+          <dt class="sunrise">Sunrise:</dt>
+          <dd class="sunrise"><span class="time">[% time(today.sunriseTime) %]</span></dd>
+          <dt class="sunset">Sunset:</dt>
+          <dd class="sunset"><span class="time">[% time(today.sunsetTime) %]</span></dd>
+        </dl>
       </div>
     </div>
     <div class="bus">
@@ -139,14 +134,25 @@
         <tbody>
           [% FOREACH p IN b.Prediction %]
           <tr>
-            <td>[% p.LineName %]</td>
-            <td>[% p.DestinationText %]</td>
-            <td>[% minsec_until(p.EstimatedTime) %]</td>
+            <td class="line">[% p.LineName %]</td>
+            <td class="destination">[% p.DestinationText %]</td>
+            <td class="eta">[% minsec_until(p.EstimatedTime) %]</td>
           </tr>
           [% END %]
         </tbody>
       </table>
     </div>
+    <div class="timeline">
+      <table class="timeline">
+        [% FOR h IN hourly.data; BREAK IF loop.last %]
+        <tr class="stripes">
+          <td class="summary"><span>[% h.summary %]</span></td>
+          <td class="hours"><span>[% time(h.time) %]</span></td>
+          <td class="temperature"><span>[% h.temperature|round %]°</span></td>
+        </tr>
+        [% END %]
+      </table>
+    </div>
     <div class="tube">
       <table class="status">
         <thead>
@@ -155,9 +161,9 @@
         <tbody>
           [% FOREACH line IN t.lines %]
           <tr>
-            <td>[% line.name %]</td>
-            <td>[% line.status.description %]</td>
-            <td>[% line.status.details %]</td>
+            <td class="line">[% line.name %]</td>
+            <td class="status">[% line.status.description %]</td>
+            <td class="details">[% line.status.details %]</td>
           </tr>
           [% END %]
         </tbody>