Display most of §1 of the spec (#7)

This commit is contained in:
Anna Sidwell 2018-03-27 15:30:56 +11:00
parent cb21daca5b
commit b7f2be8b3e
2 changed files with 284 additions and 132 deletions

View File

@ -5,113 +5,267 @@
{% load leaflet_tags %} {% load leaflet_tags %}
{% load humanize %} {% load humanize %}
<!DOCTYPE html> {% block stylesheets %}
<html lang="en"> {{ super }}
<head>
<!-- Required meta tags --> <style>
<meta charset="utf-8"> body { font-size: 16px; }
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="bundle.js"></script> .col--header {
</head> background-color: #e3f3fd;
padding: 0 40px;
}
.btn--back { margin: 15px 0; padding-left: 20px; left: -10px; position: absolute; }
.case-mediacoverage a {
display: block;
}
.footer {
background-color: #444;
color: #ddd;
padding-top: 1em;
margin-top: 5em;
}
.linklist {
list-style-type: none;
text-align: right;
margin-left: 0;
padding-left: 0;
}
.linklist a {
color: #ddd;
text-decoration: underline;
}
.linklist a:hover {
color: #bbb;
}
.linklist-item--spacer {
margin-top: 1em;
}
dt { font-weight: bold; }
dd { margin-left: 2em; }
</style>
{% endblock %}
{% block content %} {% block content %}
<div class="container-fluid"> <div class="container">
<div class="row" style="background-color: #e3f3fd;"> <div class="row">
<div class="col-lg-8 border-top-0"> <div class="col-md-8 col-md-offset-2 col--header">
<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> <button class="btn btn-info btn--back" 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> <div style="margin-top: 70px;">
<p>{{case_study.synopsis}}</p> <h1>{{ case_study.entry_name }}</h1>
</div>
<div class="clearfix">
<div style="margin-left:20px;">
<span class="label label-default">{{case_study.get_sector_of_economy_display}}</span>
{% if case_study.positive_or_negative == "P" %}
<span class="label label-success">{{case_study.get_positive_or_negative_display}}</span>
{% elif case_study.positive_or_negative == "N"%}
<span class="label label-danger">{{case_study.get_positive_or_negative_display}}</span>
{% endif %}
<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>
<a class="btn btn-primary btn-lg float-right" href="#" role="button">Get Involved</a>
</div>
</div>
<div class="col-lg-4">
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/{{case_study.get_video_id}}?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="row" style="padding-top:30px;">
<div class="col-lg-8">
<div id="accordion" role="tablist">
<div class="card">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
{% trans "Full Description" %}
</a>
</h5>
</div> </div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion"> <div class="clearfix">
<div class="card-body"> <span class="label label-default">
{{case_study.full_description}} {{ case_study.get_sector_of_economy_display }}
</div> </span>&nbsp;
</div>
</div> {% if case_study.positive_or_negative == "P" %}
<div class="card"> <span class="label label-success">
<div class="card-header" role="tab" id="headingTwo"> {{ case_study.get_positive_or_negative_display }}
<h5 class="mb-0"> </span>&nbsp;
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> {% elif case_study.positive_or_negative == "N" %}
{% trans "Community Voices" %} <span class="label label-danger">
</a> {{ case_study.get_positive_or_negative_display }}
</h5> </span>&nbsp;
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
{{case_study.community_voices}}
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
{% trans "Factbar" %}
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
{% if case_study.area_of_land %}
<li class="list-group-item">{% trans "Approximate land area"%}: {{case_study.area_of_land}} km²</li>
{% endif %} {% endif %}
</ul>
<span class="label label-default">
{{ case_study.get_project_status_display }}
</span>&nbsp;
<span class="label label-info">
{{ case_study.country.name }}
</span>
</div>
<p class="text-muted"><small>Case study created {{case_study.date_created | naturaltime}}</small>
<p>{{ case_study.synopsis }}</p>
<figure style="text-align: center; margin-top: 20px; margin-bottom: 20px;">
<img src="{{ case_study.image.url }}" width="100%">
<figcaption>
{% if case_study.image_caption %}
{{ case_study.image_caption }}<br>
{% endif %}
{% if case_study.image_credit %}
<i>{% trans "Credit(s)" %}: {{ case_study.image_credit }}</i>
{% endif %}
</figcaption>
</figure>
</div>
</div> <!-- end row -->
<div class="row" style="padding-top:30px;">
<div class="col-md-8 col-md-offset-2">
<h2>Contents</h2>
<p>...
<h2>Description</h2>
{{ case_study.full_description | linebreaks }}
<h2>{% trans "Affected land" %}</h2>
<dl>
{% if case_study.country %}
<dt>{% trans "Country" %}:
<dd>{{ case_study.get_country_display }}
{% endif %}
{% if case_study.location_context %}
<dt>{% trans "Rural or urban" %}:
<dd>{{ case_study.get_location_context_display }}
{% endif %}
{% if case_study.area_of_land %}
<dt>{% trans "Approximate land area" %}:
<dd>{{ case_study.area_of_land }} km²
{% endif %}
{% if case_study.land_ownership %}
<dt>{% trans "Land ownership" %}:
{% if case_study.land_ownership == 'OTH' %}
<dd>{{ case_study.land_ownership_details }}
{% else %}
<dd>{{ case_study.get_land_ownership_display }}
{% endif %}
{% endif %}
{% if case_study.type_of_ecosystem %}
<dt>{% trans "Type of ecosystem" %}:
<dd>{{ case_study.get_type_of_ecosystem_display }}
{% endif %}
{% if case_study.describe_ecosystem %}
<dt>{% trans "Description of ecosystem" %}:
<dd>{{ case_study.describe_ecosystem | linebreaks }}
{% endif %}
</dl>
{% if case_study.affects_indigenous %}
<h2>{% trans "Affected groups of indigenous people" %}</h2>
{{ case_study.affects_indigenous_detail | linebreaks }}
{% endif %}
<h2>Project status</h2>
<dl>
{% if case_study.project_status %}
<dt>{% trans "Status" %}:
<dd id="project_status">{{ case_study.get_project_status_display }}
{% endif %}
{% if case_study.start_year %}
<dt>{% trans "Start year" %}:
<dd id="start_year">{{ case_study.start_year }}
{% endif %}
{% if case_study.completion_year %}
<dt>{% trans "Completion year" %}:
<dd id="completion_year">{{ case_study.completion_year }}
{% endif %}
{% if case_study.project_owners %}
<dt>{% trans "Project and facility owners" %}:
<dd id="project_owners">{{ case_study.project_owners }}
{% endif %}
{% if case_study.shareholders %}
<dt>{% trans "Shareholders of the project owners" %}:
<dd id="shareholders">{{ case_study.shareholders }}
{% endif %}
{% if case_study.financial_institutions %}
<dt>{% trans "Financial institutions" %}:
<dd id="financial_institutions">{{ case_study.financial_institutions }}
{% endif %}
{% if case_study.energy_customers %}
<dt>{% trans "Energy consumers" %}:
<dd id="energy_customers">{{ case_study.energy_customers }}
{% endif %}
</dl>
<h2>Multimedia</h2>
<figure>
<div class="embed-responsive embed-responsive-16by9">
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/{{ case_study.get_video_id }}?rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<figcaption>
{% if case_study.video_caption %}
{{ case_study.video_caption }}<br>
{% endif %}
{% if case_study.video_credit %}
<i>{% trans "Credit(s)" %}: {{ case_study.video_credit }}</i>
{% endif %}
</figcaption>
</figure>
{% if case_study.media_coverage_mainstream or case_study.media_coverage_independent or case_study.social_media_links %}
<div class="case-mediacoverage">
<h2>{% trans "Media coverage" %}</h2>
{% if case_study.media_coverage_mainstream %}
<h3>{% trans "Mainstream media" %}</h3>
{{ case_study.media_coverage_mainstream | urlize }}
{% endif %}
{% if case_study.media_coverage_independent %}
<h3>{% trans "Independent/grassroots media" %}</h3>
{{ case_study.media_coverage_independent | urlize }}
{% endif %}
{% if case_study.social_media_links %}
<h3>{% trans "Social media" %}</h3>
{{ case_study.social_media_links | urlize }}
{% endif %}
</div>
{% endif %}
<h2>{% trans "Community Voices" %}</h2>
{{ case_study.community_voices | linebreaks }}
{% if case_study.direct_comms %}
<h2>{% trans "Reports of direct communications" %}</h2>
{{ case_study.direct_comms | linebreaks }}
{% endif %}
</div> </div>
</div> </div>
<div class="card"> </div>
<div class="card-header">
Attached Files <footer class="footer">
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<a href="#">File One</a></br>
<small class="text-muted">Uploaded one month ago</small>
</li>
<li class="list-group-item">
<a href="#">File Two</a></br>
<small class="text-muted">Uploaded 3 mins ago</small>
</li>
</ul>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="container-fluid"> <div class="container-fluid">
<span class="text-muted">Ojuso x Yansa</span> <div class="row">
<div class="col-md-12">
<ul class="linklist">
<li><a href="{% url 'index' %}">Map of all projects</a>
<li><a href="/about">About us</a>
<li class="linklist-item--spacer">&copy; Ojuso 2018
</ul>
</div> </div>
</footer> </div>
</div>
</footer>
{% endblock %} {% endblock %}
</html>

View File

@ -5,19 +5,18 @@
{% load leaflet_tags %} {% load leaflet_tags %}
{% load static %} {% load static %}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <meta charset="utf-8">
<!-- Required meta tags --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans" />
<meta charset="utf-8"> <link rel="stylesheet" href="{% static 'map/bootstrap/css/bootstrap.min.css' %}" />
<title>{% block page_title %}Ojuso{% endblock %}</title> <link rel="stylesheet" href="{% static 'map/bootstrap/css/bootstrap-theme.min.css' %}" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
<link rel="stylesheet" href="{% static 'map/bootstrap/css/bootstrap.min.css' %}" />
<link rel="stylesheet" href="{% static 'map/bootstrap/css/bootstrap-theme.min.css' %}" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans" />
{# Additional Stylesheets #} <title>{% block page_title %}Ojuso{% endblock %}</title>
{% block stylesheets %} <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
{# Additional Stylesheets #}
{% block stylesheets %}
<style> <style>
.navbar-brand {padding: 5px 15px;} .navbar-brand {padding: 5px 15px;}
.navbar-brand > img {height: 40px;} .navbar-brand > img {height: 40px;}
@ -25,8 +24,8 @@
background: red; background: red;
} }
</style> </style>
{% endblock %} {% endblock %}
</head>
<body> <body>
<nav class="navbar navbar-default"> <nav class="navbar navbar-default">
<div class="container-fluid"> <div class="container-fluid">
@ -85,12 +84,11 @@
{% endif %} {% endif %}
{% block content %} {% block content %}
{% endblock %} {% endblock %}
</body>
{# CDN Javascript #} {# CDN Javascript #}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> {% block scripts %}{% endblock %}
{% block scripts %}{% endblock %}
</html> </html>
{% endspaceless %} {% endspaceless %}