Skip to content

GitLab

piphone-front
piphone-front
Commit 792d54b4 authored by okhin's avatar okhin
Browse files
Options

Fixing the home page

parent 262cdec4
Hide whitespace changes
Inline Side-by-side
Showing with 166 additions and 45 deletions
app/Main.php
View file @ 792d54b4
......@@ -14,7 +14,6 @@ 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();
......@@ -23,7 +22,6 @@ class Main extends Controller {
$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 +106,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');
}
......
templates/base.html
View file @ 792d54b4
<include href="header.html" />
<include href="sidebar.html" />
<include href="{{ @block_content }}" />
<include href="footer.html" />
templates/contact.html
View file @ 792d54b4
......@@ -8,13 +8,19 @@
<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 }}">
<div class="chip">
<check if="{{ @group.media }}">
<img src="{{ @group.media }}" alt="{{ @group.type }}">
</check>
{{ @group.name }}
</div>
<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">
......@@ -26,7 +32,7 @@
<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">>
<div class="input-field col s12">
<label for="phone">{{_("Your phone number:") }}</label>
<input type="text" name="phone" id="phone" />
</div>
......@@ -39,7 +45,6 @@
<div class="card-action">
<a type="button" href="#">{{ _("More info") }}</a>
<a type="button" href="tel:{{ @contact.phone }}" target="_blank">{{ @contact.phone }}</a>
<a type="button" href="#">{{ _("Another random MEP") }}</a>
</div>
</div>
<!-- contact page -->
templates/contactslist.html
View file @ 792d54b4
<main>
<div class="row">
<div class="section indigo">
<div class="container">
<h1 class="header white-text center-on-small-only">{{ @campaign.title }}</h1>
<h4 class="light indigo-text text-accent-1 center-on-small-only">{{ @campaign.description }}</h4>
<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>
</div>
</div>
<div class="row">
</nav>
<repeat group="{{ @contacts }}" value="{{ @contact }}">
<div class="col s6 m4">
<include href="contact.html" />
</div>
<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>
</div>
</ul>
</div>
<!-- contacts list -->
</main>
<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/footer.html
View file @ 792d54b4
<script>
$(document).ready(function() {
$('.button-collapse').sideNav();
})
</script>
</body>
</html>
templates/header.html
View file @ 792d54b4
......@@ -9,10 +9,47 @@
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="/static/css/bootstrap.min.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection"/>
<!-- piphone specific CSS -->
<link type="text/css" rel="stylesheet" href="/static/css/piphone.css">
<!-- 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>
<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
View file @ 792d54b4
<main>
<div class="row">
<div class="section indigo">
<div class="container">
<h1 class="header white-text center-on-small-only">{{ @campaign.title }}</h1>
<h4 class="light indigo-text text-accent-1 center-on-small-only">{{ @campaign.description }}</h4>
<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">
<span id="contact-full_name-2" class="card-title grey-text text-darken-4">John Doe
<i class="material-icons right">close</i>
</span>
<h5>{{ _("Call for free") }}</h5>
<form id="form-contact" method="post" action="">
<input type="text" id="contact_id" name="contact_id" hidden="hidden" value="">
<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>
<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" id="contact-phone" href="tel:" target="_blank">+33987654321</a>
</div>
</div>
<!-- contact page -->
</div>
</div>
</div>
<div class="row">
<div class="col s6 m4 offset-m4">
<include href="contact.html">
</div>
</div>
</main>
<include href="contactslist.html">
</div>
Markdown is supported
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