Commit cdca56e8 authored by okhin's avatar okhin 🚴

Merge branch 'materialize' into 'master'

Materialize

See merge request !8
parents a724e21c 78d8e163
Pipeline #827 passed with stage
in 2 seconds
......@@ -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
......
......@@ -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');
}
......
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.
![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)
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
/* 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;
}
}
@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;
}
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
<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>
<include href="header.html" />
<include href="{{ @block_content }}" />
<include href="call.html" />
<include href="footer.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 -->
<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>
This diff is collapsed.
<!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>
<!-- 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>
<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>
<div class="card-reveal">