Merge branch 'materialize' into 'master'

Materialize

See merge request !8

app/Controller.php

@@ -28,6 +28,9 @@ class Controller {
         }
         // Workaround for caching variables
         $f3->set('contacts', $f3->get('contacts'));
+
+        $group_types = Api::get_group_types();
+        $f3->set('group_types', $group_types);
     }
 
     // Function called after routing

app/Main.php

@@ -14,16 +14,11 @@ class Main extends Controller {
     function home($f3,$args) {
         // Select a random contact
         //TODO: use weight for random
-        $rand_id = rand(0, count($f3->get('contacts'))-1);
         $contacts = $f3->get('contacts');
 
         $groups = Api::get_groups();
         $f3->set('groups', $groups);
 
-        $group_types = Api::get_group_types();
-        $f3->set('group_types', $group_types);
-
-        $f3->set('contact', $contacts[$rand_id]);
         $f3->set('block_content', 'home.html');
     }
 
@@ -108,7 +103,6 @@ class Main extends Controller {
     function contactslist($f3, $args) {
         $contacts = Api::get_contacts();
         $f3->set('contacts', $contacts);
-        $f3->set('random', 2);
 
         $f3->set('block_content', 'contactslist.html');
     }

static/LICENSE

+The MIT License (MIT)
+
+Copyright (c) 2014-2017 Materialize
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

static/README.md

+![alt tag](https://raw.github.com/dogfalo/materialize/master/images/materialize.gif)
+===========
+
+[![Travis CI](https://travis-ci.org/Dogfalo/materialize.svg?branch=master)](https://travis-ci.org/Dogfalo/materialize)[![devDependency Status](https://david-dm.org/Dogfalo/materialize/dev-status.svg)](https://david-dm.org/Dogfalo/materialize#info=devDependencies)[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/Dogfalo/materialize?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
+[Materialize](http://materializecss.com/), a CSS Framework based on material design
+
+### Current Version : v0.97.8
+
+## Sass Requirements:
+- Ruby Sass 3.3+, LibSass 0.6+
+
+## Supported Browsers:
+Chrome 35+, Firefox 31+, Safari 7+, IE 10+
+
+## Changelog
+- v0.97.8 (October 30th, 2016)
+  - **Refactored Modal plugin**
+  - Tabs now supported in navbar
+  - Chips data can now be reinitiailized
+  - Minor side nav fixes
+  - FAB to toolbar component added
+  - Fixed dropdown options bug
+- v0.97.7 (July 23rd, 2016)
+  - Basic horizontal cards
+  - Carousel bug fixes and new features
+  - Updated sidenav styles and new component
+  - Meteor package now supports Sass
+  - Autocomplete form component
+  - Chips jQuery plugin
+- v0.97.6 (April 1st, 2016)
+  - **Removed deprecated material icons from project**
+  - **Changed /font directory to /fonts**
+  - Datepicker and ScrollSpy now compatible with jQuery 2.2.x
+  - Responsive tables now work with empty cells
+  - Added focus states to checkboxes, switches, and radio buttons
+  - Sidenav and Modals no longer cause flicker with scrollbar
+  - Materialbox overflow and z-index issues fixed
+  - Added new option for Card actions within a Card reveal
+- v0.97.5 (December 21st, 2015)
+  - Fixed Meteor package crash
+
+
+
+## Contributing
+[Please read CONTRIBUTING.md for more information](CONTRIBUTING.md)
+
+## Testing
+We use Jasmine as our testing framework and we're trying to write a robust test suite for our components. If you want to help, [here's a starting guide on how to write tests in Jasmine](https://docs.google.com/document/d/1dVM6qGt_b_y9RRhr9X7oZfFydaJIEqB9CT7yekv-4XE/edit?usp=sharing)

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;
+    }
+}

static/css/style.css

-@media (max-width: 768px) {
-    .pasmodal p, .pasmodal div, .pasmodal span, .pasmodal hr {
-    margin: 0.1em!important;
-    padding: 0!important;
-    text-align: center;
-    }
-
-    .modal ul {
-    padding: 0.1em!important;
-    }
-}
-
-.panel {
-margin: 0.5em !important;
-padding: 0.5em !important;
-}
-
-.form-inline > * {
-margin: 0.5em!important;
-}
-
-.well {
-background: #777777;
-color: #FFFFFF;
-}
-
-h1 {
-font-size: 2em;
-}
-
-a {
-color: #000000;
-}
-
-.btn-info {
-background: #777777;
-border-color: #777777;
-}
-
-.btn-info:hover {
-background: #666666;
-border-color: #666666;
-}
-
-/* GLOBAL */
-section {
-max-width: 60em;
-margin: auto;
-padding: .5em 1em;
-}
-
-/* HEADER */
-#header {
-color: #487ED6;
-height: 80px;
-}
-
-#header img {
-height: 64px;
-float: left;
-}
-
-#header h1 {
-padding-left: 120px;
-font-weight: bold;
-font-size: 2em;
-margin: 0;
-}
-
-#header h2 {
-padding-left: 120px;
-font-weight: bold;
-font-size: 1em;
-margin: 0;
-}
-
-/* LANGUAGES */
-#languages {
-float: right;
-text-align: right;
-margin: .5em;
-}
-
-/* TOOLBAR */
-#toolbar {
-}
-
-#toolbar ul {
-margin: 0;
-padding: 0;
-}
-
-#toolbar li {
-display: inline-block;
-background-color: #ccc;
-padding: .5em 1em;
-}
-
-/* Step styling */
-.step_bar {
-    line-height: 2ex;
-    vertical-align: middle;
-    text-align: center;
-}
-
-.step {
-    color: white;
-    text-shadow: 0 2px 0 grey, 0 -2px 0 grey, 2px 0 0 grey, -2px 0 0 grey;
-    font-size: 2em;
-}
-
-#caller {
-    transform: rotate(45deg);
-}
-
-#callee {
-    transform: rotate(225deg);
-}
-
-.step.outline_green {
-    text-shadow: 0 2px 0 green, 0 -2px 0 green, 2px 0 0 green, -2px 0 0 green;
-}
-.step.outline_red {
-    text-shadow: 0 2px 0 red, 0 -2px 0 red, 2px 0 0 red, -2px 0 0 red;
-}
-
-.step.green {
-    color: green;
-    text-shadow: none;
-}
-
-.step.red {
-    color: green;
-    text-shadow: none;
-}
-
-.step_text {
-    display: none;
-}
-
-.visible {
-    display: inherit;
-}

