Skip to content

GitLab

Commit f7325194 authored by Zach's avatar Zach
Browse files

multiple day forcast in cards.

parent d94c9571
Hide whitespace changes
Inline Side-by-side
weather/client/weather.css
View file @ f7325194
......@@ -3,9 +3,28 @@
font-size: 32pt;
}
.oof-size {
font-size: 24pt;
}
.weather-card.mdl-card {
margin: auto;
margin-top: 10px;
width: 80%;
width: auto;
height: 250px;
background: #425195;
}
.weather-card > .mdl-card__title,
.weather-card > .mdl-card__supporting-text {
color: #fff;
}
.forecast-grid.mdl-grid {
width: 80%;
}
.out-of-focus-card.mdl-card {
margin: auto;
margin-top: 10px;
width: auto;
height: 30px;
}
weather/client/weather.html
View file @ f7325194
......@@ -2,17 +2,61 @@
{{> weather}}
</body>
<template name="weather">
<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 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>
<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="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>
......
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