Commit 007f678c authored by Renfred Harper's avatar Renfred Harper

Add about js and styles

parent 5890d550
...@@ -35,6 +35,9 @@ body { ...@@ -35,6 +35,9 @@ body {
padding-top: 50px; padding-top: 50px;
} }
.clip{
overflow: hidden;
}
.title{ .title{
text-align: center; text-align: center;
font-size: 50px; font-size: 50px;
...@@ -133,19 +136,70 @@ ul.ui-autocomplete { ...@@ -133,19 +136,70 @@ ul.ui-autocomplete {
position: fixed; position: fixed;
top: 51px; top: 51px;
bottom: 0; bottom: 0;
z-index: 3; z-index: 10;
display: none; display: none;
overflow-y: scroll;
} }
#info-name { #info-name {
font-size: 22px; font-size: 22px;
margin-bottom: 5px; margin-bottom: 5px;
} }
#info-close { #info-close, #about-close {
position: absolute; position: absolute;
right: 0; right: 0;
padding: 6px 19px 19px 19px; padding: 6px 19px 19px 19px;
cursor: pointer; cursor: pointer;
z-index: 10; 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 */ /* Custom Responsive Classes */
/* xs */ /* xs */
...@@ -190,6 +244,16 @@ ul.ui-autocomplete { ...@@ -190,6 +244,16 @@ ul.ui-autocomplete {
#info-close { #info-close {
display: none; display: none;
} }
#about-close {
display: none;
}
#about-body {
bottom: 100px;
}
.navbar-nav li{
margin-left: 10px;
margin-right: 10px;
}
} }
/* lg */ /* lg */
@media (min-width: 1200px) { @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();
});
});
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
<script src="{{ STATIC_URL }}js/grid.js"></script> <script src="{{ STATIC_URL }}js/grid.js"></script>
<script src="{{ STATIC_URL }}js/typeAhead.js"></script> <script src="{{ STATIC_URL }}js/typeAhead.js"></script>
<script src="{{ STATIC_URL }}js/info.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"> <link rel="icon" href="{{ STATIC_URL }}/img/gmu-logo.ico">
{% block title %} {% block title %}
<title> <title>
......
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