Skip to content

GitLab

Commit 380968b1 authored by Zach's avatar Zach Committed by Zach Knox
Browse files

hourly forecast table

parent 2522e9f1
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 88 deletions
weather/client/weather.css
View file @ 380968b1
......@@ -22,10 +22,15 @@
}
.forecast-grid.mdl-grid {
}
.out-of-focus-card.mdl-card {
margin: auto;
width: auto;
height: 30px;
}
.hourly-table.mdl-data-table {
width: auto;
margin: auto;
}
weather/client/weather.html
View file @ 380968b1
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">Weather</span>
</div>
</header>
<main class="mdl-layout__content">
<div>
<div class="bg">
{{> weather}}
{{> footer}}
</div>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">Weather</span>
</div>
</header>
<main class="mdl-layout__content">
<div>
<div class="bg">
{{> weather}} {{> footer}}
</div>
</div>
</main>
</div>
</main>
</div>
</body>
<template name="weather">
<div class="mdl-grid">
<div class="mdl-call mdl-cell--12-col">
<div class="weather-card mdl-card mdl-shadow--4dp">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Fairfax Campus<br /></h1>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--6-col">
<div class="weather-card mdl-card mdl-shadow--4dp">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Fairfax Campus<br /></h1>
</div>
<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 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 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>
<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-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 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>
</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 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