Commit e687a1c1 authored by Zac Wood's avatar Zac Wood

Migrated CSS framework from MDL to Bootstrap 4

parent f8d51f65
/* CSS declarations go here */
.bg {
background-color: #dedede;
}
......@@ -14,7 +15,7 @@
font-size: 60%;
}
.temp-size {
font-size: 32pt;
font-size: 24pt;
}
.detail-size {
font-size: 16pt;
......@@ -39,9 +40,6 @@
background: #ee1111;
}
.forecast-grid.mdl-grid {
}
.out-of-focus-card.mdl-card {
margin: auto;
width: auto;
......@@ -96,3 +94,7 @@
.mdl-layout__tab-bar-left-button {
background-color: #006633;
}
.footer {
margin-top: 20px;
}
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="SRCT Weather beautifully displays live weather and forecasts for Mason's campuses.">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<title>SRCT Weather</title>
<link rel="stylesheet" href="weather.css">
<link rel="stylesheet" href="main.css">
<link rel="icon" type="image/x-icon" href="lib/favicon.ico" />
</head>
<body>
{{> home}}
<!-- Bootstrap dependencies -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
<template name="footer">
<footer class="mdl-mini-footer">
<div class="mdl-mini-footer__left-section">
<div class="mdl-logo">SRCT Weather | Powered by <a href="https://darksky.net/">Dark Sky</a></div>
<footer class="footer">
<div class="container-fluid">
<div class="d-flex justify-content-between">
<div>
SRCT Weather | Powered by <a href="https://darksky.net/">Dark Sky</a>
</div>
<div class="mdl-mini-footer__right-section" style="align: right">
A project of Mason <a href="https://srct.gmu.edu/"><strong>SRCT</strong></a>, a registered student org.
<br />Read and <a href="https://git.gmu.edu//srct/weather/milestones/">contribute</a>
to our <a href="https://www.gnu.org/licenses/quick-guide-gplv3.html">freely-licensed</a>
<a href="https://git.gmu.edu/srct/weather/" target="_blank">source code</a>.
<div>
A project of Mason <a href="https://srct.gmu.edu/"><strong>SRCT</strong></a>, a registered student org.
<br />Read and <a href="https://git.gmu.edu//srct/weather/milestones/">contribute</a>
to our <a href="https://www.gnu.org/licenses/quick-guide-gplv3.html">freely-licensed</a>
<a href="https://git.gmu.edu/srct/weather/" target="_blank">source code<br/></a>.
</div>
</footer>
</div>
</div>
</footer>
</template>
<template name="home">
<!-- MDL Fixed Layout Container -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header header-bg">
<!-- Header Container -->
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title of Header -->
<span class="mdl-layout-title">Weather<span class="development-tag">ALPHA</span></span>
</div>
<!-- Tab Bar Container , and Tab links -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect header-bg" style="background: #006633;">
<a id="fairfax-tab-button" href="#weather" class="mdl-layout__tab is-active">Fairfax</a>
<a id="arlington-tab-button" href="#weather" class="mdl-layout__tab">Arlington</a>
<a id="scitech-tab-button" href="#weather" class="mdl-layout__tab">SciTech</a>
<a id="korea-tab-button" href="#weather" class="mdl-layout__tab">Mason Korea</a>
</div>
</header>
<!-- MDL Layout Header -->
<main class="mdl-layout__content">
<section class="mdl-layout__tab-panel is-active" id="weather">
<div class="page-content">
<div class="page-content">{{> weather}}</div>
</div>
</section>
{{> footer}}
</main>
<!--Bootstrap Navbar-->
<nav class="navbar sticky-top navbar-toggleable-md navbar-light bg-faded">
<!--Toggles dropdown navbar on smaller screens-->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Weather<span class="development-tag">ALPHA</span></a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#/" id="fairfax-tab-button">Fairfax</a>
<a class="nav-item nav-link" href="#/" id="arlington-tab-button">Arlington</a>
<a class="nav-item nav-link" href="#/" id="scitech-tab-button">SciTech</a>
<a class="nav-item nav-link" href="#/" id="korea-tab-button">Korea</a>
</div>
</div>
</nav>
<div class="container-fluid" id="weather">
{{> weather}}
</div>
<div class="container-fluid" id="footer">
{{> footer}}
</div>
</template>
<template name="weather">
<div class="mdl-grid">
{{#if weatherData.alerts.title}}
<div class="mdl-cell mdl-cell--12-col">
<div class="alert-card weather-card mdl-card mdl-shadow--4dp">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text"><a href="{{weatherData.alerts.url}}">{{weatherData.alerts.title}}</a> until {{formatTimestamp weatherData.alerts.expires}}<br /></h1>
</div>
<div class="mdl-card__supporting-text">
{{weatherData.alerts.description}}
</div>
</div>
</div>
{{/if}}
<div class="mdl-cell mdl-cell--12-col">
<div class="{{getColorStyle (roundNumber weatherData.data.currently.temperature)}} weather-card mdl-card mdl-shadow--4dp">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">Current Conditions<br /></h1>
</div>
<div class="mdl-card__supporting-text">
<h4>{{weatherData.data.currently.summary}}</h4>
<div class="temp-size">
<i class="wi {{convertIconName weatherData.data.currently.icon}} wi-fw"></i> {{roundNumber weatherData.data.currently.temperature}}<i class="wi wi-fahrenheit"></i>
</div>
<div class="detail-size">
Feels like {{roundNumber weatherData.data.currently.apparentTemperature}}<i class="wi wi-fahrenheit"></i>
<br /><br /><i class="wi wi-{{precipitationIcons weatherData.data.currently.precipProbability}}"></i> {{precipitationWords weatherData.data.currently.precipProbability}} &nbsp;&nbsp;&nbsp;<i class="wi wi-wind wi-towards-{{windDirectionClass}}"></i> {{roundNumber weatherData.data.currently.windSpeed}}mph {{windDirection}}
<!-- TODO: Change the icon based on time -->
<br /><br /><!--i class="wi wi-sunset"></i> {{formatTimestamp weatherData.data.currently.time}}-->
</div>
</div>
</div>
</div>
<div class="hourly-table mdl-cell mdl-cell--6-col mdl-shadow--4dp table-full-width">
<table class="mdl-data-table mdl-js-data-table">
<thead>
<tr>
<th class="mdl-data-table__cell--non-numeric table-full-width">Hourly Forcast</th>
<th class="mdl-data-table__cell--non-numeric">Condition</th>
<th class="mdl-data-table__cell--non-numeric"><i class="wi wi-fahrenheit"></i></th>
<th class="mdl-data-table__cell--non-numeric">Precipitation</th>
<th class="mdl-data-table__cell--non-numeric">Wind</th>
</tr>
</thead>
<tbody>
{{#each hourWeather in getNext12 weatherData.data.hourly.data}}
<tr>
<td class="mdl-data-table__cell--non-numeric">{{formatTimestampToHour hourWeather.time}}</td>
<td class="mdl-data-table__cell--non-numeric"><i class="wi {{convertIconName hourWeather.icon}} wi-fw"></i> {{hourWeather.summary}}</td>
<td>{{roundNumber hourWeather.temperature}}<i class="wi wi-fahrenheit"></i></td>
<td>{{precipitationReadable hourWeather.precipProbability}}%</td>
<td>{{roundNumber hourWeather.windSpeed}}mph</td>
</tr>
{{/each}}
</tbody>
</table>
<!--Show alert if one exists -->
{{#if weatherData.alerts.title}}
<div class="container">
<div class="alert alert-danger">
<h3><a href="#weather">Alert</a> until 8PM</h3>
{{weatherData.alerts.description}}
</div>
</div>
{{/if}}
<!-- Current forcast -->
<div class="container">
<div class="card text-center">
<div class="card-block">
<h5 class="card-title">Current Conditions</h5>
<h4 class="card-title">{{weatherData.data.currently.summary}}</h4>
<div class="temp-size">
<i class="wi {{convertIconName weatherData.data.currently.icon}} wi-fw"></i> {{roundNumber weatherData.data.currently.temperature}}<i class="wi wi-fahrenheit"></i>
</div>
{{#each dayWeather in weatherData.data.daily.data}}
<div class="mdl-cell mdl-cell--4-col">
<div class="{{getColorStyle (roundNumber dayWeather.temperatureMax)}} weather-card mdl-card mdl-shadow--4dp">
<div class="mdl-card__title">
<h1 class="mdl-card__title-text">{{getDayNameFromTime dayWeather.time}}<br /></h1>
</div>
<div class="mdl-card__supporting-text">
<h5>{{dayWeather.summary}}</h5>
<div class="oof-size">
<i class="wi {{convertIconName dayWeather.icon}} wi-fw"></i> {{roundNumber dayWeather.temperatureMax}}<i class="wi wi-fahrenheit"></i> / {{roundNumber dayWeather.temperatureMin}}<i class="wi wi-fahrenheit"></i>
</div>
<div class="detail-size">
<br />
<i class="wi wi-{{precipitationIcons dayWeather.precipProbability}}"></i> {{precipitationWords dayWeather.precipProbability}}
<br /><br />
</div>
</div>
</div>
<div class="detail-size">
Feels like {{roundNumber weatherData.data.currently.apparentTemperature}}<i class="wi wi-fahrenheit"></i>
<br /><br /><i class="wi wi-{{precipitationIcons weatherData.data.currently.precipProbability}}"></i> {{precipitationWords weatherData.data.currently.precipProbability}} &nbsp;&nbsp;&nbsp;<i class="wi wi-wind wi-towards-{{windDirectionClass}}"></i> {{roundNumber weatherData.data.currently.windSpeed}}mph {{windDirection}}
</div>
{{/each}}
</div>
</div>
</div>
<!-- Hourly forcast -->
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Hourly Forcast</th>
<th>Condition</th>
<th><i class="wi wi-fahrenheit"></i></th>
<th>Precipitation</th>
<th>Wind</th>
</tr>
</thead>
<tbody>
{{#each hourWeather in getNext12 weatherData.data.hourly.data}}
<tr>
<td>{{formatTimestampToHour hourWeather.time}}</td>
<td><i class="wi {{convertIconName hourWeather.icon}} wi-fw"></i> {{hourWeather.summary}}</td>
<td>{{roundNumber hourWeather.temperature}}<i class="wi wi-fahrenheit"></i></td>
<td>{{precipitationReadable hourWeather.precipProbability}}%</td>
<td>{{roundNumber hourWeather.windSpeed}}mph</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
<!-- Weekly forcast -->
<div class="container">
<div class="row">
{{#each dayWeather in weatherData.data.daily.data}}
<div class="card text-center" style="width: 20rem;">
<div class="card-block">
<h4 class="card-title">{{getDayNameFromTime dayWeather.time}}</h4>
<h5>{{dayWeather.summary}}</h5>
<div class="oof-size">
<i class="wi {{convertIconName dayWeather.icon}} wi-fw"></i> {{roundNumber dayWeather.temperatureMax}}<i class="wi wi-fahrenheit"></i> / {{roundNumber dayWeather.temperatureMin}}<i class="wi wi-fahrenheit"></i>
</div>
<div class="detail-size">
<i class="wi wi-{{precipitationIcons dayWeather.precipProbability}}"></i> {{precipitationWords dayWeather.precipProbability}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
</template>
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