ojuso-map/apps/map/templates/map/detail.html
2017-11-18 16:55:02 +00:00

118 lines
4.5 KiB
HTML

{% extends "base_with_jumbo.html" %}
{% load bootstrap3 %}
{% load compress %}
{% load i18n %}
{% load leaflet_tags %}
{% load humanize %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="bundle.js"></script>
</head>
{% block content %}
<div class="container-fluid">
<div class="row" style="background-color: #e3f3fd;">
<div class="col-lg-8 border-top-0">
<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="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 id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
{{case_study.full_description}}
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
{% trans "Community Voices" %}
</a>
</h5>
</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 %}
</ul>
</div>
</div>
<div class="card">
<div class="card-header">
Attached Files
</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">
<span class="text-muted">Ojuso x Yansa</span>
</div>
</footer>
{% endblock %}
</html>