WIP: tweaking layout #3
1 changed files with 67 additions and 88 deletions
155
template.liquid
155
template.liquid
|
|
@ -1,94 +1,73 @@
|
||||||
<div class="columns">
|
<div>
|
||||||
<div class="column">
|
<div class="flex flex--row">
|
||||||
<span class="title title--small text--gray-4 text--center">fetched: {{ fetched_at }}</span>
|
<div>
|
||||||
{% for pollen in pollen %}
|
<span class="value">{{ current.temp }}°F</span>
|
||||||
<span class="title title--small bg--black text--white text--center">pollen index</span>
|
<span class="label text--gray-4">feels like {{ current.feels_like }}°F</span>
|
||||||
<div class="richtext gap--xxsmall">
|
|
||||||
<p class="content content--small">forecast at {{pollen.forecast_date}}</p>
|
|
||||||
</div>
|
</div>
|
||||||
<table class="table table--condensed">
|
<div class="stretch text--right">
|
||||||
<thead>
|
<span class="value">{{ current.desc }}</span>
|
||||||
<tr>
|
<span class="label text--gray-4">conditions</span>
|
||||||
{% for period in pollen.periods %}
|
</div>
|
||||||
<th><span class="label label--small text--center">{{period.period}}</span></th>
|
</div>
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr>
|
|
||||||
{% for period in pollen.periods %}
|
|
||||||
<td><span class="label label--small text--center">{{period.index}}</span></td>
|
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
{% for weather in weather %}
|
<div class="flex flex--row">
|
||||||
<span class="title title--small bg--black text--white text--center">weather forecast</span>
|
<div>
|
||||||
<div class="richtext gap--xxsmall">
|
<span class="value">{{ current.humidity }}%</span>
|
||||||
<p class="content content--small">forecast at {{weather.forecast_date}}</p>
|
<span class="label text--gray-4">humidity</span>
|
||||||
</div>
|
</div>
|
||||||
<table class="table table--condensed">
|
<div class="stretch text--center">
|
||||||
<thead>
|
<span class="value">{{ current.pressure }}</span>
|
||||||
<tr>
|
<span class="label text--gray-4">pressure</span>
|
||||||
<th><span class="label label--small w--16"></span></th>
|
</div>
|
||||||
{% for period in weather.periods %}
|
<div class="text--right">
|
||||||
<th><span class="label label--small w--16 text--center">{{period.period}}</span></th>
|
<span class="value">{{ fetched_at }}</span>
|
||||||
{% endfor %}
|
<span class="label text--gray-4">date</span>
|
||||||
</tr>
|
</div>
|
||||||
</thead>
|
</div>
|
||||||
<tbody>
|
</div>
|
||||||
<tr>
|
|
||||||
<td><span class="label label--small text--right">low</span></td>
|
<div class="border--h-1 pt--4"></div>
|
||||||
{% for period in weather.periods %}
|
|
||||||
<td><span class="label label--small text--center">{{period.low}} F</span></td>
|
<div class="pt--4">
|
||||||
{% endfor %}
|
<div class="flex flex--row">
|
||||||
</tr>
|
{% assign periods = "today,tomorrow" | split: "," %}
|
||||||
<tr>
|
{% for period in periods %}
|
||||||
<td><span class="label label--small text--right">high</span></td>
|
{% assign data = [period] %}
|
||||||
{% for period in weather.periods %}
|
<div class="stretch ">
|
||||||
<td><span class="label label--small text--center">{{period.high}} F</span></td>
|
<div>
|
||||||
{% endfor %}
|
<div class="label label--inverted text--center">{{ period }}</div>
|
||||||
</tr>
|
|
||||||
<tr>
|
<div class="pt--2 text--center">
|
||||||
<td><span class="label label--small text--right">humidity</span></td>
|
<span class="value">
|
||||||
{% for period in weather.periods %}
|
{{ data.low }}°F / {{ data.high }}°F
|
||||||
<td><span class="label label--small text--center">{{period.humidity}}%</span></td>
|
</span>
|
||||||
{% endfor %}
|
</div>
|
||||||
</tr>
|
|
||||||
<tr>
|
<div class="text--center">
|
||||||
<td><span class="label label--small text--right">pressure</span></td>
|
<span class="value">{{ data.desc }}</span>
|
||||||
{% for period in weather.periods %}
|
</div>
|
||||||
<td><span class="label label--small text--center">{{period.pressure}}</span></td>
|
|
||||||
{% endfor %}
|
<div class="text--center">
|
||||||
</tr>
|
<span class="value">{{ data.sunrise }} - {{ data.sunset }}</span>
|
||||||
<tr>
|
</div>
|
||||||
<td><span class="label label--small text--right">sunrise</span></td>
|
|
||||||
{% for period in weather.periods %}
|
<div class="flex flex--row">
|
||||||
<td><span class="label label--small text--center">{{period.sunrise}}</span></td>
|
<div class="text--center">
|
||||||
{% endfor %}
|
<span class="value">{{ data.humidity }}%</span>
|
||||||
</tr>
|
<span class="label text--gray-4">humidity</span>
|
||||||
<tr>
|
</div>
|
||||||
<td><span class="label label--small text--right">sunset</span></td>
|
<div class="stretch text--center">
|
||||||
{% for period in weather.periods %}
|
<span class="value">{{ data.pressure }}</span>
|
||||||
<td><span class="label label--small text--center">{{period.sunset}}</span></td>
|
<span class="label text--gray-4">pressure</span>
|
||||||
{% endfor %}
|
</div>
|
||||||
</tr>
|
<div class="text--center">
|
||||||
<tr>
|
<span class="value">{{ data.pollen }}%</span>
|
||||||
<td><span class="label label--small text--right">desc</span></td>
|
<span class="label text--gray-4">pollen</span>
|
||||||
{% for period in weather.periods %}
|
</div>
|
||||||
<td><span class="label label--small h--10 clamp--none text--center">{{period.desc}}</span></td>
|
</div>
|
||||||
{% endfor %}
|
|
||||||
</tr>
|
</div>
|
||||||
</tbody>
|
</div>
|
||||||
</table>
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
|
||||||
{{ Content for column 2 }}
|
|
||||||
</div>
|
|
||||||
<div class="column">
|
|
||||||
{{ Content for column 3 }}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue