diff --git a/website/static/css/style.css b/website/static/css/style.css index d3a101a280dc55f5c844ccbfeb9ef45f9ae0fd39..0223651f61b8fc452adfa30a97902f156d8d2fee 100644 --- a/website/static/css/style.css +++ b/website/static/css/style.css @@ -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) { diff --git a/website/static/js/about.js b/website/static/js/about.js new file mode 100644 index 0000000000000000000000000000000000000000..6a9b560a2b5ef8a72a00350507d602c319116bcb --- /dev/null +++ b/website/static/js/about.js @@ -0,0 +1,18 @@ +$(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(); + }); +}); diff --git a/website/static/js/info.js b/website/static/js/info.js index 945eb981db36058886cd221d3b697e8d19aa681d..42b55cd1c16934bfa4ab3a0272754513c1474715 100644 --- a/website/static/js/info.js +++ b/website/static/js/info.js @@ -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 diff --git a/whats_open/templates/about.html b/whats_open/templates/about.html new file mode 100644 index 0000000000000000000000000000000000000000..39db567340ad184cb32d3720a5a1eb09889d644d --- /dev/null +++ b/whats_open/templates/about.html @@ -0,0 +1,33 @@ +{% block about %} +
+
+ +

What is this?

+

What's Open 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.

+

How does it work?

+

The schedules and locations are based on data taken from Mason's hours of operation page. What's Open then uses this data to determine which locations are open and closed and displays them in a simple format.

+
+
+
+
+
+
+
Open
+
+
+
Closed
+
+
+
+
+
+
+

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.

+

Who made this?

+

What's Open is a project created by GMU SRCT (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 SRCT website. The repository of the source code is hosted online as well.

+

What's Next?

+

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.

+

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.

+
+
+{% endblock %} diff --git a/whats_open/templates/base.html b/whats_open/templates/base.html index 5a46e04a362def1364873187184539face2c8514..610f505bc73ee5829f8d572f1492a16dde5ef571 100644 --- a/whats_open/templates/base.html +++ b/whats_open/templates/base.html @@ -1,19 +1,19 @@ {% block head %} - - - - - - - - - - - - - + + + + + + + + + + + + + {% block 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>