Commit cd75d9f3 authored by Renfred Harper's avatar Renfred Harper
Browse files

Add responsive elements to info popup

parent bf6afac7
......@@ -125,7 +125,10 @@ ul.ui-autocomplete {
background-color: #FFF;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
position: fixed;
top: 51px;
bottom: 0;
z-index: 3;
display: none;
}
#info-name {
......@@ -134,7 +137,9 @@ ul.ui-autocomplete {
}
#info-close {
position: absolute;
right: 15px;
right: 0;
padding: 6px 19px 19px 19px;
cursor: pointer;
}
/* Custom Responsive Classes */
/* xs */
......@@ -143,7 +148,9 @@ ul.ui-autocomplete {
}
/* sm */
@media (min-width: 768px) {
#info-close {
padding: 6px 31px 31px 31px;
}
}
/* md */
@media (min-width: 992px) {
......@@ -170,6 +177,13 @@ ul.ui-autocomplete {
.navbar-default {
background-color: rgba(252,252,255,0.82);
}
#info-body {
position: static;
cursor: pointer;
}
#info-close {
display: none;
}
}
/* lg */
@media (min-width: 1200px) {
......
......@@ -128,6 +128,12 @@ $.ajax({
});
$(document).ready(function() {
var lastClicked = null;
$('#info-body').click(function() {
// Only allow closing the info pane via click on larger screens
if ($(window).width() >= 992) {
$(this).slideUp(350);
}
});
$('#info-body').click(function() {
$(this).slideUp(350);
});
......
......@@ -54,6 +54,7 @@
<div id="info-body">
<div class="container" id="info-container">
<div class="row">
<img src="{{ STATIC_URL }}img/close.png" id="info-close">
<div class="col-md-12" id="info-name"></div>
<div class="col-md-3" id="info-status"></div>
<div class="col-md-3" id="info-next"></div>
......
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