Update frontend and forms
This commit is contained in:
@ -17,20 +17,20 @@
|
||||
<div class="container-fluid">
|
||||
<div class="row" style="background-color: #e3f3fd;">
|
||||
<div class="col-lg-8 border-top-0">
|
||||
<a class="btn btn-info" style="margin:15px 0;padding-left:20px;left:-10px;position:absolute;" href="{% url 'index' %}" role="button"><i class="fa fa-arrow-left" aria-hidden="true"></i> {% trans "Back to Map" %}</a>
|
||||
<button class="btn btn-info" style="margin:15px 0;padding-left:20px;left:-10px;position:absolute;" onclick="window.history.back()" role="button"><i class="fa fa-arrow-left" aria-hidden="true"></i> {% trans "Back to Map" %}</button>
|
||||
<div style="margin-top:70px;padding:0 20px;">
|
||||
<h1>{{case_study.entry_name}}</h1>
|
||||
<p>{{case_study.synopsis}}</p>
|
||||
</div>
|
||||
<div class="clearfix">
|
||||
<div style="margin-left:20px;">
|
||||
<span class="badge badge-pill bg-dark">{{case_study.get_sector_of_economy_display}}</span>
|
||||
<span class="label label-default">{{case_study.get_sector_of_economy_display}}</span>
|
||||
{% if case_study.positive_or_negative == "P" %}
|
||||
<span class="badge badge-pill bg-success">{{case_study.get_positive_or_negative_display}}</span>
|
||||
<span class="label label-success">{{case_study.get_positive_or_negative_display}}</span>
|
||||
{% elif case_study.positive_or_negative == "N"%}
|
||||
<span class="badge badge-pill bg-danger">{{case_study.get_positive_or_negative_display}}</span>
|
||||
<span class="label label-danger">{{case_study.get_positive_or_negative_display}}</span>
|
||||
{% endif %}
|
||||
<span class="badge badge-pill bg-info">{{case_study.country.name}}</span>
|
||||
<span class="label label-info">{{case_study.country.name}}</span>
|
||||
</br>
|
||||
<small class="text-muted">Created {{case_study.date_created|naturaltime}} by <i>{{case_study.author}}</i></small>
|
||||
</div>
|
||||
|
@ -34,27 +34,67 @@
|
||||
|
||||
<!-- Conditional logic for hiding and un-hiding fields. -->
|
||||
<script type="text/javascript">
|
||||
// Button classes for tab navigation
|
||||
$('.btnNext').click(function(){
|
||||
$('.nav-tabs > .active').next('li').find('a').trigger('click');
|
||||
});
|
||||
|
||||
$('.btnPrevious').click(function(){
|
||||
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
|
||||
});
|
||||
|
||||
|
||||
// Here we define the fields we need to conditionally toggle.
|
||||
// TODO: Move this knowledge out of the template
|
||||
var conditionalFields = [{
|
||||
"field": "#id_land_ownership",
|
||||
"showHide": ["#div_id_land_ownership_details"],
|
||||
"condition": "OTH"
|
||||
"condition": ["OTH"]
|
||||
},
|
||||
{
|
||||
"field": "#id_location_context",
|
||||
"showHide": ["#div_id_type_of_ecosystem"],
|
||||
"condition": ["RUR"]
|
||||
},
|
||||
{
|
||||
"field": "#id_power_technology",
|
||||
"showHide": ["#div_id_power_technology_other"],
|
||||
"condition": "OT"
|
||||
"condition": ["OT"]
|
||||
},
|
||||
{ // 2.1 - Power Generation
|
||||
"field": "#id_sector_of_economy",
|
||||
"showHide": ["#power_generation_questions"],
|
||||
"condition": ["WND","SOL","HYD"]
|
||||
},
|
||||
{
|
||||
"field": "#id_generation_technology",
|
||||
"showHide": ["#div_id_biomass_detail"],
|
||||
"condition": ["BIOG", "OTHB"]
|
||||
},
|
||||
{
|
||||
"field": "#id_generation_technology",
|
||||
"showHide": ["#div_id_generation_technology_other"],
|
||||
"condition": ["OTHR"]
|
||||
},
|
||||
{ // 2.2 - Power Grids
|
||||
"field": "#id_sector_of_economy",
|
||||
"showHide": ["#power_grids_energy_storage_questions"],
|
||||
"condition": ["PG"]
|
||||
},
|
||||
{
|
||||
"field": "#id_sector_of_economy",
|
||||
"showHide": ["#div_id_generation_technology",
|
||||
"#div_id_biomass_detail",
|
||||
"#div_id_generation_technology_other",
|
||||
"#div_id_total_generation_capacity",
|
||||
"#div_id_total_investment",
|
||||
"#div_id_technical_or_economic_details"],
|
||||
"condition": ["WND","SOL","HYD"]
|
||||
"showHide": ["#mineral_commodity_questions"],
|
||||
"condition": ["SM"]
|
||||
},
|
||||
{ // 3.1
|
||||
"field": "#id_positive_or_negative",
|
||||
"showHide": ["#positive_case_questions"],
|
||||
"condition": ["P"]
|
||||
},
|
||||
{ // 3.2
|
||||
"field": "#id_positive_or_negative",
|
||||
"showHide": ["#negative_case_questions"],
|
||||
"condition": ["N"]
|
||||
}];
|
||||
|
||||
|
||||
|
@ -35,11 +35,11 @@
|
||||
{% endblock %}
|
||||
{% block inner %}
|
||||
<div class="btn-jumbo-group">
|
||||
<a class="btn btn-jumbo bg-warning" href="{% url 'long-form' %}" role="button">
|
||||
<a class="btn btn-block btn-warning" href="{% url 'long-form' %}" role="button">
|
||||
<h2>20+ Minutes</h2>
|
||||
<p>Full Form (Preferred)</p>
|
||||
</a>
|
||||
<a class="btn btn-jumbo bg-success" href="{% url 'short-form' %}" role="button">
|
||||
<a class="btn btn-block btn-info" href="{% url 'short-form' %}" role="button">
|
||||
<h2>5-10 Minutes</h2>
|
||||
<p>Express Form</p>
|
||||
</a>
|
||||
|
@ -2,19 +2,26 @@
|
||||
{% load bootstrap3 %}
|
||||
{% load i18n %}
|
||||
{% load leaflet_tags %}
|
||||
|
||||
{% load static %}
|
||||
|
||||
{% block stylesheets %}
|
||||
{{ block.super }}
|
||||
{% leaflet_css %}
|
||||
<style> html, body, #main { width: 100; height:100%; } </style>
|
||||
<style>
|
||||
html, body, #main {
|
||||
width: 100; height:100%;
|
||||
}
|
||||
.leaflet-popup-content > a{
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block title %}{% trans "Ojuso Platform Map" %}{% endblock %}
|
||||
|
||||
|
||||
{% block content %}
|
||||
{% block inner_content %}
|
||||
<div id="main"></div>
|
||||
<div id="modals"></div>
|
||||
{% endblock %}
|
||||
@ -23,6 +30,7 @@
|
||||
{% 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 type="text/javascript">
|
||||
|
||||
// This takes HTML as a string and returns an element
|
||||
@ -38,7 +46,7 @@
|
||||
|
||||
// This is called when the map is initialized
|
||||
function main_app_init(map, options) {
|
||||
|
||||
var hash = new L.hash(map);
|
||||
// Pull data as GeoJSON and add to map with a modal
|
||||
$.getJSON('/api/case-studies/', function (data) {
|
||||
L.geoJson(data, {
|
||||
|
Reference in New Issue
Block a user