Snapshot section layout and customization issues

[roe-dl]

Regarding the snapshot section of the home page I face 2 issues:

• Google is permanently complaining about the layout not compatible with phones. And indeed, the table structure is bigger than the phone screen
• It is difficult to customize the section, i.e. add additional observation types.

I thought about it for months, and now I tried to find a solution. I created a new file index_snapshot.inc and replaced the whole snapshot section in index.html.tmpl by:

#include "index_snapshot.inc"

With some original lines around that is:

...
                    #if $Extras.has_key('earthquake_enabled') and $Extras.earthquake_enabled == '1'
                    <div class="col-sm-9 stn-quick-stats">
                    #else
                    <div class="col-sm-12 stn-quick-stats">
                    #end if
                    #include "index_snapshot.inc"
                    </div>
                    
                    #if $Extras.has_key('earthquake_enabled') and $Extras.earthquake_enabled == '1'
                    <!-- Earthquake data -->
...

And this is index_snapshot.inc:

#encoding UTF-8
#errorCatcher Echo
## $obs.label.snapshot*, class, observation type and aggregation type
#set $observations = [
    ("high","high",".outTemp.max"),
    ("low","low",".outTemp.min"),
    ("avg_wind","windavg",".wind.avg"),
    ("high_wind","windmax",".wind.max"),
    ("raindur","raindur",'(data_binding="precip_binding").ottRainDur.sum.hour'),
    ("sunshinedur","sunshinedur",".sunshineDur.sum.hour"),
    ("rain","rain",".rain.sum"),
    ("rainrate","rainrate",".rainRate.max"),
    ("et","et",".ET.sum"),
    ("sunenergy","sunenergy",".radiation.energy_integral"),
    ("gts","gts",".GTS.last"),
    ("gdd","gdd",".growdeg.sum"),
]
## $obs.label.snapshot*, class, timespan tag
#set $timespans = [
    ("today","daily","day"),
    ("month","month","month"),
]
<div class="row">
  <div class="col-xs-12 col-sm-12 snapshot-records-text">
     $obs.label.weather_snapshots <a href="$relative_url/records/">$obs.label.weather_snapshots_link</a>
  </div>
  #for $ti in $timespans
  #set $bd = "" if $ti[1]=='daily' else " border-left"
  <div class="col-xs-12 col-sm-6 stn-quick-stats$bd">
     <div class="row">
       <div class="col-xs-12 stats-title">
         <span class="snapshot-records-${ti[0]}-header">-</span><!-- JS and AJAX -->
       </div>
       #for $obs in $observations
       <div class="col-xs-12 col-lg-6">
         <div class="row row-no-gutters">
           <div class="col-xs-7">
             <!-- ti[0]="$ti[0]" obs[0]="$obs[0]" -->
             #if $str($getVar('obs.label.snapshot_'+$ti[0]+'_'+$obs[0]))==('snapshot_'+$ti[0]+'_'+$obs[0])
             <b>$getVar('obs.label.snapshot_'+$obs[0]):</b>
             #else
             <b>$getVar('obs.label.snapshot_'+$ti[0]+'_'+$obs[0]):</b>
             #end if
           </div>
           <div class="col-xs-5 text-right">
             #try
             <!-- ti[2]="$ti[2]" obs[2]="$obs[2]" -->
             #if $obs[2][0]=='('
             ## not standard binding
             #set $obs_parts = $obs[2].split('.')
             #set $binding = $obs_parts[0].split('"')[1]
             #if $ti[2]=='day'
             #set $val = $day(data_binding=$binding)
             #else if $ti[2]=='month'
             #set $val = $month(data_binding=$binding)
             #end if
             #for $part in $obs_parts[1:]
             #set $val = $getattr($val,$part)
             #end for
             #else
             ## standard binding
             #set $val = $getVar($ti[2]+$obs[2])
             #end if
             ## german 'Stunden' is too long, use abbrevation instead
             #if $obs[1] in ('raindur','sunshinedur')
             #set $val = $val.format(add_label=False)+' h'
             #end if
             #except
             #set $val = 'error'
             #end try
             <span class="${ti[1]}stats${obs[1]}">$val</span>
           </div>
         </div>
       </div>
       #end for
     </div>
  </div>
  #end for
</div>

Using #for statements the code contains no repetitions. Instead, there is a list at the beginning, containing the label, class, and observation type names to use. To customize the snapshot section, you only need to add elements to that list. You need not write HTML code.

Another issue is the layout on phones. Originally a table structure is used. If the screen is narrow the table is wider than the screen. The Belchertown skin is based on the Bootstrap framework. It provides a grid system, that is more flexible with different screen sizes. Therefore I used the divs of the grid system.

There is an additional issue with the Bootstrap grid system and the Belchertown skin. The grid system requires to alternate row and col- classes in hierarchy. row with row on the same level, col- with col- on the same level, only. Within the Belchertown templates there are some violations of that rule. The problems, resulting from those violations, were handled by setting padding and margins in several CSS rules where they do not belong. To get a resizable layout, you need to remove all those padding and margin settings from the CSS files style.css and belchertown-dark.min.css. This is quite a lot of work, but it's worth it.