Commit 2064cc41 authored by Robin's avatar Robin

Update left side nav and hook the form with representatives filters.

parent 79feac03
......@@ -88,8 +88,7 @@ def country_flag(country):
# Enable using groups instead of countries
code = country.code if hasattr(country, 'code') else country.abbreviation
return mark_safe(
'<span class="flag-icon flag-icon-{code}"></span> {name}'.format(
name=country.name,
'<span class="flag-icon flag-icon-{code}"></span>'.format(
code=code.lower()))
......@@ -97,8 +96,8 @@ def country_flag(country):
def chamber_icon(chamber):
url = static('images/chamber-%s.png' % cssify(chamber.abbreviation))
return mark_safe(
u'<span class="chamber-icon" style="background-image: url({url})">'
u'</span> {name}'.format(name=chamber.name, url=url))
u'<span class="chamber-icon" style="background-image: url({url})">&nbsp;'
u'</span>'.format(name=chamber.name, url=url))
@register.filter
......@@ -137,8 +136,8 @@ def group_icon(group):
url = static('images/group-%s.png' % cssify('%s-%s' % (
group.chamber.abbreviation, group.abbreviation)))
return mark_safe(
u'<span class="group-icon" style="background-image: url({url})">'
u'</span> {name}'.format(url=url, name=group.abbreviation))
u'<span class="group-icon" style="background-image: url({url})">&nbsp;'
u'</span>'.format(url=url, name=group.abbreviation))
@register.filter
......
......@@ -73,7 +73,6 @@ label {
width: 100%;
height: 37px;
padding: 6px 16px;
font-size: 13px;
line-height: 1.846;
color: #666666;
background-color: transparent;
......@@ -101,7 +100,6 @@ textarea, textarea.form-control, input.form-control, input[type=text], input[typ
-webkit-appearance: none;
-webkit-box-shadow: inset 0 -1px 0 #ddd;
box-shadow: inset 0 -1px 0 #ddd;
font-size: 16px;
}
textarea:focus, textarea.form-control:focus, input.form-control:focus, input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, [type=text].form-control:focus, [type=password].form-control:focus, [type=email].form-control:focus, [type=tel].form-control:focus, [contenteditable].form-control:focus {
......@@ -124,7 +122,6 @@ select, select.form-control {
background-position: right center;
-webkit-box-shadow: inset 0 -1px 0 #ddd;
box-shadow: inset 0 -1px 0 #ddd;
font-size: 16px;
line-height: 1.5;
}
......@@ -151,7 +148,7 @@ select:focus, select.form-control:focus {
/***************************************************************
Nav
***************************************************************/
@media (min-width: 768px) {
.custom-nav .custom-plus {
margin: -1.5em 0 1.5em 0;
}
......@@ -168,12 +165,35 @@ select:focus, select.form-control:focus {
position: fixed;
overflow-y: auto;
}
.custom-nav button, .custom-nav a[role=button] {
text-align: center;
width: 100%;
margin: 1em auto;
}
}
.custom-nav button, .custom-nav a[role=button] {
text-align: center;
width: 100%;
margin: 1em auto;
}
/***************************************************************
Add a position
***************************************************************/
#btn-position {
position: fixed;
z-index: 5;
}
@media (min-width: 768px) {
#btn-position {
bottom: 2em;
right: 2em;
}
}
@media (max-width: 768px) {
#btn-position {
bottom: 1em;
right: 1em;
}
}
/***************************************************************
Index
......@@ -289,7 +309,16 @@ iframe {
.chamber-icon, .group-icon {
background-size: cover;
/* background-size: contain; */
background-position: 50%;
background-repeat: no-repeat;
position: relative;
display: inline-block;
width: 1.3333333333333333em;
line-height: 1em;
}
......
{% load i18n %}
<h1 class="text-center"><span class="glyphicon glyphicon-eye-open"></span><br/>Political memory</h1>
<p class="lead text-center">{% trans "What is Memopol ?" %}</p>
<p class="text-justify">{% trans "Political Memory is a tool designed by La Quadrature du Net to help European citizens to reach members of European Parliament (MEPs) and track their voting records on issues related to fundamental freedoms online." %}</p>
<div class="container-fluid">
<h1 class="text-center"><span class="glyphicon glyphicon-eye-open"></span><br/>{% trans "Political memory" %}</h1>
<p class="lead text-center hidden-xs">{% trans "What is Memopol ?" %}</p>
<p class="text-justify hidden-xs">{% trans "Political Memory is a tool designed by La Quadrature du Net to help European citizens to reach members of European Parliament (MEPs) and track their voting records on issues related to fundamental freedoms online." %}</p>
<div class="container-fluid hidden-xs">
<div class="row">
<div class="pull-right">
<a href="http://www.memopol.org/" target="blank" class="btn btn-default">{% trans "More on our blog" %}</a>
<a class="btn btn-default">{% trans "More on our blog" %}</a>
</div>
</div>
</div>
<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#addpposition" aria-expanded="false" aria-controls="addpposition">
Add a MEP's public position
<button class="btn btn-default hidden-print" type="button" data-toggle="modal" data-target="#addposition" aria-expanded="false" aria-controls="addposition" id="btn-position">
<span class="lead hidden-xs">
<span class="glyphicon glyphicon-user"></span>
<sup><span class="glyphicon glyphicon-comment"></span></sup>
</span>
<br class="lead hidden-xs">
Add a <span class="hidden-xs">MEP's<br></span>public position
</button>
<div class="collapse" id="addpposition">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label" for="MEPname">MEP</label>
<div class="col-sm-8">
<select class="form-control" id="MEPname">
<option>Jan Philipp ALBRECHT</option>
<option>Martina ANDERSON</option>
<option>Sergio Gaetano COFFERATI</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="date">Date</label>
<div class="col-sm-8">
<input type="date" class="form-control" id="date" placeholder="Today">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="dossier">Dossier</label>
<div class="col-sm-8">
<select class="form-control" id="dossiers">
<option>Any</option>
<option>Personal data protection: processing of data for the purposes of prevention, investigation, detection or prosecution of criminal offences or execution of criminal penalties, and free movement of data </option>
<option>ACTA </option>
<option>Personal data protection: processing and free movement of data </option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="text">Transcript</label>
<div class="col-sm-8">
<textarea class="form-control" id="text" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="source">Source link</label>
<div class="col-sm-8">
<input type="url" class="form-control" id="source" placeholder="https://">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="tags">Tags</label>
<div class="col-sm-8">
<input type="url" class="form-control" id="source" placeholder="ACTA, Net neutrality, ...">
</div>
</div>
<p class="text-center"><button type="submit" class="btn btn-primary">Add that public position &raquo;</button></p>
</form>
</div>
{% load i18n %}
<form class="form-horizontal" method="GET" action="{% url "representative-list" %}">
<form class="form-horizontal hidden-print" method="GET" action="{% url "representative-list" %}">
<div class="input-group">
<label class="sr-only" for="rechercher">{% trans "Search" %}</label>
<input type="text" class="form-control" name="search" placeholder="{% trans "Search" %}" id="rechercher">
......@@ -24,7 +23,7 @@
<select class="form-control" id="country">
<option>{% trans "All" %}</option>
{% for country in countries %}
<option value="{{ country.id }}" data-url="{% url "representative-list" group_kind="country" group=country.name %}">
<option value="{{ country.id }}" data-url="{% url "representative-list" %}?country={{ country.pk }}">
{{ country.name }}
</option>
{% endfor %}
......@@ -38,7 +37,7 @@
<select class="form-control" id="party">
<option>{% trans "All" %}</option>
{% for party in parties %}
<option value="{{ party.pk }}" data-url="{% url "representative-list" group_kind="group" group=party.name %}">
<option value="{{ party.pk }}" data-url="{% url "representative-list" %}?group={{ party.pk }}">
{{ party.name }}
</option>
{% endfor %}
......@@ -52,7 +51,7 @@
<select class="form-control" id="delegation">
<option>{% trans "All" %}</option>
{% for delegation in delegations %}
<option value="{{ delegation.pk }}" data-url="{% url "representative-list" group_kind="delegation" group=delegation.name %}">
<option value="{{ delegation.pk }}" data-url="{% url "representative-list" %}?group={{ delegation.pk }}">
{{ delegation.name }}
</option>
{% endfor %}
......@@ -66,7 +65,7 @@
<select class="form-control" id="committee">
<option>{% trans "All" %}</option>
{% for commitee in committees %}
<option value="{{ commitee.pk }}" data-url="{% url "representative-list" group_kind="commitee" group=commitee.name %}">
<option value="{{ commitee.pk }}" data-url="{% url "representative-list" %}?group={{ commitee.pk }}">
{{ commitee.name }}
</option>
{% endfor %}
......@@ -82,7 +81,7 @@
<!-- i don't know what is this list supposed to contain since we already have a 2 click to dossier detail btn -->
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#formDossiers" aria-expanded="false" aria-controls="formDossiers">
{% trans "Explore the dossiers" %}
{% trans "Explore the themes" %}
</button>
<div class="collapse" id="formDossiers">
......
......@@ -2,7 +2,7 @@
$(function() {
// redirect to the url contained in data-url of the selected <option>
$('#search-form :input').change(function(event) {
var url = $(':selected', event.target).data('url')
var url = $(':selected', event.target).data('url');
if (url) window.location.href = url;
});
});
......
<div class="modal fade" id="addposition" tabindex="-1" role="dialog" aria-labelledby="btn-position">
<div class="modal-dialog modal-lg" 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">&times;</span></button>
<h4 class="modal-title" id="myModalLabel">Add a MEP's public position</h4>
</div>
<div class="modal-body">
<p class="text-justify">Cronut pop-up gluten-free, cliche Carles chillwave salvia roof party Blue Bottle. Craft beer post-ironic photo booth whatever literally DIY lomo, shabby chic fashion axe. Cardigan meh master cleanse, McSweeney's hashtag Etsy Pinterest forage viral XOXO freegan narwhal. Pour-over Brooklyn asymmetrical flannel pork belly four loko. Crucifix tote bag you probably haven't heard of them, organic synth stumptown occupy. Seitan plaid Williamsburg selvage single-origin coffee, tattooed PBR occupy art party whatever Banksy. Tumblr kale chips food truck tofu kitsch, chambray Etsy pork belly.</p>
<form class="form-horizontal">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-2 control-label" for="MEPname">MEP</label>
<div class="col-sm-10">
<select class="form-control" id="MEPname">
<option></option>
<option>Jan Philipp ALBRECHT</option>
<option>Martina ANDERSON</option>
<option>Sergio Gaetano COFFERATI</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="date">Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="date" placeholder="Today">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="points">Points</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="points" placeholder="0">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-2 control-label" for="theme">Theme</label>
<div class="col-sm-10">
<select class="form-control" id="theme">
<option>Any</option>
<option>Personal data protection: processing of data for the purposes of prevention, investigation, detection or prosecution of criminal offences or execution of criminal penalties, and free movement of data </option>
<option>ACTA </option>
<option>Personal data protection: processing and free movement of data </option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="dossier">Dossier</label>
<div class="col-sm-10">
<select class="form-control" id="dossier">
<option>Any</option>
<option>Personal data protection: processing of data for the purposes of prevention, investigation, detection or prosecution of criminal offences or execution of criminal penalties, and free movement of data </option>
<option>ACTA </option>
<option>Personal data protection: processing and free movement of data </option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="tags">Tags</label>
<div class="col-sm-10">
<input type="url" class="form-control" id="source" placeholder="ACTA, Net neutrality, ...">
</div>
</div>
</div>
<div class="col-sm-12">
<hr/>
<div class="form-group">
<label class="col-sm-1 control-label" for="text">Transcript</label>
<div class="col-sm-11">
<textarea class="form-control" id="text" rows="5"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-1 control-label" for="source">Source link</label>
<div class="col-sm-11">
<input type="url" class="form-control" id="source" placeholder="https://">
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Add this public position</button>
</div>
</div>
</div>
</div>
......@@ -39,21 +39,23 @@
<div class="col-sm-3 custom-nav">
{% block sidebar %}
{% include '_base_intro.html' %}
<hr/>
<hr class="hidden-xs"/>
{% get_current_language as LANGUAGE_CODE %}
{% cache 3600 LANGUAGE_CODE %} {# 1 hour #}
{% include '_base_search.html' %}
{% endcache %}
<hr />
<hr class="hidden-xs"/>
<a href="{% url "representative-list" %}" class="btn btn-primary btn-block">
{% trans "Check out all MEPs" %}</a>
<a href="{% url "dossier-list" %}" class="btn btn-primary btn-block">
{% trans "Check out all Dossiers" %}</a>
{% trans "Find a mep" %}</a>
<a href="{% url "theme-list" %}" class="btn btn-primary btn-block">
{% trans "Explore the themes" %}</a>
<br />
{% include '_base_position.html' %}
{% endblock %}
</div>
{% include '_base_position.html' %}
{% include '_position_form_modal.html' %}
<div class="col-sm-9 col-sm-offset-3 {% block container-class %}{% endblock %}">
{% block content %}
<div class="text-danger">This template is empty !</div>
......
......@@ -51,23 +51,22 @@
<br/>
<div class="row">
{% for representative in object_list %}
{% for representative in object_list %}
<div class="col-xs-12 col-md-4">
<div class="thumbnail">
<a href="{{ representative.get_absolute_url }}" class="custom-thumbnail">
<a href="{{ representative.get_absolute_url }}" class="custom-thumbnail custom-invisible">
<div class="row">
<div class="col-xs-5">
<img class="img-responsive" src="{{ representative.photo }}" width="158px">
<div class="custom-thumbnail-details">
<p>
<!-- Delegation -->
{{ representative.country|country_flag }}<br>
{{ representative.country|country_flag }} {{ representative.country.name }}<br>
<!-- Group -->
{{ representative.main_mandate }}<br>
{% comment %}
<!-- ? -->
<span class="glyphicon glyphicon-briefcase "></span> {{ representative. }}
{% endcomment %}
{{ representative.main_mandate }}<br>
{% comment %}
<!-- ? -->
<span class="glyphicon glyphicon-briefcase "></span> {{ representative. }}
{% endcomment %}
</p>
</div>
</div>
......@@ -76,17 +75,20 @@
<h4 class="text-center">{{ representative.full_name }}</h4>
<p class="text-center">
{% if representative.country %}
<span class="label label-primary"><span class="glyphicon glyphicon-flag"></span></span>
<a href="{% country_url representative.country %}" title="{{ representative.country.name }}">
{{ representative.country|country_flag }}
</a>
{% endif %}
{% if representative.main_mandate %}
<span class="label label-primary"><span class="glyphicon glyphicon-paperclip"></span></span>
{% if representative.chamber %}
<a href="{% chamber_url representative.chamber %}" title="{{ representative.chamber.name }}">
{{ representative.chamber|chamber_icon }}
</a>
{% endif %}
{% comment %}
<!-- TODO: what is it ? -->
{% if representative. %}
<span class="label label-primary"><span class="glyphicon glyphicon-briefcase "></span></span>
{% if representative.main_mandate.group %}
<a href="{% group_url representative.main_mandate.group %}" title="{{ representative.main_mandate.group.name }}">
{{ representative.main_mandate.group|group_icon }}
</a>
{% endif %}
{% endcomment %}
</p>
{% comment %} ?
<p class="text-center small">
......@@ -102,6 +104,8 @@
</a>
</div>
</div>
{% empty %}
{% trans "No MEPs found !" %}
{% endfor %}
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment