Skip to content

GitLab

Commit fe671237 authored by Zach's avatar Zach
Browse files

hourly forecast table

parent 977fffb8
Hide whitespace changes
Inline Side-by-side
weather/client/weather.css
View file @ fe671237
...@@ -22,10 +22,15 @@ ...@@ -22,10 +22,15 @@
} }
.forecast-grid.mdl-grid { .forecast-grid.mdl-grid {
} }
.out-of-focus-card.mdl-card { .out-of-focus-card.mdl-card {
margin: auto; margin: auto;
width: auto; width: auto;
height: 30px; height: 30px;
} }
.hourly-table.mdl-data-table {
width: auto;
margin: auto;
}
weather/client/weather.html
View file @ fe671237
<body> <body>
<div class="mdl-layout mdl-js-layout"> <div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header"> <header class="mdl-layout__header">
<div class="mdl-layout__header-row"> <div class="mdl-layout__header-row">
<span class="mdl-layout__title">Weather</span> <span class="mdl-layout__title">Weather</span>
</div> </div>
</header> </header>
<main class="mdl-layout__content"> <main class="mdl-layout__content">
<div> <div>
<div class="bg"> <div class="bg">
{{> weather}} {{> weather}} {{> footer}}
{{> footer}} </div>
</div> </div>
</main>
</div> </div>
</main>
</div>
</body> </body>
<template name="weather"> <template name="weather">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col">
<div class="mdl-grid"> <div class="weather-card mdl-card mdl-shadow--4dp">
<div class="mdl-call mdl-cell--12-col"> <div class="mdl-card__title">
<div class="weather-card mdl-card mdl-shadow--4dp"> <h1 class="mdl-card__title-text">Fairfax Campus<br /></h1>
<div class="mdl-card__title"> </div>
<h1 class="mdl-card__title-text">Fairfax Campus<br /></h1> <div class="mdl-card__supporting-text">
<h4>Partly Cloudy</h4>
<div class="temp-size">
<i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i>
</div>
<br /> Feels like 72<i class="wi wi-fahrenheit"></i>
<br />
</div>
</div>
</div>
<div class="hourly-table mdl-cell mdl-cell--6-col mdl-shadow--4dp">
<table class="mdl-data-table mdl-js-data-table">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric">Hourly Forcast</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mdl-data-table__cell--non-numeric">4 PM</td>
<td class="mdl-data-table__cell--non-numeric"><i class="wi wi-day-cloudy wi-fw"></i> Partly Cloudy</td>
<td>74<i class="wi wi-fahrenheit"></i></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">5 PM</td>
<td class="mdl-data-table__cell--non-numeric"><i class="wi wi-day-sunny wi-fw"></i>Sunny</td>
<td>72<i class="wi wi-fahrenheit"></i></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">6 PM</td>
<td class="mdl-data-table__cell--non-numeric"><i class="wi wi-night-clear wi-fw"></i>Clear</td>
<td>70<i class="wi wi-fahrenheit"></i></td>
</tr>
<tr>
<td class="mdl-data-table__cell--non-numeric">7 PM</td>
<td class="mdl-data-table__cell--non-numeric"><i class="wi wi-night-cloudy wi-fw"></i>Partly Cloudy</td>
<td>69<i class="wi wi-fahrenheit"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="out-of-focus-card mdl-card mdl-shadow--4dp">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Tomorrow<br /></h1>
</div>
<div class="mdl-card__supporting-text">
<h5>Partly Cloudy</h5>
<div class="oof-size">
<i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> / 48<i class="wi wi-fahrenheit"></i>
</div>
</div>
</div> </div>
<div class="mdl-card__supporting-text"> </div>
<h4>Partly Cloudy</h4> <div class="mdl-cell mdl-cell--4-col">
<div class="temp-size"> <div class="out-of-focus-card mdl-card mdl-shadow--4dp">
<i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> <div class="mdl-card__title">
</div><br /> <h1 class="mdl-card__title-text">Saturday<br /></h1>
Feels like 72<i class="wi wi-fahrenheit"></i><br /> </div>
<div class="mdl-card__supporting-text">
<h5>Partly Cloudy</h5>
<div class="oof-size">
<i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> / 48<i class="wi wi-fahrenheit"></i>
</div>
</div>
</div> </div>
</div> </div>
</div> <div class="mdl-cell mdl-cell--4-col">
<div class="mdl-cell mdl-cell--4-col"> <div class="out-of-focus-card mdl-card mdl-shadow--4dp">
<div class="out-of-focus-card mdl-card mdl-shadow--4dp"> <div class="mdl-card__title">
<div class="mdl-card__title"> <h1 class="mdl-card__title-text">Sunday<br /></h1>
<h1 class="mdl-card__title-text">Tomorrow<br /></h1> </div>
</div> <div class="mdl-card__supporting-text">
<div class="mdl-card__supporting-text"> <h5>Partly Cloudy</h5>
<h5>Partly Cloudy</h5> <div class="oof-size">
<div class="oof-size"> <i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> / 48<i class="wi wi-fahrenheit"></i>
<i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> / 48<i class="wi wi-fahrenheit"></i> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="out-of-focus-card mdl-card mdl-shadow--4dp">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Saturday<br /></h1>
</div>
<div class="mdl-card__supporting-text">
<h5>Partly Cloudy</h5>
<div class="oof-size">
<i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> / 48<i class="wi wi-fahrenheit"></i>
</div>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<div class="out-of-focus-card mdl-card mdl-shadow--4dp">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Sunday<br /></h1>
</div>
<div class="mdl-card__supporting-text">
<h5>Partly Cloudy</h5>
<div class="oof-size">
<i class="wi wi-day-cloudy wi-fw"></i> 76<i class="wi wi-fahrenheit"></i> / 48<i class="wi wi-fahrenheit"></i>
</div>
</div>
</div>
</div>
</div>
<h3><strong>Arlington Campus</strong> <i class="wi wi-day-sunny"></i> 82<i class="wi wi-fahrenheit"></i></h3>
<hr>
<h3><strong>Science and Technology Campus</strong> <i class="wi wi-day-sunny-overcast"></i> 74<i class="wi wi-fahrenheit"></i></h3>
<hr>
<h3><strong>Smithsonian Conservation Biology Institute</strong> <i class="wi wi-day-storm-showers"></i> 68<i class="wi wi-fahrenheit"></i></h3>
<hr>
<h3><strong>Mason Korea</strong> <i class="wi wi-rain-mix"></i> 64<i class="wi wi-fahrenheit"></i></h3>
<hr>
<h3><strong>Mason Ras-Al-Khaimah</strong> <i class="wi wi-hot"></i> 102<i class="wi wi-fahrenheit"></i></h3>
<hr>
</template>
<template name="header">
<header class="mdl-layout__header mdl-layout__header--scroll">
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">Weather</span>
<div class="mdl-layout-spacer"></div>
</div> </div>
</header> <h3><strong>Arlington Campus</strong> <i class="wi wi-day-sunny"></i> 82<i class="wi wi-fahrenheit"></i></h3>
<hr>
<h3><strong>Science and Technology Campus</strong> <i class="wi wi-day-sunny-overcast"></i> 74<i class="wi wi-fahrenheit"></i></h3>
<hr>
<h3><strong>Smithsonian Conservation Biology Institute</strong> <i class="wi wi-day-storm-showers"></i> 68<i class="wi wi-fahrenheit"></i></h3>
<hr>
<h3><strong>Mason Korea</strong> <i class="wi wi-rain-mix"></i> 64<i class="wi wi-fahrenheit"></i></h3>
<hr>
<h3><strong>Mason Ras-Al-Khaimah</strong> <i class="wi wi-hot"></i> 102<i class="wi wi-fahrenheit"></i></h3>
<hr>
</template> </template>
<template name="footer"> <template name="footer">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment