Skip to content

GitLab

Commit 262cdec4 authored by okhin's avatar okhin
Browse files

Materializecss for the people

parent 7e792689
Expand all Show whitespace changes
Inline Side-by-side
static/css/piphone.css 0 → 100644
View file @ 262cdec4
/* 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;
}
}
static/js/jquery-2.1.1.js 0 → 100644
View file @ 262cdec4
This diff is collapsed.
static/js/jquery-3.1.1.js 0 → 100644
View file @ 262cdec4
This diff is collapsed.
templates/argumentation.html
View file @ 262cdec4
<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>
</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>
<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>
templates/base.html
View file @ 262cdec4
<include href="header.html" />
<include href="sidebar.html" />
<include href="{{ @block_content }}" />
<include href="call.html" />
<include href="footer.html" />
templates/contact.html
View file @ 262cdec4
<!-- 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">
<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 }}">
<check if="{{ @group.type!='committee' }}">
<dt>{{ @group.type }}:</dt>
<dd><a href="#">{{ @group.name }}</a></dd>
<div class="chip">
<check if="{{ @group.media }}">
<img src="{{ @group.media }}" alt="{{ @group.type }}">
</check>
</repeat>
</dl>
{{ @group.name }}
</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>
<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>
<!-- /random -->
</div>
<!-- /droite -->
</div>
<!-- /row-->
</div>
<!--/.col-sm-6--><!-- /pas image -->
</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 -->
templates/contactslist.html
View file @ 262cdec4
<!-- contacts list -->
<section id="contact_list">
<!--
TODO: Pagination des contacts
-->
<repeat group="{{ @contacts }}" value="{{ @contact }}">
<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" />
</repeat>
</section>
</div>
</repeat>
</div>
<!-- contacts list -->
</main>
templates/feedbackform.html
View file @ 262cdec4
<!-- Let's split this page in two -->
<main>
<div class="container">
<div class="row">
<div class="col-md-6">
<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">
<include href="argumentation.html">
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<h4>{{ _("Currently calling") }}</h4>
<div class="col s6">
<div class="card">
<div class="card-image">
<img src="/static/img/124786.jpg">
<span class="card-title">{{ @contact.first_name }} {{ @contact.last_name }}</span>
</div>
<div class="panel-body">
<p class="text-center">{{ @contact.first_name }} {{ @contact.last_name }}</p>
<p class="lead text-center">
<abbr title="{{ _("Phone number") }}">{{ _("Phone number") }}:</abbr> <a href="tel: {{ @contact.phone }}">{{ @contact.phone }}</a>
</p>
<dl class="dl-horizontal hidden-xs">
<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>
<ul class="list-inline">
<div class="card-content">
<p>{{ _("Phone number") }}:</abbr> <a href="tel: {{ @contact.phone }}">{{ @contact.phone }}</a></p>
<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>
<div class="chip">
<check if="{{ @group.media }}">
<img src="{{ @group.media }}" alt="{{ @group.type }}">
</check>
</repeat>
</ul>
<p id="step_init" class="step_text text-center">{{ _("Initialising the call") }}</p>
<p id="step_caller" class="step_text text-center">{{ _("Calling you") }}</p>
<p id="step_wait" class="step_text text-center">{{ _("When ready, please dial 1 on your phone") }}</p>
<p id="step_callee" class="step_text text-center">{{ _(" Calling ")}}{{ @contact.full_name }}</p>
<p id="step_connected" class="step_text text-center">{{ _("Connected to ") }}{{ @contact.full_name }}</p>
<h3 aria-hidden="true" class="step_bar lead text-center">
<span id="caller" class="step glyphicon glyphicon-earphone"></span>
<span id="step1" class="step">&#x25CF;</span>
<span id="step2" class="step">&#x25CF;</span>
<span id="step3" class="step">&#x25CF;</span>
<span id="wait" class="step glyphicon glyphicon-time"></span>
<span id="step4" class="step">&#x25CF;</span>
<span id="step5" class="step">&#x25CF;</span>
<span id="step6" class="step">&#x25CF;</span>
<span id="callee" class="step glyphicon glyphicon-earphone"></span>
</h3>
{{ @group.name }}
</div>
</repeat>
<h5 id="step_init" class="light text-lighten-2">{{ _("0. Initialising the call") }}</h3>
<h5 id="step_caller" class="light text-lighten-2">{{ _("1. Calling you") }}</h3>
<h5 id="step_wait" class="light text-lighten-2">{{ _("2. When ready, please dial 1 on your phone") }}</h3>
<h5 id="step_callee" class="light text-lighten-2">{{ _("3. Calling ")}}{{ @contact.full_name }}</h3>
<h5 id="step_connected" class="light text-lighten-2">{{ _("4. Connected to ") }}{{ @contact.full_name }}</h3>
</div>
<div class="feedback panel panel-default">
<!-- Form in order to feedback your call -->
<div class="panel-heading">
<div class="card-action">
<h4>{{ _("Feedback Form") }}</h4>
<p class="small">{{ _("Please tell us what happened if you were able to talk to someone. Your feedback is important to us.") }}</p>
</div>
<div class="panel-body">
<form class="form" method="post" action="/feedback/" >
<input type="hidden" id="contact_id" name="contact_id" value="{{ @contact_id }}" />
<repeat group="{{ @feedback_categories }}" value="{{ @feedback_category }}">
<div class="form-group">
<label><input required class="form-control" type="radio" name="feedback_category" value="{{ @feedback_category.id }}"/>{{ @feedback_category.name }}</label>
</div>
<span>
<input required type="radio" name="feedback_category" value="{{ @feedback_category.id }}" id="f{{ @feedback_category.id }}" />
<label for="f{{ @feedback_category.id }}">{{ @feedback_category.name }}</label>
</span>
</repeat>
<textarea class="form-control" id="feedback" name="feedback"></textarea>
<div class="input-field">
<textarea class="materialize-textarea" id="feedback" name="feedback"></textarea>
</div>
<input type="submit" class="btn btn-primary" name="go" value="{{ _("Send my feedback") }}" />
</form>
</div>
......@@ -89,9 +76,15 @@
var date2 = new Date(b[1]);
return date2 - date1;
})[0];
$('.step_text').removeClass('visible');
$('.step_text').removeClass('bold');
$('.step_text').removeClass('text-darken-4');
$('.step-text').addClass('light');
$('.step-text').addClass('text-lighten-2');
if (call_state[0].startsWith('Created:Init')) {
$('#step_init').addClass('visible');
$('#step_init').addClass('bold');
$('#step_init').addClass('text-darken-4');
$('#step_init').removeClass('light');
$('#step_init').removeClass('text-lighten-2');
};
if (call_state[0].startsWith('Ringing:')) {
......@@ -99,18 +92,15 @@
caller = normalize_phone(response['data']['caller']);
callee = normalize_phone(response['data']['callee']);
if ( phone === caller) {
$('#caller').addClass('outline_green');
$('#step_caller').addClass('visible');
$('#step_caller').addClass('bold');
$('#step_caller').addClass('text-darken-4');
$('#step_caller').removeClass('light');
$('#step_caller').removeClass('text-lighten-2');
} else {
$('#step1').addClass('green');
$('#step2').addClass('green');
$('#step3').addClass('green');
$('#wait').addClass('green');
$('#callee').addClass('outline_green');
$('#step4').addClass('outline_green');
$('#step5').addClass('outline_green');
$('#step6').addClass('outline_green');
$('#step_callee').addClass('visible');
$('#step_callee').addClass('bold');
$('#step_callee').addClass('text-darken-4');
$('#step_callee').removeClass('light');
$('#step_callee').removeClass('text-lighten-2');
};
};
......@@ -120,32 +110,20 @@
caller = normalize_phone(response['data']['caller']);
callee = normalize_phone(response['data']['callee']);
if ( phone === caller) {
$('#caller').addClass('green');
$('#step1').addClass('outline_green');
$('#step2').addClass('outline_green');
$('#step3').addClass('outline_green');
$('#wait').addClass('outline_green');
$('#step_wait').addClass('visible');
$('#step_wait').addClass('bold');
$('#step_wait').addClass('text-darken-4');
$('#step_wait').removeClass('light');
$('#step_wait').removeClass('text-lighten-2');
} else {
$('#callee').addClass('green');
$('#step4').addClass('green');
$('#step5').addClass('green');
$('#step6').addClass('green');
$('#step_connected').addClass('visible');
$('#step_connected').addClass('bold');
$('#step_connected').addClass('text-darken-4');
$('#step_connected').removeClass('light');
$('#step_connected').removeClass('text-lighten-2');
};
};
if (call_state[0].startsWith('Down:')) {
// The call as ended
$('#caller').addClass('red');
$('#step1').addClass('red');
$('#step2').addClass('red');
$('#step3').addClass('red');
$('#wait').addClass('red');
$('#step4').addClass('red');
$('#step5').addClass('red');
$('#step6').addClass('red');
$('#callee').addClass('red');
clearInterval(interval);
};
console.log(call_state[0]);
......@@ -165,3 +143,4 @@
interval = window.setInterval(fetch, 3000);
});
</script>
</main>
templates/footer.html
View file @ 262cdec4
<script>
$(document).ready(function() {
$('.button-collapse').sideNav();
})
</script>
</body>
</html>
templates/header.html
View file @ 262cdec4
<!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>
templates/home.html
View file @ 262cdec4
<!-- 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>
templates/sidebar.html 0 → 100644
View file @ 262cdec4
<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