templates/argumentation.html

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

templates/base.html

 <include href="header.html" />
 <include href="{{ @block_content }}" />
-<include href="call.html" />
 <include href="footer.html" />

templates/contact.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 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="{{ @group_types }}" value="{{ @group_type }}">
+        <ul>{{ @group_type.name }}
+        <repeat group="{{ @contact.groups }}" value="{{ @group }}">
+        <check if="{{ @group.type == @group_type.name }}">
+            <li class="chip">
+                <check if="{{ @group.media }}">
+                <img src="{{ @group.media }}" alt="{{ @group.type }}">
+                </check>
+                {{ @group.name }}
+            </li>
+        </check>
+        </repeat>
+        </ul>
+        </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>
-            <!-- /row-->
-        </div>
-        <!--/.col-sm-6--><!-- /pas image -->
-        </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>
     </div>
 </div>
 <!-- contact page -->

templates/contactslist.html

+<div class="col s12 m4">
+    <ul class="collection contact">
+        <nav class="nav-extended teal">
+            <div class="nav-wrapper">
+                <div class="input-field">
+                    <input type="search" id="search" class="autocomplete">
+                    <label class="label-icon" for="search"><i class="material-icons">search</i></label>
+                </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.last_name }} {{ @contact.full_name }}</span>
+            <ul>
+                <repeat group="{{ @contact.groups }}" value="{{ @group }}">
+                <li class="chip">{{ @group.name }}</li>
+                </repeat>
+            </ul>
+        </li>
+        </repeat>
+    </ul>
+</div>
 <!-- contacts list -->
-<section id="contact_list">
-<!--
-TODO: Pagination des contacts
--->
-<repeat group="{{ @contacts }}" value="{{ @contact }}">
-    <include href="contact.html" />
-</repeat>
-</section>
-<!-- contacts list -->
+<script>
+$(document).ready(function() {
+    $('input.autocomplete').autocomplete({
+        data: {
+            <repeat group="{{ @contacts }}" value="{{ @contact }}">
+                "{{ @contact.first_name }} {{ @contact.last_name }}": <check if="{{ @contact.photo == '' }}">null<false>{{ @contact.photo }}</false></check>,
+            </repeat>
+        },
+        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);
+        });
+        $('#contact-phone').attr('href', 'tel:' + contact['phone']);
+        $('#contact-phone').text(contact['phone']);
+    };
+    update_mep($('.collection-item').eq(random));
+});
+</script>

templates/header.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"/>
+    <!-- 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>
+    <header class="blue-grey">
+        <div class="section no-pad-bot">
+            <div class="container">
+                <div class="row center">
+                    <h1 class="header center-on-small-only blue-grey-text text-darken-3">{{ @campaign.title}}</h1>
+                </div>
+                <div class="row">
+                    <div class="col s12 m6">
+                        <p class="flow-text blue-grey-text text-lighten-4">
+                        {{ @campaign.description }}
+                        </p>
+                        <a href="#navbar" class="btn waves-effect waves-light leat accent-2 right">{{ _("Act Now!") }}</a>
+                    </div>
+                    <div class="col s12 m6">
+                        <check if="{{ @organization.logo }}">
+                        <img src="{{ @organization.logo }}">
+                        </check>
+                        <h4 class="light header blue-grey-text text-darken-2">
+                            {{ @organization.name }}
+                        </h4>
+                        <p class="flow-text blue-grey-text text-lighten-4">
+                        {{ @organization.description }}
+                        </p>
+                        <a href="{{ @organization.website }}" class="btn waves-effect waves-light blue accent-2 right">{{ _("Visit Us!") }}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <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>
+                </ul>
+            </div>
+        </nav>
+    </header>
+    <main>

templates/home.html

-<!-- content -->
-<section id="contact">
-    <include href="contact.html" />
-</section>
-<!-- /content -->
+<div class="row">
+    <div class="col s6 m8">
+        <div class="container center">
+            <h4 class="blue-grey-text 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="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>