Improving the design

app/Main.php

@@ -114,5 +114,12 @@ class Main extends Controller {
         $f3->set('block_content', 'argumentation.html');
     }
 
+    function campaign($f3, $args) {
+        $f3->set('block_content', 'campaign.html');
+    }
+
+    function piphone($f3, $args) {
+        $f3->set('block_content', 'campaign.html');
+    }
 };
 ;

app/routes.ini

@@ -6,6 +6,8 @@ GET|POST    @call:/call/@id=Main->call
 GET         @contactslist:/contactslist=Main->contactslist
 GET         @feedbacksip:/calls/@callid=SIP->feedbacksip
 GET         @argumentation:/argumentation=Main->argumentation
+GET         @campaign:/campaign=Main->campaign
+GET         @piphone:/piphone=Main->campaign
 
 ; Fake REST API
 GET         /restapi/campaigns/@id=RestApi->campaign

static/css/piphone.css

@@ -4,3 +4,15 @@
     max-height: 60vmax;
     cursor: pointer;
 }
+
+.piphone-btn {
+    position: absolute;
+    left: -23px;
+}
+
+.chip.committee {
+    font-size: 11px;
+    line-height: 22px;
+    height: 22px;
+    padding: 0 10px;
+}

templates/contactslist.html

@@ -67,24 +67,32 @@ function display_mep(contact) {
             }, 500);
         })
         .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);
-    };
+    var country = contact['groups'].filter(function(group) {
+        return group['type'] === 'country';
+    });
+    var group = contact['groups'].filter(function(group) {
+        return group['type'] === 'group';
+    });
+    var group_src = 'http://www.europarl.europa.eu/ep_framework/img/group/group_iconsmall_'
+        + group[0]['name'].toLowerCase().replace('/','') + '.png';
+    var country_src = 'http://www.europarl.europa.eu/ep_framework/img/flag/flag_icon_'
+        + country[0]['name'].toLowerCase().replace('/','') + '.gif';
+    $('<img />').addClass('circle')
+        .attr('src', country_src)
+        .appendTo(li)
     $('<span />').addClass('title')
         .text(contact['full_name'])
         .appendTo(li);
+    $('<img />').attr('src', group_src)
+        .appendTo(li);
     var groups = $('<ul />')
         .appendTo(li);
     contact['groups'].forEach(function(group) {
-        $('<li />').addClass('chip')
-            .text(group['name'])
-            .appendTo(groups);
+        if ( group['type'] === 'committee' ) {
+            $('<li />').addClass('chip blue white-text')
+                .text(group['name'])
+                .appendTo(groups);
+        }
     });
     return li;
 };
@@ -95,20 +103,35 @@ function update_mep(element) {
         $('#contact-image').attr('src', contact['photo']);
     };
     $('#contact-full_name').html(contact['first_name'] + ' ' + contact['last_name']);
-    $('#contact-full_name-2').html(contact['first_name'] + ' ' + contact['last_name']);
+    $('#contact-full_name-2').html(contact['first_name'] + ' ' + contact['last_name']
+            + '<i class="material-icons right">close</i>');
     $('#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;
+        var content = ''
         contact['groups'].forEach(function(group) {
             if ( group['type'] === group_type ) {
-                content += '<li class="chip">' + group['name'] + '</li>';
+                content += '<li class="chip blue white-text committee">' + group['name'] + '</li>';
             }
         });
-        content += '</ul>';
         $(this).html(content);
     });
+    var country = contact['groups'].filter(function(group) {
+        return group['type'] === 'country';
+    });
+    var group = contact['groups'].filter(function(group) {
+        return group['type'] === 'group';
+    });
+
+    var group_src = 'http://www.europarl.europa.eu/ep_framework/img/group/group_iconsmall_'
+        + group[0]['name'].toLowerCase().replace('/','') + '.png';
+    var country_src = 'http://www.europarl.europa.eu/ep_framework/img/flag/flag_icon_'
+        + country[0]['name'].toLowerCase() .replace('/','')+ '.gif';
+    $('.card-content .group').text(group[0]['name'])
+        .append($('<img>').attr('src', group_src));
+    $('.card-content .country').text(country[0]['name'])
+        .append($('<img>').attr('src', country_src));
     $('#contact-phone').attr('href', 'tel:' + contact['phone']);
     $('#contact-phone').text(contact['phone']);
 };

templates/header.html

@@ -23,7 +23,7 @@
                 <div class="row">
                     <div class="col s12 m6">
                         <p class="flow-text blue-grey-text text-lighten-4">
-                        {{ @campaign.description }}
+                        {{ preg_replace('/((\w+\W*){50}(\w+))(.*)/', '${1} ...', @campaign.description) }}
                         </p>
                         <a href="#navbar" class="btn waves-effect waves-light leat accent-2 right">{{ _("Act Now!") }}</a>
                     </div>
@@ -46,8 +46,8 @@
             <div class="container nav-wrapper">
                 <ul class="left">
                     <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>
+                    <li class="waves-effect <check if="{{ @block_content == 'campaign.html' }}">active</check>"><a href="/campaign#navbar">{{ _("About the campaign") }}</a></li>
+                    <li class="waves-effect <check if="{{ @block_content == 'piphone.html' }}">active</check>"><a href="/piphone#navbar">{{ _("About the piphone") }}</a></li>
                 </ul>
             </div>
         </nav>

templates/home.html

 <div class="row">
     <div class="col s12 m8">
-        <div class="container center">
-            <h4 class="blue-grey-text header">
+        <div class="container">
+            <h4 class="blue-grey-text center header">
                 {{ _("Call a representative and make your voice heard!") }}
             </h4>
-            <!-- contact page -->
-            <div class="col s12 offset-m3 m6">
-                <div class="card sticky-action">
+            <div class="">
+                <div class="card horizontal sticky-action">
                     <div class="card-image">
                         <img id="contact-image" src="/static/img/placeholder.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" id="contact-full_name">
-                            John Doe
-                        </span>
-                        <repeat group="{{ @group_types }}" value="{{ @group_type }}">
-                        <ul class="groups" data-name="{{ @group_type.name }}">{{ @group_type.name }}
-                            <li class="chip">
-                                Group
-                            </li>
-                        </ul>
-                        </repeat>
+                    <div class="card-stacked">
+                        <div class="right-align card-content">
+                            <a class="left btn-floating piphone-btn btn-large waves-effect activator green">
+                                <i class="material-icons">phone</i>
+                            </a>
+                            <span class="card-title grey-text text-darken-4" id="contact-full_name">
+                                John Doe
+                            </span>
+                            <span class="chip country">FR</span>
+                            <span class="chip group">SD</span>
+                            <ul class="groups" data-name="committee">
+                                <li class="chip blue white-text committee">
+                                    Group
+                                </li>
+                            </ul>
+                        </div>
                     </div>
                     <div class="card-reveal">
                         <span id="contact-full_name-2" class="card-title grey-text text-darken-4">John Doe
-                            <i class="material-icons right">close</i>
+                            <i class="material-icons">close</i>
                         </span>
                         <h5>{{ _("Call for free") }}</h5>
                         <form id="form-contact" method="post" action="">
@@ -44,12 +45,7 @@
                             <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" id="contact-phone" href="tel:" target="_blank">+33987654321</a>
-                    </div>
                 </div>
-                <!-- contact page -->
             </div>
         </div>
     </div>