Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Jay J Kim
weather
Commits
380968b1
Commit
380968b1
authored
Mar 17, 2016
by
Zach
Committed by
Zach Knox
Apr 30, 2016
Browse files
hourly forecast table
parent
2522e9f1
Changes
2
Hide whitespace changes
Inline
Side-by-side
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"
>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment