Commit 6d942342 authored by Robin's avatar Robin

Update v3 design.

parent a384f656
......@@ -57,30 +57,124 @@
FIN DE LA NAV TAB
---------------------------------------------------------->
<br/>
<div class="row">
<div class="col-sm-6 col-md-4">
<!---------------------------------------------------------
1er MANDAT
MANDAT IMPORTANT
---------------------------------------------------------->
<div class="thumbnail">
<div class="caption">
<h3 class="text-center">Committee on Civil Liberties, Justice and Home Affairs</h3>
<hr>
<p class="lead text-center">Vice-Chair since July 7, 2014</p>
</div>
</div>
<!---------------------------------------------------------
FIN DU MANDAT IMPORTANT
---------------------------------------------------------->
<!---------------------------------------------------------
MANDAT PEU IMPORTANT
---------------------------------------------------------->
<div class="thumbnail">
<div class="caption">
<h5 class="text-center">Committee on an other topic that is not so interesting</h5>
<hr>
<p class="text-center">Member since July 7, 2014</p>
</div>
</div>
<!---------------------------------------------------------
FIN DU MANDAT PEU IMPORTANT
---------------------------------------------------------->
<!---------------------------------------------------------
MANDAT TERMINÉ
---------------------------------------------------------->
<div class="thumbnail mandat-fini">
<div class="caption">
<h5 class="text-center">Committee on an other topic that is not relevant anymore</h5>
<hr>
<p class="text-center">Member from July 7, 2014 to August 16, 2015</p>
</div>
</div>
<!---------------------------------------------------------
FIN DU MANDAT TERMINÉ
---------------------------------------------------------->
</div>
<div class="col-sm-6 col-md-4">
<!---------------------------------------------------------
MANDAT IMPORTANT
---------------------------------------------------------->
<div class="thumbnail">
<div class="caption">
<h3 class="text-center">Committee on Civil Liberties, Justice and Home Affairs</h3>
<hr>
<p class="lead text-center">Vice-Chair since July 7, 2014</p>
</div>
</div>
<!---------------------------------------------------------
FIN DU MANDAT IMPORTANT
---------------------------------------------------------->
<!---------------------------------------------------------
MANDAT TERMINÉ
---------------------------------------------------------->
<div class="thumbnail mandat-fini">
<div class="caption">
<h5 class="text-center">Committee on an other topic that is not relevant anymore</h5>
<hr>
<p class="text-center">Member from July 7, 2014 to August 16, 2015</p>
</div>
</div>
<!---------------------------------------------------------
FIN DU MANDAT TERMINÉ
---------------------------------------------------------->
</div>
<div class="col-sm-6 col-md-4">
<!---------------------------------------------------------
MANDAT PEU IMPORTANT
---------------------------------------------------------->
<div class="thumbnail">
<div class="caption">
<h5 class="text-center">Committee on an other topic that is not so interesting</h5>
<hr>
<p class="text-center">Member since July 7, 2014</p>
</div>
</div>
<!---------------------------------------------------------
FIN DU MANDAT PEU IMPORTANT
---------------------------------------------------------->
<br/>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<div class="caption">
<h3 class="text-center">Committee on Civil Liberties, Justice and Home Affairs</h3>
<hr>
<p><span class="lead">Vice-Chair</span> from July 7, 2014 to Dec. 31, 9999</p>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------
FIN DU 1er MANDAT
MANDAT PEU IMPORTANT
---------------------------------------------------------->
<div class="thumbnail">
<div class="caption">
<h5 class="text-center">Committee on an other topic that is not so interesting</h5>
<hr>
<p class="text-center">Member since July 7, 2014</p>
</div>
</div>
<!---------------------------------------------------------
FIN DU MANDAT PEU IMPORTANT
---------------------------------------------------------->
<!---------------------------------------------------------
MANDAT TERMINÉ
---------------------------------------------------------->
<div class="thumbnail mandat-fini">
<div class="caption">
<h5 class="text-center">Committee on an other topic that is not relevant anymore</h5>
<hr>
<p class="text-center">Member from July 7, 2014 to August 16, 2015</p>
</div>
</div>
<!---------------------------------------------------------
FIN DU MANDAT TERMINÉ
---------------------------------------------------------->
</div>
</div>
</div>
</div>
</div>
</div>
......
File mode changed from 100755 to 100644
......@@ -47,7 +47,7 @@
FIN DE LA NAV TAB
---------------------------------------------------------->
<p class="text-center"><br><br>Select a category to display the data.</p>
</div>
</div>
......
......@@ -88,7 +88,8 @@
<th class="text-center">MEP's vote</th>
<th class="text-center">Party's vote</th>
<th class="text-center">Lqdn's recommendation</th>
<th class="text-center">Points <a data-toggle="tooltip" data-placement="top" title="Le score est une somme de points attribués suivant si le MEP vote dans notre sens (positif) ou non (négatif) multiplié par le poids (importance) de ce vote."><span class="glyphicon glyphicon-info-sign"></span></a></th>
<th class="text-center">Result</th>
<th class="text-center">Points</th>
</tr>
</thead>
......@@ -99,7 +100,8 @@
<td><span class="glyphicon glyphicon-ok text-success" title="recommendation: for"></span></td>
<td><span class="glyphicon glyphicon-ok text-success" title="recommendation: for"></span></td>
<td><span class="glyphicon glyphicon-ok" title="recommendation: for"></span></td>
<td>20</td>
<td>Accepted</td>
<td>10 <a data-toggle="tooltip" data-placement="top" title="Vote suivant notre recommendation sur un amendement."><span class="glyphicon glyphicon-info-sign"></span></a></td>
</tr>
<tr>
......@@ -107,7 +109,8 @@
<td><span class="glyphicon glyphicon-remove text-danger"></td>
<td><span class="glyphicon glyphicon-remove text-danger"></td>
<td><span class="glyphicon glyphicon-ok" title="recommendation: for"></span></td>
<td>10</td>
<td>Rejected</td>
<td>-10</td>
</tr>
<tr>
......@@ -115,7 +118,8 @@
<td><span class="glyphicon glyphicon-remove text-success"></span></td>
<td><span class="glyphicon glyphicon-ok text-danger"></span></td>
<td><span class="glyphicon glyphicon-remove" title="recommendation: against"></span></td>
<td>15</td>
<td>Accepted</td>
<td>20 <a data-toggle="tooltip" data-placement="top" title="Vote contre le groupe et suivant notre recommendation sur un amendement."><span class="glyphicon glyphicon-info-sign"></span></a></td>
</tr>
</tbody>
......
......@@ -48,304 +48,6 @@
<div class="col-sm-3 custom-nav">
<!----------------
INTRO
----------------->
<h1 class="text-center"><span class="glyphicon glyphicon-eye-open"></span><br/>Political memory</h1>
<p class="lead text-center">What is Memopol ?</p>
<p class="text-justify">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">
<div class="row">
<div class="pull-right">
<a class="btn btn-default">More on our blog</a>
</div>
</div>
</div>
<hr/>
<!----------------
SEARCH
----------------->
<form class="form-horizontal">
<div class="input-group">
<label class="sr-only" for="rechercher">Search</label>
<input type="text" class="form-control" placeholder="Search" id="rechercher">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</form>
<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#moresearch" aria-expanded="false" aria-controls="moresearch">
More search options
</button>
<div class="collapse" id="moresearch">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#formMEP" aria-expanded="false" aria-controls="formMEP">
Find a MEP
</button>
<div class="collapse" id="formMEP">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2" for="name">Name</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="name" placeholder="Leave empty for all">
</div>
</div>
<div class="form-group">
<label class="col-sm-3" for="country">Country</label>
<div class="col-sm-9">
<select class="form-control" id="country">
<option>All</option>
<option>AT . Austria </option>
<option>BE . Belgium </option>
<option>BG . Bulgaria </option>
<option>HR . Croatia </option>
<option>CY . Cyprus </option>
<option>CZ . Czech Republic </option>
<option>DK . Denmark </option>
<option>EE . Estonia </option>
<option>FI . Finland </option>
<option>FR . France </option>
<option>DE . Germany </option>
<option>GR . Greece </option>
<option>HU . Hungary </option>
<option>IE . Ireland </option>
<option>IT . Italy </option>
<option>LV . Latvia </option>
<option>LT . Lithuania </option>
<option>LU . Luxembourg </option>
<option>MT . Malta </option>
<option>NL . Netherlands </option>
<option>PL . Poland </option>
<option>PT . Portugal </option>
<option>RO . Romania </option>
<option>SK . Slovakia </option>
<option>SI . Slovenia </option>
<option>ES . Spain </option>
<option>SE . Sweden </option>
<option>GB . United Kingdom </option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3" for="party">Party</label>
<div class="col-sm-9">
<select class="form-control" id="party">
<option>All</option>
<option>GUE/NGL . Confederal Group of the European United Left - Nordic Green Left </option>
<option>ECR . European Conservatives and Reformists Group </option>
<option>EFDD . Europe of Freedom and Direct Democracy Group </option>
<option>ALDE . Group of the Alliance of Liberals and Democrats for Europe </option>
<option>EPP . Group of the European People's Party (Christian Democrats) </option>
<option>Greens/EFA . Group of the Greens/European Free Alliance </option>
<option>SD . Group of the Progressive Alliance of Socialists and Democrats in the European Parliament </option>
<option>NI . Non-attached Members </option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3" for="delegation">Delegation</label>
<div class="col-sm-9">
<select class="form-control" id="delegation">
<option>All</option>
<option>Delegation for relations with Afghanistan </option>
<option>Delegation for relations with Australia and New Zealand </option>
<option>Delegation for relations with Belarus </option>
<option>Delegation for relations with Bosnia and Herzegovina, and Kosovo </option>
<option>Delegation for relations with Canada </option>
<option>Delegation for relations with India </option>
<option>Delegation for relations with Iran </option>
<option>Delegation for relations with Iraq </option>
<option>Delegation for relations with Israel </option>
<option>Delegation for relations with Japan </option>
<option>Delegation for relations with Mercosur </option>
<option>Delegation for relations with South Africa </option>
<option>Delegation for relations with Switzerland and Norway and to the EU-Iceland Joint Parliamentary Committee and the European Economic Area (EEA) Joint Parliamentary Committee </option>
<option>Delegation for relations with the Arab Peninsula </option>
<option>Delegation for relations with the countries of Central America </option>
<option>Delegation for relations with the countries of South Asia </option>
<option>Delegation for relations with the countries of Southeast Asia and the Association of Southeast Asian Nations (ASEAN) </option>
<option>Delegation for relations with the countries of the Andean Community </option>
<option>Delegation for relations with the Federative Republic of Brazil </option>
<option>Delegation for relations with the Korean Peninsula </option>
<option>Delegation for relations with the Maghreb countries and the Arab Maghreb Union </option>
<option>Delegation for relations with the Mashreq countries </option>
<option>Delegation for relations with the NATO Parliamentary Assembly </option>
<option>Delegation for relations with the Palestinian Legislative Council </option>
<option>Delegation for relations with the Pan-African Parliament </option>
<option>Delegation for relations with the People's Republic of China </option>
<option>Delegation for relations with the United States </option>
<option>Delegation to the ACP-EU Joint Parliamentary Assembly </option>
<option>Delegation to the Cariforum — EU Parliamentary Committee </option>
<option>Delegation to the EU-Albania Stabilisation and Association Parliamentary Committee </option>
<option>Delegation to the EU-Armenia and EU-Azerbaijan Parliamentary Cooperation Committees and the EU-Georgia Parliamentary Association Committee </option>
<option>Delegation to the EU-Chile Joint Parliamentary Committee </option>
<option>Delegation to the EU-Former Yugoslav Republic of Macedonia Joint Parliamentary Committee </option>
<option>Delegation to the EU-Kazakhstan, EU-Kyrgyzstan, EU-Uzbekistan and EU-Tajikistan Parliamentary Cooperation Committees and for relations with Turkmenistan and Mongolia </option>
<option>Delegation to the EU-Mexico Joint Parliamentary Committee </option>
<option>Delegation to the EU-Moldova Parliamentary Association Committee </option>
<option>Delegation to the EU-Montenegro Stabilisation and Association Parliamentary Committee </option>
<option>Delegation to the Euro-Latin American Parliamentary Assembly </option>
<option>Delegation to the Euronest Parliamentary Assembly </option>
<option>Delegation to the EU-Russia Parliamentary Cooperation Committee </option>
<option>Delegation to the EU-Serbia Stabilisation and Association Parliamentary Committee </option>
<option>Delegation to the EU-Turkey Joint Parliamentary Committee </option>
<option>Delegation to the EU-Ukraine Parliamentary Association Committee </option>
<option>Delegation to the Parliamentary Assembly of the Union for the Mediterranean </option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-sm-3" for="committee">Committee</label>
<div class="col-sm-9">
<select class="form-control" id="committee">
<option>All</option>
<option>AGRI . Committee on Agriculture and Rural Development </option>
<option>CONT . Committee on Budgetary Control </option>
<option>BUDG . Committee on Budgets </option>
<option>LIBE . Committee on Civil Liberties, Justice and Home Affairs </option>
<option>AFCO . Committee on Constitutional Affairs </option>
<option>CULT . Committee on Culture and Education </option>
<option>DEVE . Committee on Development </option>
<option>ECON . Committee on Economic and Monetary Affairs </option>
<option>EMPL . Committee on Employment and Social Affairs </option>
<option>PECH . Committee on Fisheries </option>
<option>AFET . Committee on Foreign Affairs </option>
<option>ITRE . Committee on Industry, Research and Energy </option>
<option>INTA . Committee on International Trade </option>
<option>JURI . Committee on Legal Affairs </option>
<option>PETI . Committee on Petitions </option>
<option>REGI . Committee on Regional Development </option>
<option>ENVI . Committee on the Environment, Public Health and Food Safety </option>
<option>IMCO . Committee on the Internal Market and Consumer Protection </option>
<option>TRAN . Committee on Transport and Tourism </option>
<option>FEMM . Committee on Women's Rights and Gender Equality </option>
<option>DROI . Subcommittee on Human Rights </option>
</select>
</div>
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#formDossiers" aria-expanded="false" aria-controls="formDossiers">
Explore the dossiers
</button>
<div class="collapse" id="formDossiers">
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<select class="form-control" id="dossiers">
<option>All</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>
<button type="submit" class="btn btn-default">Search</button>
</form>
</div>
</div>
<hr>
<!----------------
NAV
----------------->
<a href="listMEP.html" class="btn btn-primary btn-block">Check out all MEPs</a>
<a href="listDossiers.html" class="btn btn-primary btn-block">Check out all Dossiers</a>
<br>
<!----------------
ADD POSITION
----------------->
<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>
<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>
</div>
......@@ -365,11 +67,23 @@
</div>
<div class="col-sm-9">
<h1 class="text-left">Jan Philipp ALBRECHT</h1>
<h1 class="text-center">
Jan Philipp ALBRECHT
<br>
<span class="glyphicon glyphicon-education small" data-toggle="tooltip" data-placement="bottom" title="Golden medal on ACTA" style="color:gold;"></span>
<span class="glyphicon glyphicon-education small" data-toggle="tooltip" data-placement="bottom" title="Silver medal on Net Neutrality" style="color:silver;"></span>
<span class="glyphicon glyphicon-thumbs-down small" data-toggle="tooltip" data-placement="bottom" title="Booh on whatever other theme we are monitoring" style="color:maroon;"></span>
</h1>
<div class="col-sm-9">
<dl class="dl-horizontal">
<dt>Score</dt><dd><span class="badge" data-toggle="tooltip" data-placement="right" title="Le score est une somme de points attribués suivant si le MEP vote dans notre sens (positif) ou non (négatif) multiplié par le poids (importance) de ce vote.">120</span>&nbsp;&nbsp;<span class="glyphicon glyphicon-upload text-success"></span></dd>
<dt>Score</dt>
<dd>
<span class="badge" >120</span>&nbsp;&nbsp;
<span class="glyphicon glyphicon-upload text-success"></span>
</dd>
<dt>Country</dt><dd><span class="glyphicon glyphicon-flag"></span> Germany</dd>
<dt>Party</dt><dd>Member of Group of the Greens/European Free Alliance</dd>
<dt>Biography</dt><dd>Born in Braunschweig the Dec. 20, 1982 (M)</dd>
......@@ -377,7 +91,14 @@
</dl>
</div>
<div class="col-sm-3 text-center">
<!--div class="col-sm-3 text-center">
<p>
There are ungoing &pi;Phone campaigns, call this MEP for free to help La Quadrature!
</p>
<a class="btn btn-large btn-default"><span class="glyphicon glyphicon-plus"></span> info</a>
</div-->
<div class="col-sm-3 text-center">
<p>
There is an ungoing &pi;Phone campaign, call this MEP for free to help La Quadrature!</p>
<div class="btn-group" role="group">
......@@ -395,7 +116,20 @@
FIN DE LA CARTE D'IDENTITÉ DU MEP
---------------------------------------------------------->
<br/>
Only display theme:
<div class="dropdown" style="display:inline-block;">
<button class="btn btn-default dropdown-toggle" type="button" id="orderby" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
All
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="orderby">
<li><a href="#">All <span class="badge pull-right">120</span></a></li>
<li><a href="#">ACTA <span class="badge pull-right">40</span></a></li>
<li><a href="#">Net Neutrality <span class="badge pull-right">20</span></a></li>
<li><a href="#">Autre bidule <span class="badge pull-right">60</span></a></li>
</ul>
</div>
<iframe seamless src="MEP-vide.html"></iframe>
......
This diff is collapsed.
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