Update lots of things
This commit is contained in:
Livvy Mackintosh
15
apps/map/templates/map/_nav.html
Normal file
15
apps/map/templates/map/_nav.html
Normal file
@ -0,0 +1,15 @@
|
||||
{% load staticfiles %}
|
||||
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<a class="navbar-brand" href="/"><img src="{% static "map/ojuso-logo-white.png" %}" alt="Ojuso Logo"></a>
|
||||
</div>
|
||||
<div id="navbar" class="collapse navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
{% block nav_links %}
|
||||
{% endblock %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
67
apps/map/templates/map/base.html
Normal file
67
apps/map/templates/map/base.html
Normal file
@ -0,0 +1,67 @@
|
||||
{% spaceless %}
|
||||
{% load bootstrap3 %}
|
||||
{% load compress %}
|
||||
{% load i18n %}
|
||||
{% load leaflet_tags %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
{# Metadata #}
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content"width=device-width, initial-scale=2">
|
||||
|
||||
<title>{% trans "Ojuso Platform Map" %}</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="author" content="">
|
||||
|
||||
{# CDN Stylesheets #}
|
||||
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
|
||||
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
|
||||
crossorigin="anonymous"
|
||||
rel="stylesheet"/>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js">
|
||||
integrity="sha384-qFIkRsVO/J5orlMvxK1sgAt2FXT67og+NyFTITYzvbIP1IJavVEKZM7YWczXkwpB"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"
|
||||
integrity="sha384-ZoaMbDF+4LeFxg6WdScQ9nnR1QC2MIRxA1O9KWEXQwns1G8UNyIEZIQidzb0T1fo"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<![endif]-->
|
||||
|
||||
{# Additional Stylesheets #}
|
||||
{% compress css %}
|
||||
{% block stylesheets %}
|
||||
<style>
|
||||
.navbar-brand {padding: 5px 15px;}
|
||||
.navbar-brand > img {height: 40px;}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% endcompress %}
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{# Main Markup #}
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
{# CDN Javascript #}
|
||||
<script src="//code.jquery.com/jquery-3.2.1.min.js"
|
||||
integrity="sha384-xBuQ/xzmlsLoJpyjoggmTEz8OWUFM0/RC5BsqQBDX2v5cMvDHcMakNTNrHIW2I5f"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
|
||||
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
|
||||
{# Additional Scripts #}
|
||||
{% block scripts %}{% endblock %}
|
||||
|
||||
</body>
|
||||
</html>
|
||||
{% endspaceless %}
|
||||
34
apps/map/templates/map/base_with_container.html
Normal file
34
apps/map/templates/map/base_with_container.html
Normal file
@ -0,0 +1,34 @@
|
||||
{% extends "map/base.html" %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ block.super }}
|
||||
<style>
|
||||
body {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.page-lead {
|
||||
padding: 40px 15px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
{% include "map/_nav.html" %}
|
||||
{% block nav_links %}
|
||||
<li><a href="/case-studies">Case Studies</a></li>
|
||||
{% endblock %}
|
||||
|
||||
<div class="container">
|
||||
|
||||
<div class="page-lead">
|
||||
<h1>{% block title %}{% endblock %}</h1>
|
||||
<p class="lead">{% block description %}{% endblock %}</p>
|
||||
</div>
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
||||
</div><!-- /.container -->
|
||||
{% endblock %}
|
||||
30
apps/map/templates/map/base_with_jumbo.html
Normal file
30
apps/map/templates/map/base_with_jumbo.html
Normal file
@ -0,0 +1,30 @@
|
||||
{% extends "map/base.html" %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ block.super }}
|
||||
<style>
|
||||
body {
|
||||
padding-top: 50px;
|
||||
}
|
||||
.jumbo {
|
||||
height: calc(100% - 50px);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
|
||||
{% include "map/_nav.html" %}
|
||||
|
||||
<div class="jumbo">
|
||||
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
||||
</div><!-- /.container -->
|
||||
{% endblock %}
|
||||
24
apps/map/templates/map/form.html
Normal file
24
apps/map/templates/map/form.html
Normal file
@ -0,0 +1,24 @@
|
||||
{% extends "map/base_with_container.html" %}
|
||||
{% load compress %}
|
||||
{% load crispy_forms_tags %}
|
||||
{% load i18n %}
|
||||
{% load leaflet_tags %}
|
||||
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ block.super }}
|
||||
{% leaflet_css %}
|
||||
<style> html, body, #main { width: 100; height:100%; } </style>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block title %}{% trans "Submit a Case Study" %}{% endblock %}
|
||||
{% block description %}{% trans "Here you can submit a case study for review and it will be added to the map." %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
{% crispy form %}
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
{% leaflet_js %}
|
||||
{% endblock %}
|
||||
@ -1,56 +1,113 @@
|
||||
{% extends "map/base_with_jumbo.html" %}
|
||||
{% load bootstrap3 %}
|
||||
{% load compress %}
|
||||
{% load i18n %}
|
||||
{% load leaflet_tags %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>{% trans "Ojuso Platform Map" %}</title>
|
||||
<meta name="viewport" content"width=device-width, initial-scale=2">
|
||||
{% bootstrap_css %}
|
||||
{% leaflet_js %}
|
||||
{% leaflet_css %}
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100%;
|
||||
height:100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Ojuso Platform Map</h1>
|
||||
{% leaflet_map "main" callback="main_app_init" %}
|
||||
<div id="modals"></div>
|
||||
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
|
||||
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
|
||||
crossorigin="anonymous">
|
||||
</script>
|
||||
{% bootstrap_javascript %}
|
||||
<script type="text/javascript">
|
||||
function create(htmlStr) {
|
||||
var frag = document.createDocumentFragment(),
|
||||
temp = document.createElement('div');
|
||||
temp.innerHTML = htmlStr;
|
||||
while (temp.firstChild) {
|
||||
frag.appendChild(temp.firstChild);
|
||||
}
|
||||
return frag;
|
||||
}
|
||||
function main_app_init(map, options) {
|
||||
$.getJSON('/api/case-studies/', function (data) {
|
||||
L.geoJson(data, {
|
||||
onEachFeature: function (feature, layer) {
|
||||
var modalname = "case-study-"+feature.id
|
||||
layer.bindPopup(
|
||||
"<h3>"+feature.properties.project_name+"</h3>"+"<button type='button' class='btn btn-primary btn-block' data-toggle='modal' data-target='#"+modalname+"'>"+"<span class='glyphicon glyphicon-file' aria-hidden='true'></span>"+"View Details"+"</button>"
|
||||
);
|
||||
var modal = create("<div class='modal fade' id='"+modalname+"' tabindex='-1' role='dialog' aria-labelledby='"+modalname+"-label'><div class='modal-dialog' role='document'><div class='modal-content'><div class='modal-header'><button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button><h4 class='modal-title' id='"+modalname+"-label'>"+feature.properties.project_name+"</h4></div><div class='modal-body'><p>"+feature.properties.description+"</p></div><div class='modal-footer'><button type='button' class='btn btn-default' data-dismiss='modal'>Close</button><button type='button' class='btn btn-primary'>Save changes</button></div></div></div></div>");
|
||||
document.getElementById('modals').appendChild(modal);
|
||||
}
|
||||
}).addTo(map);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ block.super }}
|
||||
{% leaflet_css %}
|
||||
<style> html, body, #main { width: 100; height:100%; } </style>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block title %}{% trans "Ojuso Platform Map" %}{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
<div id="main"></div>
|
||||
<div id="modals"></div>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block scripts %}
|
||||
{% leaflet_map "main" callback="main_app_init" creatediv=False %}
|
||||
{% leaflet_js %}
|
||||
<script type="text/javascript">
|
||||
|
||||
// This takes HTML as a string and returns an element
|
||||
function create(htmlStr) {
|
||||
var frag = document.createDocumentFragment(),
|
||||
temp = document.createElement('div');
|
||||
temp.innerHTML = htmlStr;
|
||||
while (temp.firstChild) {
|
||||
frag.appendChild(temp.firstChild);
|
||||
}
|
||||
return frag;
|
||||
}
|
||||
|
||||
// This is called when the map is initialized
|
||||
function main_app_init(map, options) {
|
||||
|
||||
// Pull data as GeoJSON and add to map with a modal
|
||||
$.getJSON('/api/case-studies/', function (data) {
|
||||
L.geoJson(data, {
|
||||
onEachFeature: function (feature, layer) {
|
||||
var modalname = "case-study-"+feature.id
|
||||
layer.bindPopup(
|
||||
"<h3>"+feature.properties.project_name+"</h3>"+
|
||||
"<button type='button' class='btn btn-primary btn-block' data-toggle='modal' data-target='#"+modalname+"'>"
|
||||
+"{% trans "Quick View" %}"+"</button>"
|
||||
);
|
||||
var modal = create(
|
||||
"<div class='modal fade' id='"+modalname+"' tabindex='-1' role='dialog' aria-labelledby='"+modalname+"-label'>"+
|
||||
"<div class='modal-dialog' role='document'>"+
|
||||
"<div class='modal-content'>"+
|
||||
"<div class='modal-header'>"+
|
||||
"<button type='button' class='close' data-dismiss='modal' aria-label='{% trans "Close" %}'>"+
|
||||
"<span aria-hidden='true'>×</span>"+
|
||||
"</button>"+
|
||||
"<h4 class='modal-title' id='"+modalname+"-label'>"+
|
||||
feature.properties.project_name+
|
||||
"</h4>"+
|
||||
"</div>"+
|
||||
"<div class='modal-body'>"+
|
||||
"<p>"+feature.properties.description+"</p>"+
|
||||
"<dl class='dl-horizontal'>"+
|
||||
"<dt>Supply Chain</dt><dd>"+feature.properties.supply_chain+"</dd>"+
|
||||
"<dt>Generation Type</dt><dd>"+feature.properties.generation_type+"</dd>"+
|
||||
"<dt>Associated Companies</dt><dd>"+feature.properties.associated_companies+"</dd>"+
|
||||
"<dt>Financiers</dt><dd>"+feature.properties.financiers+"</dd>"+
|
||||
"<dt>Important Lenders</dt><dd>"+feature.properties.important_lenders+"</dd>"+
|
||||
"<dt>Country</dt><dd>"+feature.properties.country+"</dd>"+
|
||||
"<dt>Affects Indigenous</dt><dd>"+feature.properties.affects_indigenous+"</dd>"+
|
||||
"<dt>Affects Indigenous Reason</dt><dd>"+feature.properties.affects_indigenous_reason+"</dd>"+
|
||||
"<dt>Proposed Start</dt><dd>"+feature.properties.proposed_start+"</dd>"+
|
||||
"<dt>Proposed Completion</dt><dd>"+feature.properties.proposed_completion+"</dd>"+
|
||||
"<dt>Link to Forum</dt><dd>"+feature.properties.link_to_forum+"</dd>"+
|
||||
"<dt>Image</dt><dd>"+feature.properties.image+"</dd>"+
|
||||
"<dt>References</dt><dd>"+feature.properties.references+"</dd>"+
|
||||
"<dt>Commodities</dt><dd>"+feature.properties.commodities+"</dd>"+
|
||||
"<dt>Like to Engage Developer</dt><dd>"+feature.properties.like_to_engage_developer+"</dd>"+
|
||||
"<dt>Like to Engage Investors</dt><dd"+feature.properties.like_to_engage_investors+"></dd>"+
|
||||
"<dt>Author</dt><dd>"+feature.properties.author+"</dd>"+
|
||||
"</dl>"+
|
||||
"</div>"+
|
||||
"<div class='modal-footer'>"+
|
||||
"<button type='button' class='btn btn-default' data-dismiss='modal'>"+
|
||||
"{% trans "Close" %}"+
|
||||
"</button>"+
|
||||
"<button type='button' class='btn btn-primary'>"+
|
||||
"{% trans "Save changes" %}"+
|
||||
"</button>"+
|
||||
"</div>"+
|
||||
"</div>"+
|
||||
"</div>"+
|
||||
"</div>"
|
||||
);
|
||||
document.getElementById('modals').appendChild(modal);
|
||||
}
|
||||
}).addTo(map);
|
||||
});
|
||||
|
||||
// Add an on-click listener for map click events. Show popup with button to submit a casestudy
|
||||
map.on('click', function(e) {
|
||||
var popup = L.popup()
|
||||
.setLatLng(e.latlng)
|
||||
.setContent("<a class='btn btn-primary btn-sm' href='case-study/add?lat="+e.latlng.lat+"&lng="+e.latlng.lng+"' role='button'>{% trans "Submit a Case Study" %}</a>")
|
||||
.openOn(map);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user