Commit 63ef1931 authored by okhin's avatar okhin
Browse files

Fixing the mep filter

parent f6eae023
Pipeline #830 passed with stage
in 1 second
/* We need some space for the sidebar */ .collection.contact .wrapper {
header, main, footer { overflow: auto;
padding-left: 300px; overflow-x: none;
} max-height: 60vmax;
cursor: pointer;
@media only screen and (max-width : 992px) {
header, main, footer {
padding-left: 0;
}
} }
<div class="row"> <div class="row">
<div class="container"> <div class="container">
<h1 class="header center-on-smal-only">{{ _("Arguments") }}</h1> <h1 class="header center-on-smal-only">{{ _("Arguments") }}</h1>
<h4 class="light center-on-small-only"> <p class="light center-on-small-only">
{{ _("Those are arguments to help you during a call to a representative.") }} {{ _("Those are arguments to help you during a call to a representative.") }}
</h4> </p>
<ul class="collapsible popout" data-collapsible="accordions"> <ul class="collapsible popout" data-collapsible="accordions">
<repeat group="{{ @arguments }}" value="{{ @argument }}" counter="{{ @key }}"> <repeat group="{{ @arguments }}" value="{{ @argument }}" counter="{{ @key }}">
<li> <li>
<div class="collapsible-header">{{ @argument.title}}</div> <div class="collapsible-header">{{ @argument.title}}</div>
<div class="collapsible-body"><span>{{ @argument.text }}</span></div> <div class="collapsible-body"><span>{{ @argument.text }}</span></div>
</li> </li>
</repeat> </repeat>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -8,17 +8,8 @@ ...@@ -8,17 +8,8 @@
</div> </div>
</div> </div>
</nav> </nav>
<repeat group="{{ @contacts }}" value="{{ @contact }}"> <div class="wrapper" data-json='{{ json_encode(@contacts) }}'>
<li class="collection-item avatar" data-json='{{ json_encode(@contact) }}'> </div>
<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>
</ul> </ul>
</div> </div>
<!-- contacts list --> <!-- contacts list -->
...@@ -32,33 +23,89 @@ $(document).ready(function() { ...@@ -32,33 +23,89 @@ $(document).ready(function() {
}, },
limit: 20, limit: 20,
}); });
var random = Math.floor((Math.random() * $('.collection-item').length));
$('.collection-item').click(function(){
update_mep($(this));
});
function update_mep(element) { $('#search').change(function() {
var contact = JSON.parse($(element).attr('data-json')); var contacts = JSON.parse(wrapper.attr('data-json'));
if (contact['photo'] !== '') { contacts = contacts.filter(function(contact) {
$('#contact-image').attr('src', contact['photo']); return contact['full_name'].startsWith($('#search').val());
};
$('#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']); list_meps(contacts, $('.contact .wrapper'));
$('#contact-phone').text(contact['phone']); });
};
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)); 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> </script>
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
<!-- Materialize --> <!-- Materialize -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <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/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="/static/css/piphone.css" media="screen,projection"/>
<!-- JS Materialize --> <!-- JS Materialize -->
<script src="/static/js/jquery-2.1.1.js"></script> <script src="/static/js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="/static/js/materialize.min.js"></script> <script type="text/javascript" src="/static/js/materialize.min.js"></script>
...@@ -44,9 +45,9 @@ ...@@ -44,9 +45,9 @@
<nav class="blue-grey darken-2" id="navbar"> <nav class="blue-grey darken-2" id="navbar">
<div class="container nav-wrapper"> <div class="container nav-wrapper">
<ul class="left"> <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 <check if="{{ @block_content == 'home.html' }}">active</check>"><a href="/#navbar"><b>{{ _("Act") }}</b></a></li>
<li class="waves-effect"><a href="#">Campaign</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"><a href="#">About the piphone</a></li> <li class="waves-effect <check if="{{ @block_content == 'piphone.html' }}">active</check>"><a href="#">{{ _("About the piphone") }}</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
......
<div class="row"> <div class="row">
<div class="col s6 m8"> <div class="col s12 m8">
<div class="container center"> <div class="container center">
<h4 class="blue-grey-text header"> <h4 class="blue-grey-text header">
{{ _("Call a representative and make your voice heard!") }} {{ _("Call a representative and make your voice heard!") }}
......
<p>{{ _("thank you! <3") }}</p> <div class="row">
<div class="container center">
<p><a href="/">{{ _("Call another deputy") }}</a></p> <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>
Supports Markdown
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