Mise en place d'un premier design sur la fiche contact

static/css/style.css

+@media (max-width: 768px) {
+    .pasmodal p, .pasmodal div, .pasmodal span, .pasmodal hr {
+    margin: 0.1em!important;
+    padding: 0!important;
+    text-align: center;
+    }
+
+    .modal ul {
+    padding: 0.1em!important;
+    }
+}
+
+.panel {
+margin: 0.5em !important;
+padding: 0.5em !important;
+}
+
+.form-inline > * {
+margin: 0.5em!important;
+}
+
+.well {
+background: #777777;
+color: #FFFFFF;
+}
+
+h1 {
+font-size: 2em;
+}
+
+a {
+color: #000000;
+}
+
+.btn-info {
+background: #777777;
+border-color: #777777;
+}
+
+.btn-info:hover {
+background: #666666;
+border-color: #666666;
+}
+

templates/contact.html

 <!-- contact page -->
-<h3>{{ _("Random MEP") }}</h3>
-<p class="left"><img src="http://www.europarl.europa.eu/mepphoto/{{ @contact.id }}.jpg" alt="mep"></p>
-<p id="name">{{ @contact.first_name }} {{ @contact.last_name }}</p>
-<ul id="resume">
-    <li id="phone">{{ _("Phone number:") }}<a href="tel:{{ @contact.phone }} ">{{ @contact.phone }}</a></li>
-    <repeat group="{{ @contact.groups }}" value="{{ @group }}">
-        <check if="{{ @group.type!='Committee' }}">
-        <li id="group"><span>{{ @group.type }}:</span><a href="https://memopol.lqdn.fr/europe/parliament/group/{{ @group.name }}">{{ @group.name }}</a> </li>
-        </check>
-    </repeat>
-</ul>
-<ul id="committee">
-    <repeat group="{{ @contact.groups }}" value="{{ @group }}">
-        <check if="{{ @group.type=='Committee' }}">
-    <li title="Committee"><a href="https://memopol.lqdn.fr/europe/parliament/committee/{{ @group.name }}/">{{ @group.name }}</a></li>
-        </check>
-    </repeat>
-</ul>
-<p id="info"><a href="https://memopol.lqdn.fr/europe/parliament/deputy/AmeliaAndersdotter/">{{ _("Get more info…") }}</a></p>
+<div class="container-fluid panel panel-default pasmodal">
+    <div class="row">
+        <div class="col-sm-12">
+        <!-- image à gauche -->    
+        <div class="col-md-2 col-sm-4 hidden-xs">
+            <img class= "img-responsive img-circle" src="http://www.europarl.europa.eu/mepphoto/0.jpg" width="140px" alt="mep">
+                <!-- infos -->
+                <div class="visible-sm-block">
+                    <address style="margin-top:1em;">
+                        <strong>{{ _("Informations") }}</strong><br>
+                    </address>
+                </div>
+                <!-- /infos -->
+        </div>
+        <!-- /image à gauche -->
 
-<p><a href="/call/{{ @contact.id }}">{{ _("Call") }}</a></p>
+        <!-- pas image -->
+        <div class="col-md-10 col-sm-8">
+            <div class="row">
+                <!-- gauche -->
+                <div class="col-md-8">
+                <!-- titre -->
+                <div>
+                    <h1 class="text-center" id="name">{{ @contact.first_name }} <br class="visible-xs-block">{{ @contact.last_name }}</h2>
+                    <!-- actions -->
+                    <div class="text-center row">
+                        <p class="lead text-center">
+                            <abbr title="{{ _("Phone number") }}">{{ _("Phone number") }}:</abbr> <a href="tel: {{ @contact.phone }}">{{ @contact.phone }}</a>
+                            <br class="visible-xs-block">
+
+                            <button type="button" class="btn btn-default" title="{{ _("Call now") }}" data-toggle="modal" data-target="#CallModal"><span class="glyphicon glyphicon-earphone"></span></button>
+                            <a type="button" class="btn btn-info" title="{{ _("Get more info...") }}" href="https://memopol.lqdn.fr/europe/parliament/deputy/AmeliaAndersdotter/"><span class="glyphicon glyphicon-info-sign"></span></a>
+                            <a type="button" class="btn btn-default visible-xs-inline-block" title="{{ _("Choose someone else") }}" href="#"><span class="glyphicon glyphicon-refresh"></span></a>
+                        </p>
+                    </div>
+                    <!-- /actions -->
+                </div>
+                <!-- /titre -->
+
+                <!-- groupes -->
+                <div>
+                    <dl class="dl-horizontal hidden-xs" id="resume">
+                    <repeat group="{{ @contact.groups }}" value="{{ @group }}">
+                    <check if="{{ @group.type!='Committee' }}">
+                        <dt>{{ @group.type }}:</dt>
+                        <dd><a href="https://memopol.lqdn.fr/europe/parliament/group/{{ @group.name }}/">{{ @group.name }}</a></dd>
+                    </check>
+                    </repeat>
+                    </dl>
+                </div>
+                <!-- /groupes -->
+
+                <!-- committees -->
+                <div>
+                    <ul class="list-inline" id="committee">
+                    <repeat group="{{ @contact.groups }}" value="{{ @group }}">
+                    <check if="{{ @group.type=='Committee' }}">
+                            <li><abbr title="{{ @group.name }}" class="initialism"><ahref="https://memopol.lqdn.fr/europe/parliament/committee/{{ @group.name }}/"><div class="well well-sm">{{ @group.name }}</div></a></abbr></li>
+                    </check>
+                    </repeat>
+                    </ul>
+                </div>
+                <!-- /committees -->
+                </div>
+                <!-- /-- gauche -->
+
+                <!-- droite -->
+                <div class="col-md-4">
+                <!-- infos -->
+                <div class="hidden-xs hidden-sm text-right">
+                    <address style="margin-top:1em;">
+                        <strong>{{ _("Informations") }}</strong><br>
+                    </address>
+                </div>
+                <!-- /infos -->
+
+                <hr class="hidden-xs">
+
+                <!-- random -->
+                <div class="text-center">
+                    <form class="form-inline" role="form">
+                        <div class="form-group hidden-xs">
+                            <label class="" for="country">Pays : </label>
+                            <select class="form-control" name="country" id="country" onchange="$('#selcountry').submit()"><option value="">-- Toute l'Europe -- </select>
+                        </div><!-- /form-group -->
+                        <button type="submit" class="btn btn-default hidden-xs" title="Choisir un autre député"><span class="glyphicon glyphicon-refresh"></span></button>
+                    </form>
+                </div>
+                <!-- /random -->
+            </div>
+            <!-- /droite -->
+        
+            </div>
+            <!-- /row-->
+        </div>
+        <!--/.col-sm-6--><!-- /pas image -->
+        </div>
+    </div>
+</div>
 <!-- contact page -->

templates/footer.html

+    <!-- jQuery -->
+    <script src="/static/js/jquery-2.1.0.min.js"></script>
+    <!-- Bootstrap -->
+    <script src="/static/js/bootstrap.min.js"></script>
 </body>
 </html>

templates/header.html

@@ -5,6 +5,10 @@
     <meta charset="utf-8" />
     <meta name="author" content="La Quadrature du Net" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <!-- Bootstrap -->
+    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Global -->
+    <link href="/static/css/style.css" rel="stylesheet">
 </head>
 <body>
 <section>