Add hello overlay (closes #17)
This commit is contained in:
parent
15c3d3c4a2
commit
a171fb6d14
@ -32,7 +32,55 @@ html, body, #main {
|
||||
.popup-labels .label {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.hello {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
z-index: 1000;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHZpZXdCb3g9IjEwMCA1IDIwMCAyNTUiPg0KICA8cGF0aCBkPSJNMjM4IDEyN2g1M2wtMjYtMTUtMjcgMTUiIGZpbGw9InJnYmEoMjUyLCAyMTEsIDI5LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yOTQgMTIybC0yOS01MS0yOSA1MSAyOS0xNyAyOSAxNyIgZmlsbD0icmdiYSgxMDIsIDE5OCwgODcsIDAuNSkiLz4NCiAgPHBhdGggZD0iTTIyOCAxMjRsMzItNTZoLTY0bDMyIDU2IiBmaWxsPSJyZ2JhKDIyMSwgNjgsIDU4LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0xODYgNjNMMTUzIDdsLTMyIDU2aDY1bTExMSAxOTNsLTMyLTU2LTMyIDU2aDY0IiBmaWxsPSJyZ2JhKDEwMiwgMTk4LCA4NywgMC41KSIvPg0KICA8cGF0aCBkPSJNMjIzIDEyN2wtMzItNTYtMzMgNTZoNjUiIGZpbGw9InJnYmEoMjUyLCAyMTEsIDI5LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yNjAgMTkxbC0zMi01Ni0zMiA1Nmg2NCIgZmlsbD0icmdiYSgyMjEsIDY4LCA1OCwgMC41KSIvPg0KICA8cGF0aCBkPSJNMTUzIDEyNGwzMy01NmgtNjVsMzIgNTYiIGZpbGw9InJnYmEoMzcsIDE0MCwgMjEyLCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yMjggMjUzbDMyLTU2aC02NGwzMiA1NiIgZmlsbD0icmdiYSgyNTIsIDIxMSwgMjksIDAuNSkiLz4NCiAgDQogIA0KICA8cGF0aCBkPSJNMTg2IDE5MWwtMzMtNTUtMzIgNTVoNjUiIGZpbGw9InJnYmEoMzcsIDE0MCwgMjEyLCAwLjUpIi8+DQogIA0KICANCiAgPHBhdGggZD0iTTExOSAxODRsMjctNDYtMjcgMTV2MzEiIGZpbGw9InJnYmEoMTAyLCAxOTgsIDg3LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0xOTMgMTg0bDI3LTQ2LTI3IDE1djMxIiBmaWxsPSJyZ2JhKDM3LCAxNDAsIDIxMiwgMC41KSIvPg0KICA8cGF0aCBkPSJNMjE3IDEzM2gtNTlsMzAgNTF2LTM0bDI5LTE3IiBmaWxsPSJyZ2JhKDEwMiwgMTk4LCA4NywgMC41KSIvPg0KICA8cGF0aCBkPSJNMTg4IDIwNWwtMjcgNDYgMjctMTZ2LTMwIiBmaWxsPSJyZ2JhKDM3LCAxNDAsIDIxMiwgMC41KSIvPg0KICA8cGF0aCBkPSJNMTY0IDI1Nmg1OWwtMzAtNTF2MzRsLTI5IDE3IiBmaWxsPSJyZ2JhKDIyMSwgNjgsIDU4LCAwLjUpIi8+DQogIDxwYXRoIGQ9Ik0yMjUgMTJsLTI2IDQ2IDI2LTE2VjEyIiBmaWxsPSJyZ2JhKDI1MiwgMjExLCAyOSwgMC41KSIvPg0KICA8cGF0aCBkPSJNMjAxIDYzaDU5bC0yOS01MXYzNGwtMzAgMTciIGZpbGw9InJnYmEoMzcsIDE0MCwgMjEyLCAwLjUpIi8+DQo8L3N2Zz4=');
|
||||
background-position: center;
|
||||
background-blend-mode: luminosity;
|
||||
}
|
||||
|
||||
.hello--container {
|
||||
max-width: 40em;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hello--text {
|
||||
background-color: white;
|
||||
margin-top: 5em;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
z-index: 1100;
|
||||
}
|
||||
|
||||
/* Top margin on small screns should be same as the rest */
|
||||
@media (max-width: 768px) {
|
||||
.hello--text {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.hello--logo {
|
||||
width: 200px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.hello--logo, .hello--hide {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block title %}{% trans "Ojuso Platform Map" %}{% endblock %}
|
||||
@ -40,6 +88,20 @@ html, body, #main {
|
||||
{% block inner_content %}
|
||||
<div id="main"></div>
|
||||
<div id="modals"></div>
|
||||
|
||||
<div class="hello" style="display: none">
|
||||
<div class="hello--container">
|
||||
<div class="hello--text">
|
||||
<img class="hello--logo" align="center" src="{% static 'map/images/ojuso-logo-black.png' %}" alt="Ojuso">
|
||||
|
||||
<p><b>ojuso</b>’s aim is to promote best practice in the renewable energy industry, to encourage divestment from ecologically and socially destructive projects, and to foster improvements in supply chain and lifecycle management in the sector.</p>
|
||||
<p><b>ojuso</b> provides a platform for information exchange and cooperation between different sectors involved in the renewable energy economy and is supportive of ethical and ecologically sound practices. This platform consists of an online map and database of positive and negative case studies, contributed by communities affected by and leading the transition, and a series of discussion fora and features, contributed by a diversity of players.</p><p>You are welcome to submit a case study through this map tool. Following submission cases will be moderated and, if successful, placed on the map. If you need any help or have any suggestions, please post messages on <a href="//forum.ojuso.org">our forum</a>.</p>
|
||||
<p class="text-muted"><b>ojuso</b> is a project of Yansa and Gaia Foundation, with support from Swift Foundation.</p>
|
||||
<button class="hello--hide btn btn-primary">OK</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
@ -48,7 +110,7 @@ html, body, #main {
|
||||
{% block scripts %}
|
||||
{% leaflet_map "main" callback="main_app_init" creatediv=False %}
|
||||
{% leaflet_js %}
|
||||
<script type="text/javascript" src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
|
||||
<script src="{% static 'map/plugins/leaflet-hash.js' %}"></script>
|
||||
<script>
|
||||
|
||||
function getLabelClass(pos_or_neg) {
|
||||
@ -85,82 +147,21 @@ function main_app_init(map, options) {
|
||||
}).addTo(map)
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
|
||||
<script>
|
||||
function initOverlay() {
|
||||
var cookieName = '__welcomePage_seenBefore'
|
||||
if (!Cookies.get(cookieName)) {
|
||||
$('.hello').show()
|
||||
$('.hello--hide').on('click', function(evt) {
|
||||
$('.hello').hide()
|
||||
Cookies.set(cookieName, "true")
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
initOverlay()
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
<script type="text/comment">
|
||||
|
||||
// removed from <script> section above
|
||||
// This takes HTML as a string and returns an element
|
||||
function create(htmlStr) {
|
||||
var frag = document.createDocumentFragment();
|
||||
var temp = document.createElement('div');
|
||||
|
||||
temp.innerHTML = htmlStr;
|
||||
while (temp.firstChild) {
|
||||
frag.appendChild(temp.firstChild);
|
||||
}
|
||||
|
||||
return frag;
|
||||
}
|
||||
|
||||
var modalname = "case-study-" + feature.id
|
||||
|
||||
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);
|
||||
|
||||
// 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='{% url 'create' %}?lat="+e.latlng.lat+"&lng="+e.latlng.lng+"' role='button'>{% trans "Submit a Case Study" %}</a>")
|
||||
// .openOn(map);
|
||||
// });
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user