...
 
Commits (1)
/* 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;
}
.collection.contact .wrapper {
overflow: auto;
overflow-x: none;
max-height: 60vmax;
cursor: pointer;
}
<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 class="container">
<h1 class="header center-on-smal-only">{{ _("Arguments") }}</h1>
<p class="light center-on-small-only">
{{ _("Those are arguments to help you during a call to a representative.") }}
</p>
<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>
......@@ -8,17 +8,8 @@
</div>
</div>
</nav>
<repeat group="{{ @contacts }}" value="{{ @contact }}">
<li class="collection-item avatar" data-json='{{ json_encode(@contact) }}'>
<img src="<check if="{{ @contact.photo == '' }}">/static/img/placeholder.jpg<false>{{ @contact.photo }}</false></check>" class="circle">
<span class="title">{{ @contact.full_name }}</span>
<ul>
<repeat group="{{ @contact.groups }}" value="{{ @group }}">
<li class="chip">{{ @group.name }}</li>
</repeat>
</ul>
</li>
</repeat>
<div class="wrapper" data-json='{{ json_encode(@contacts) }}'>
</div>
</ul>
</div>
<!-- contacts list -->
......@@ -32,33 +23,89 @@ $(document).ready(function() {
},
limit: 20,
});
var random = Math.floor((Math.random() * $('.collection-item').length));
$('.collection-item').click(function(){
update_mep($(this));
});
function update_mep(element) {
var contact = JSON.parse($(element).attr('data-json'));
if (contact['photo'] !== '') {
$('#contact-image').attr('src', contact['photo']);
};
$('#contact-full_name').html(contact['first_name'] + ' ' + contact['last_name']);
$('#form-contact').attr('action', '/call/' + contact['id']);
$('#contact_id').attr('value', contact['id']);
$('.groups').each(function() {
var group_type = $(this).attr('data-name');
var content = '<ul class="groups" data-name="' + group_type + '">' + group_type;
contact['groups'].forEach(function(group) {
if ( group['type'] === group_type ) {
content += '<li class="chip">' + group['name'] + '</li>';
}
});
content += '</ul>';
$(this).html(content);
$('#search').change(function() {
var contacts = JSON.parse(wrapper.attr('data-json'));
contacts = contacts.filter(function(contact) {
return contact['full_name'].startsWith($('#search').val());
});
$('#contact-phone').attr('href', 'tel:' + contact['phone']);
$('#contact-phone').text(contact['phone']);
};
list_meps(contacts, $('.contact .wrapper'));
});
var wrapper = $('.contact .wrapper');
var contacts = JSON.parse(wrapper.attr('data-json'));
list_meps(contacts, wrapper);
var random = Math.floor((Math.random() * $('.collection-item').length));
update_mep($('.collection-item').eq(random));
});
function list_meps(contacts, wrapper) {
contacts = contacts.sort(function(a, b) {
if (a['last_name'] < b['last_name']) {
return -1;
};
if (a['last_name'] > b['last_name']) {
return 1;
};
return 0;
});
// We need to empty the wrapper first
wrapper.empty();
contacts.forEach(function(contact) {
display_mep(contact).appendTo(wrapper);
});
};
function display_mep(contact) {
var li = $('<li />')
.addClass('collection-item avatar')
.click(function() {
update_mep($(this));
})
.attr('data-json', JSON.stringify(contact));
if ( contact['photo'] === '') {
$('<img>').addClass('circle')
.attr('src', '/static/img/placeholder.jpg')
.appendTo(li);
} else {
$('<img>').addClass('circle')
.attr('src', contact.photo)
.appendTo(li);
};
$('<span />').addClass('title')
.text(contact['full_name'])
.appendTo(li);
var groups = $('<ul />')
.appendTo(li);
contact['groups'].forEach(function(group) {
$('<li />').addClass('chip')
.text(group['name'])
.appendTo(groups);
});
return li;
};
function update_mep(element) {
var contact = JSON.parse($(element).attr('data-json'));
if (contact['photo'] !== '') {
$('#contact-image').attr('src', contact['photo']);
};
$('#contact-full_name').html(contact['first_name'] + ' ' + contact['last_name']);
$('#form-contact').attr('action', '/call/' + contact['id']);
$('#contact_id').attr('value', contact['id']);
$('.groups').each(function() {
var group_type = $(this).attr('data-name');
var content = '<ul class="groups" data-name="' + group_type + '">' + group_type;
contact['groups'].forEach(function(group) {
if ( group['type'] === group_type ) {
content += '<li class="chip">' + group['name'] + '</li>';
}
});
content += '</ul>';
$(this).html(content);
});
$('#contact-phone').attr('href', 'tel:' + contact['phone']);
$('#contact-phone').text(contact['phone']);
};
</script>
......@@ -8,6 +8,7 @@
<!-- Materialize -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="/static/css/piphone.css" media="screen,projection"/>
<!-- JS Materialize -->
<script src="/static/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/static/js/materialize.min.js"></script>
......@@ -44,9 +45,9 @@
<nav class="blue-grey darken-2" id="navbar">
<div class="container nav-wrapper">
<ul class="left">
<li class="waves-effect <check if="{{ @block_content == 'home.html' }}">active</check>"><a href="/#navbar">Act</a></li>
<li class="waves-effect"><a href="#">Campaign</a></li>
<li class="waves-effect"><a href="#">About the piphone</a></li>
<li class="waves-effect <check if="{{ @block_content == 'home.html' }}">active</check>"><a href="/#navbar"><b>{{ _("Act") }}</b></a></li>
<li class="waves-effect <check if="{{ @block_content == 'campaign.html' }}">active</check>"><a href="#">{{ _("About the campaign") }}</a></li>
<li class="waves-effect <check if="{{ @block_content == 'piphone.html' }}">active</check>"><a href="#">{{ _("About the piphone") }}</a></li>
</ul>
</div>
</nav>
......
<div class="row">
<div class="col s6 m8">
<div class="col s12 m8">
<div class="container center">
<h4 class="blue-grey-text header">
{{ _("Call a representative and make your voice heard!") }}
......
<p>{{ _("thank you! <3") }}</p>
<p><a href="/">{{ _("Call another deputy") }}</a></p>
<div class="row">
<div class="container center">
<h2 class="blue-grey-text header">
{{ _("Thank you for your call! &lt;3") }}
</h2>
<a class="btn blue-grey" href="/#navbar">{{ _("Call another representative") }}</a></p>
</div>
</div>