Commit 2b7d6c22 authored by Mindiell's avatar Mindiell

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

parent 2469a141
This diff is collapsed.
@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;
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
<!-- 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 -->
<!-- jQuery -->
<script src="/static/js/jquery-2.1.0.min.js"></script>
<!-- Bootstrap -->
<script src="/static/js/bootstrap.min.js"></script>
</body>
</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>
......
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