Skip to content

Instantly share code, notes, and snippets.

@samirbr

samirbr/dialog.html

Last active August 29, 2015 14:21
Show Gist options
  • Save samirbr/e20d4d08e7bfb7f72e67 to your computer and use it in GitHub Desktop.
Save samirbr/e20d4d08e7bfb7f72e67 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dialog.html
<!DOCTYPE html>
<html>
<head>
<!-- Mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Twitter Bootstrap -->
<!-- DatePicker -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Dropdown.js -->
<link href="http://cdn.rawgit.com/FezVrasta/dropdown.js/master/jquery.dropdown.css" rel="stylesheet">
<!-- Material Design for Bootstrap -->
<link href="ripples.min.css" rel="stylesheet">
<link href="material.min.css" rel="stylesheet">
<link href="material-fullpalette.min.css" rel="stylesheet">
<!--link rel="stylesheet" href="{{ STATIC_URL }}frontend/bootstrap/css/bootstrap.min.css"-->
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<!--link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"-->
<!-- Include roboto.css to use the Roboto web font, material.css to include the theme and ripples.css to style the ripple effect -->
<!-- Mobile support -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body {
height: 100%;
}
#dialog h2 {
padding: 14px;
margin: 0;
font-size: 16px;
font-weight: 400;
}
#dialog {
height: 15%;
}
#map {
height: 85%;
width: 100%;
}
p, button, p>select, p>label, p>.helptext {
vertical-align: top;
display: inline-block;
}
</style>
</head>
<body>
<div class="well page" id="dialog">
<button class="btn btn-primary" data-toggle="modal" data-target="#complete-dialog">Open dialog</button>
<div id="complete-dialog" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">Dialog</h4>
</div>
<div class="modal-body">
{{ form.as_p }}
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">Dismiss</button>
</div>
</div>
</div>
</div>
</div>
<div id="map"></div>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="ripples.min.js"></script>
<script src="material.min.js"></script>
<script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
$( "#id_created__gte" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
dateFormat: "yy-mm-dd",
autoSize: true,
onClose: function( selectedDate ) {
$( "#id_created__lt" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#id_created__lt" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
dateFormat: "yy-mm-dd",
autoSize: true,
onClose: function( selectedDate ) {
$( "#id_created__gte" ).datepicker( "option", "maxDate", selectedDate );
}
});
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([0, 0], 13);
// add an OpenStreetMap tile layer
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment