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