Commit 2b7d6c22 authored by Mindiell's avatar Mindiell

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

parent 2469a141
This source diff could not be displayed because it is too large. You can view the blob instead.
@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