Skip to content
GitLab
Commit 2064cc41 authored by Robin's avatar Robin
Browse files

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

parent 79feac03
Hide whitespace changes
Inline Side-by-side
memopol/templatetags/memopol_tags.py
View file @ 2064cc41
......@@ -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
......
static/css/custom.css
View file @ 2064cc41
......@@ -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;
}
......
templates/_base_intro.html
View file @ 2064cc41
{% 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>
templates/_base_position.html
View file @ 2064cc41
<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>
templates/_base_search.html
View file @ 2064cc41
{% 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">
......
templates/_base_search_form_script.html
View file @ 2064cc41
......@@ -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;
});
});
......
templates/_position_form_modal.html 0 → 100644
View file @ 2064cc41
<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>
templates/base.html
View file @ 2064cc41
......@@ -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>
......
templates/representatives/representative_grid.html
View file @ 2064cc41
......@@ -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>
......
Supports Markdown
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