Fixing the mep filter

static/css/piphone.css

-/* 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;
 }

templates/argumentation.html

 <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>

templates/contactslist.html

@@ -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>

templates/header.html

@@ -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>

templates/home.html

 <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!") }}

templates/thankyou.html

-<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>