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

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 source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
<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>
<!-- 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">
<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="card-content">
<p>{{ _("Phone number") }}:</abbr> <a href="tel: {{ @contact.phone }}">{{ @contact.phone }}</a></p>
<repeat group="{{ @contact.groups }}" value="{{ @group }}">
<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>
<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>
<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