Commit 262cdec4 authored by okhin's avatar okhin 🚴

Materializecss for the people

parent 7e792689
/* We need some space for the sidebar */
header, main, footer {
padding-left: 300px;
}
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
}
This diff is collapsed.
This diff is collapsed.
<div class="panel-group" id="arguments" role="tablist" aria-multiselectable="true">
<repeat group="{{ @arguments }}" value="{{ @argument }}" counter="{{ @key }}">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="args_h{{ @key }}">
<h4 class="panel-title">
<a role="button" class="collapsed" data-toggle="collapse" data-parent="#arguments" href="#args_c{{ @key }}" aria-expanded="false" aria-controls="args_c{{ @key }}">
{{ @argument.title }}
</a>
<div class="row">
<div class="container">
<h1 class="header center-on-smal-only">{{ _("Arguments") }}</h1>
<h4 class="light center-on-small-only">
{{ _("Those are arguments to help you during a call to a representative.") }}
</h4>
<ul class="collapsible popout" data-collapsible="accordions">
<repeat group="{{ @arguments }}" value="{{ @argument }}" counter="{{ @key }}">
<li>
<div class="collapsible-header">{{ @argument.title}}</div>
<div class="collapsible-body"><span>{{ @argument.text }}</span></div>
</li>
</repeat>
</ul>
</div>
<div id="args_c{{ @key }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="args_h{{ @key }}">
<div class="panel-body">
{{ @argument.text }}
</div>
</div>
</div>
</repeat>
</div>
<include href="header.html" />
<include href="sidebar.html" />
<include href="{{ @block_content }}" />
<include href="call.html" />
<include href="footer.html" />
<!-- contact page -->
<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="{{ @contact.photo }}t commit " width="140px" alt="">
<!-- infos -->
<div class="visible-sm-block">
<address style="margin-top:1em;">
<strong>{{ _("Informations") }}</strong><br>
</address>
</div>
<!-- /infos -->
</div>
<!-- /image à gauche -->
<!-- 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 }}</h1>
<!-- 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">
<a 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="#"><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="#">{{ @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">
<!-- Testing with only one contact now
<div class="form-group hidden-xs">
<repeat group="{{ @group_types }}" value="{{ @group_type }}">
<label class="" for="{{ @group_type.name }}">{{ @group_type.name }}</label>
<select class="form-control" name="{{ @group_type.name }}">
<option value="" selected>----</option>
<repeat group="{{ @groups }}" value="{{ @group }}">
<check if="{{ @group.type == @group_type.name }}">
<option value="{{ @group.id }}">{{ @group.name }}</option>
</check>
</repeat>
</select>
</repeat> -->
</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 class="card sticky-action">
<div class="card-image">
<img src="/static/img/124786.jpg">
<a class="btn-floating btn-large halfway-fab waves-effect activator green"><i class="material-icons">phone</i></a>
</div>
<div class="card-content">
<span class="card-title grey-text text-darken-4">
{{ @contact.first_name }} {{ @contact.last_name }}
</span>
<repeat group="{{ @contact.groups }}" value="{{ @group }}">
<div class="chip">
<check if="{{ @group.media }}">
<img src="{{ @group.media }}" alt="{{ @group.type }}">
</check>
{{ @group.name }}
</div>
</repeat>
</div>
<div class="card-reveal">
<span class="card-title grey-text text-darken-4">{{ @contact.first_name }} {{ @contact.last_name }}
<i class="material-icons right">close</i>
</span>
<h5>{{ _("Call for free") }}</h5>
<form method="post" action="/call/{{ @contact.id }}">
<input type="text" id="contact_id" name="contact_id" hidden="hidden" value="{{ @contact.id }}">
<p>{{ _("If you want to call for free, you must provide us with your phone number
(the PiPhone will call that number to initiate the communication).") }}</p>
<div class="input-field col s12">>
<label for="phone">{{_("Your phone number:") }}</label>
<input type="text" name="phone" id="phone" />
</div>
<p>
{{ _('Starting with your <a href="https://en.wikipedia.org/wiki/List_of_country_calling_codes#Zones_3-4:_Europe">country code</a>, without the initial 0') }}
</p>
<input class="btn btn-default" type="submit" value="{{ _('Call me') }}" />
</form>
</div>
<div class="card-action">
<a type="button" href="#">{{ _("More info") }}</a>
<a type="button" href="tel:{{ @contact.phone }}" target="_blank">{{ @contact.phone }}</a>
<a type="button" href="#">{{ _("Another random MEP") }}</a>
</div>
</div>
<!-- contact page -->
<main>
<div class="row">
<div class="section indigo">
<div class="container">
<h1 class="header white-text center-on-small-only">{{ @campaign.title }}</h1>
<h4 class="light indigo-text text-accent-1 center-on-small-only">{{ @campaign.description }}</h4>
</div>
</div>
</div>
<div class="row">
<repeat group="{{ @contacts }}" value="{{ @contact }}">
<div class="col s6 m4">
<include href="contact.html" />
</div>
</repeat>
</div>
<!-- contacts list -->
<section id="contact_list">
<!--
TODO: Pagination des contacts
-->
<repeat group="{{ @contacts }}" value="{{ @contact }}">
<include href="contact.html" />
</repeat>
</section>
<!-- contacts list -->
</main>
This diff is collapsed.
<script>
$(document).ready(function() {
$('.button-collapse').sideNav();
})
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title></title>
<title>{{ @organization.name }} - {{ @campaign.title }}</title>
<meta charset="utf-8" />
<meta name="author" content="La Quadrature du Net" />
<meta name="author" content="{{ @organization.name }}" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Bootstrap -->
<!-- Materialize -->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<!-- Global -->
<link href="/static/css/style.css" rel="stylesheet">
<!-- JS Bootstrap -->
<script src="/static/js/jquery-2.1.0.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection"/>
<!-- piphone specific CSS -->
<link type="text/css" rel="stylesheet" href="/static/css/piphone.css">
<!-- JS Materialize -->
<script src="/static/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/static/js/materialize.min.js"></script>
</head>
<body>
<div class="container" id="header">
<img src="/static/img/piphone.png" />
<h1>{{ _("PiPhone") }}</h1>
<h2>{{ _("Call Contact for free - and make yourself heard") }}</h2>
</div>
<!--
No translation yet
<section id="languages">
<repeat group="{{ @languages }}" value="{{ @language }}">
[<a href="/lang/{{ @language.iso }}">{{ @language.name }}</a>]
</repeat>
</section>
-->
<include href="toolbar.html" />
<div class="container">
<h3>{{ @campaign.title }}</h3>
<p>{{ @campaign.description }}</p>
</div>
<div class="container">
<h3><span class="lead">{{ _("This campaign is ran by") }}</span>
<check if="{{@organization.website}}">
<a href="{{@organization.website}}"> {{ @organization.name }}</a>
<false>
{{ @organization.name }}
</false>
</check></h3>
<p>{{ @organization.description }}</p>
</div>
<!-- content -->
<section id="contact">
<include href="contact.html" />
</section>
<!-- /content -->
<main>
<div class="row">
<div class="section indigo">
<div class="container">
<h1 class="header white-text center-on-small-only">{{ @campaign.title }}</h1>
<h4 class="light indigo-text text-accent-1 center-on-small-only">{{ @campaign.description }}</h4>
</div>
</div>
</div>
<div class="row">
<div class="col s6 m4 offset-m4">
<include href="contact.html">
</div>
</div>
</main>
<header>
<div class="container">
<a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only">
<i class="material-icons">menu</i>
</a>
</div>
<ul id="nav-mobile" class="side-nav fixed">
<li class="logo">
<check if="{{ @organization.logo }}">
<a class="brand-logo" href="{{ @organization.website }}">
<img alt="" src="{{ @organization.logo }}">
</a>
<false>
<h4 class="header center-align">{{ @organization.name}}</h4>
</false>
</check>
</li>
<li><a class="waves-effect" href="/">{{ _("Home") }}</a></li>
<li><a class="waves-effect" href="/contactslist">{{ _("Choose a representative to call") }}</a></li>
<li><a class="waves-effect" href="/argumentation">{{ _("Arguments") }}</a></li>
</ul>
</header>
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