Commit 20e269c4 authored by Renfred Harper's avatar Renfred Harper

Merge branch 'front-end'

parents 232ba268 fa3ac5e1
......@@ -10,7 +10,13 @@
padding: 13px 18px;
font-size: 26px;
}
.navbar-default .navbar-nav > .active > a {
background: rgba(255,255,255,0.50);
}
.navbar-default .navbar-nav > .active > a:hover {
background: rgba(255,255,255,0.50);
color: #000;
}
/*Styles*/
a{
color: #006633;
......@@ -35,6 +41,9 @@ body {
padding-top: 50px;
}
.clip{
overflow: hidden;
}
.title{
text-align: center;
font-size: 50px;
......@@ -51,14 +60,16 @@ body {
.grid-box{
font-size:160%;
margin: 10px 0px;
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.grid-box .restaurant{
text-align:center;
background-color: white;
padding: 10px 0px;
margin: 5px 0px;
margin-top: 5px;
margin-bottom: 5px;
}
.opened{
color:#141414;
......@@ -101,7 +112,7 @@ ul.ui-autocomplete {
}
.main-container{
padding-bottom: 200px;
margin-top: 20px
margin-top: 20px;
}
#footer{
background-color: rgba(252,252,255,0.96);
......@@ -133,19 +144,70 @@ ul.ui-autocomplete {
position: fixed;
top: 51px;
bottom: 0;
z-index: 3;
z-index: 10;
display: none;
overflow-y: scroll;
}
#info-name {
font-size: 22px;
margin-bottom: 5px;
}
#info-close {
#info-close, #about-close {
position: absolute;
right: 0;
padding: 6px 19px 19px 19px;
cursor: pointer;
z-index: 10;
opacity: 0.4;
}
#about-close-nav {
opacity: 0.5;
padding: 2px 15px 0px 15px;
display: none;
}
#info-close:hover, #about-close:hover, #about-close-nav:hover {
opacity: 1;
}
#about-body{
position: fixed;
z-index: 1040;
top: 51px;
width: 100%;
bottom: 0;
overflow: scroll;
}
#about-container {
width: 100%;
overflow-y: auto;
}
.about-content {
background-color: #FFF;
padding-bottom: 20px;
}
#about-example{
background-color: rgba(255,255,255,0.4);
}
.about-top-p{
margin-top: 20px;
}
#about-link{
cursor: pointer;
}
.grid-blur{
opacity: 0.54;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
}
.main-container{
/* Transitions for .grid-blur */
-webkit-transition: opacity 356ms ease-in-out, -webkit-filter 356ms ease-in-out;
-moz-transition: opacity 356ms ease-in-out, -moz-filter 356ms ease-in-out;;
-o-transition: opacity 356ms ease-in-out, -o-filter 356ms ease-in-out;;
-ms-transition: opacity 356ms ease-in-out, -ms-filter 356ms ease-in-out;
transition: opacity 356ms ease-in-out, "filter" 356ms ease-in-out;
}
/* Custom Responsive Classes */
/* xs */
......@@ -190,6 +252,16 @@ ul.ui-autocomplete {
#info-close {
display: none;
}
#about-close {
display: none;
}
#about-body {
bottom: 100px;
}
.navbar-nav li{
margin-left: 10px;
margin-right: 10px;
}
}
/* lg */
@media (min-width: 1200px) {
......
$(document).ready(function(){
$('#about-link').click(function(){
$(this).parent().toggleClass('active');
$('#about-body').slideToggle(356);
$('.main-container').toggleClass('grid-blur');
// Prevent body from scolling when about section is active
$('body').toggleClass('clip');
$('#about-link-text, #about-close-nav').toggle();
});
$('#about-close').click(function(){
$('#about-link').parent().removeClass('active');
$('#about-body').slideUp(356);
$('.main-container').removeClass('grid-blur');
$('body').removeClass('clip');
$('#about-link-text').show();
$('#about-close-nav').hide();
});
});
......@@ -28,25 +28,11 @@ $(document).ready(function() {
// Only allow closing the info pane via click on larger screens
if ($(window).width() >= 992) {
$(this).slideUp(350);
}
});
$('#info-close').click(function() {
$('#info-body').slideUp(350);
}
});
// Displays more info about a restaurant on-click
$(document).on('click', '.grid-box', function() {
// If the user clicks on the same box twice it will close the info menu
grid_id = $(this).attr('id');
if (lastClicked == grid_id){
$('#info-body').slideToggle(300)
}
else {
// Empty the schedule before sliding down in case the new
// schedule is shorter
$('#info-schedule').empty();
$('#info-body').slideDown(300);
lastClicked = grid_id;
}
// Search though the restaurnts object to find the selected restaurant's info
var restaurant;
$.each(restaurants, function(idx, restaurant_i) {
......@@ -97,5 +83,21 @@ $(document).ready(function() {
element = '';
}
}
// If the user clicks on the same box twice it will close the info menu
if (lastClicked == grid_id){
$('#info-body').slideToggle(300)
}
else {
$('#info-body').slideDown(300);
lastClicked = grid_id;
}
if ($(window).width() <= 992) {
// On mobile displays, disable scrolling when info body is active
$('body').addClass('clip');
}
});
$('#info-close').click(function() {
$('#info-body').slideUp(350);
$('body').removeClass('clip');
});
});
\ No newline at end of file
{% block about %}
<div class="row about-content">
<div class="col-md-10 col-md-offset-1">
<a id="about-close"><img src="{{ STATIC_URL }}img/close.png"></a>
<h3>What is this?</h3>
<p><b>What's Open</b> is a dynamic web application that let's you easily find out which on-campus locations are currently available. It's a simple alternative to searching for campus hours and filtering though them to figure out what's which ones are open.</p>
<h3>How does it work?</h3>
<p>The schedules and locations are based on data taken from <a href="http://www.gmu.edu/resources/welcome/hours.html">Mason's hours of operation page</a>. What's Open then uses this data to determine which locations are open and closed and displays them in a simple format.</p>
</div>
</div>
<div class="row" id="about-example">
<div class="col-md-10 col-md-offset-1" id="about-column">
<div class="row">
<div class="col-sm-6 col-md-4 col-lg-4 col-lg-offset-1 grid-box">
<div class="restaurant opened">Open</div>
</div>
<div class="col-sm-6 col-md-4 col-lg-4 col-lg-offset-2 grid-box">
<div class="restaurant closed">Closed</div>
</div>
</div>
</div>
</div>
<div class="row about-content">
<div class="col-md-10 col-md-offset-1">
<p class="about-top-p">If you stay on the What's Open page for an extended period of time the view will automatically update to accurately reflect the locations open at the current time.</p>
<h3>Who made this?</h3>
<p>What's Open is a project created by <a href="http://srct.gmu.edu/">GMU SRCT</a> (Student-Run Computing and Technology), a student-run organization at George Mason University that establishes and maintains systems which provide specific services the Mason community. You can find information on the current developers of the project on the <a href="http://srct.gmu.edu/projects/whatsopen">SRCT website</a>. The <a href="http://git.gmu.edu/srct/whats-open">repository of the source code is hosted online as well</a>.</p>
<h3>What's Next?</h3>
<p>What's Open is currently in beta and the base functionality has been completed. As of right now we only offer information pertaining to dining locations of Mason's campus. In the near future we plan to expand our database in order to display information pertaining to other facilities on GMU's campus including student union buildings, libraries, campus retailers, and more.</p>
<p>Keep in mind that What's Open is currently in beta so if there are any browser compatibilities issues, schedule inaccuracies, or if you have a suggestion you can report them to the admin and we can try to respond to the issue.</p>
</div>
</div>
{% endblock %}
<html>
{% block head %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/style.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}js/grid.js"></script>
<script src="{{ STATIC_URL }}js/typeAhead.js"></script>
<script src="{{ STATIC_URL }}js/info.js"></script>
<link rel="icon" href="{{ STATIC_URL }}/img/gmu-logo.ico">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{{ STATIC_URL }}css/bootstrap.min.css" rel="stylesheet">
<link href="{{ STATIC_URL }}css/style.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.datejs.com/build/date.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>
<script src="{{ STATIC_URL }}js/grid.js"></script>
<script src="{{ STATIC_URL }}js/typeAhead.js"></script>
<script src="{{ STATIC_URL }}js/info.js"></script>
<script src="{{ STATIC_URL }}js/about.js"></script>
<link rel="icon" href="{{ STATIC_URL }}/img/gmu-logo.ico">
{% block title %}
<title>
What's Open
......@@ -23,6 +23,7 @@
{% endblock %}
<body>
<div class="holder">
{% block nav %}
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
......@@ -34,8 +35,18 @@
<a class="navbar-brand" href="/">what's open</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right" style="display:none;">
<li class="dropdown">
<div class="navbar-form navbar-right" role="search">
<div class="form-group">
<input id="searchBar" type="text" class="form-control" placeholder="Search">
</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
<a id="about-link">
<span id="about-link-text">About</span><img id="about-close-nav" src="{{ STATIC_URL }}img/close.png">
</a>
</li>
<li class="dropdown" style="display:none;">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Select Campus <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Fairfax</a></li>
......@@ -44,13 +55,15 @@
</ul>
</li>
</ul>
<div class="navbar-form navbar-right" role="search">
<div class="form-group">
<input id="searchBar" type="text" class="form-control" placeholder="Search">
</div>
</div>
</div>
</nav>
{% endblock %}
<div id="about-body" style="display:none;">
<div class="container" id="about-container">
{% include 'about.html' %}
</div>
</div>
<div id="info-body">
<div class="container" id="info-container">
<div class="row" id="info-row">
......@@ -71,7 +84,8 @@
{% endblock %}
</div>
</div>
</div>
</div>
{% block footer %}
<div id="footer">
<div class="footer-row">
<a class="gmu-brand" href="http://www.gmu.edu"><img src="{{ STATIC_URL }}img/gmurgb.png" class="gmu-logo"></a>
......@@ -80,6 +94,7 @@
</div>
</div>
</div>
{% endblock %}
</div>
</body>
</html>
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