Commit 10bd8e26 authored by okhin's avatar okhin

Improving the design

parent c93b8dc7
Pipeline #835 passed with stage
in 1 second
...@@ -114,5 +114,12 @@ class Main extends Controller { ...@@ -114,5 +114,12 @@ class Main extends Controller {
$f3->set('block_content', 'argumentation.html'); $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');
}
}; };
; ;
...@@ -6,6 +6,8 @@ GET|POST @call:/call/@id=Main->call ...@@ -6,6 +6,8 @@ GET|POST @call:/call/@id=Main->call
GET @contactslist:/contactslist=Main->contactslist GET @contactslist:/contactslist=Main->contactslist
GET @feedbacksip:/calls/@callid=SIP->feedbacksip GET @feedbacksip:/calls/@callid=SIP->feedbacksip
GET @argumentation:/argumentation=Main->argumentation GET @argumentation:/argumentation=Main->argumentation
GET @campaign:/campaign=Main->campaign
GET @piphone:/piphone=Main->campaign
; Fake REST API ; Fake REST API
GET /restapi/campaigns/@id=RestApi->campaign GET /restapi/campaigns/@id=RestApi->campaign
......
...@@ -4,3 +4,15 @@ ...@@ -4,3 +4,15 @@
max-height: 60vmax; max-height: 60vmax;
cursor: pointer; cursor: pointer;
} }
.piphone-btn {
position: absolute;
left: -23px;
}
.chip.committee {
font-size: 11px;
line-height: 22px;
height: 22px;
padding: 0 10px;
}
...@@ -67,24 +67,32 @@ function display_mep(contact) { ...@@ -67,24 +67,32 @@ function display_mep(contact) {
}, 500); }, 500);
}) })
.attr('data-json', JSON.stringify(contact)); .attr('data-json', JSON.stringify(contact));
if ( contact['photo'] === '') { var country = contact['groups'].filter(function(group) {
$('<img>').addClass('circle') return group['type'] === 'country';
.attr('src', '/static/img/placeholder.jpg') });
.appendTo(li); var group = contact['groups'].filter(function(group) {
} else { return group['type'] === 'group';
$('<img>').addClass('circle') });
.attr('src', contact.photo) var group_src = 'http://www.europarl.europa.eu/ep_framework/img/group/group_iconsmall_'
.appendTo(li); + 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') $('<span />').addClass('title')
.text(contact['full_name']) .text(contact['full_name'])
.appendTo(li); .appendTo(li);
$('<img />').attr('src', group_src)
.appendTo(li);
var groups = $('<ul />') var groups = $('<ul />')
.appendTo(li); .appendTo(li);
contact['groups'].forEach(function(group) { contact['groups'].forEach(function(group) {
$('<li />').addClass('chip') if ( group['type'] === 'committee' ) {
.text(group['name']) $('<li />').addClass('chip blue white-text')
.appendTo(groups); .text(group['name'])
.appendTo(groups);
}
}); });
return li; return li;
}; };
...@@ -95,20 +103,35 @@ function update_mep(element) { ...@@ -95,20 +103,35 @@ function update_mep(element) {
$('#contact-image').attr('src', contact['photo']); $('#contact-image').attr('src', contact['photo']);
}; };
$('#contact-full_name').html(contact['first_name'] + ' ' + contact['last_name']); $('#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']); $('#form-contact').attr('action', '/call/' + contact['id']);
$('#contact_id').attr('value', contact['id']); $('#contact_id').attr('value', contact['id']);
$('.groups').each(function() { $('.groups').each(function() {
var group_type = $(this).attr('data-name'); 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) { contact['groups'].forEach(function(group) {
if ( group['type'] === group_type ) { 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); $(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').attr('href', 'tel:' + contact['phone']);
$('#contact-phone').text(contact['phone']); $('#contact-phone').text(contact['phone']);
}; };
......
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
<div class="row"> <div class="row">
<div class="col s12 m6"> <div class="col s12 m6">
<p class="flow-text blue-grey-text text-lighten-4"> <p class="flow-text blue-grey-text text-lighten-4">
{{ @campaign.description }} {{ preg_replace('/((\w+\W*){50}(\w+))(.*)/', '${1} ...', @campaign.description) }}
</p> </p>
<a href="#navbar" class="btn waves-effect waves-light leat accent-2 right">{{ _("Act Now!") }}</a> <a href="#navbar" class="btn waves-effect waves-light leat accent-2 right">{{ _("Act Now!") }}</a>
</div> </div>
...@@ -46,8 +46,8 @@ ...@@ -46,8 +46,8 @@
<div class="container nav-wrapper"> <div class="container nav-wrapper">
<ul class="left"> <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 == '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 == '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="#">{{ _("About the piphone") }}</a></li> <li class="waves-effect <check if="{{ @block_content == 'piphone.html' }}">active</check>"><a href="/piphone#navbar">{{ _("About the piphone") }}</a></li>
</ul> </ul>
</div> </div>
</nav> </nav>
......
<div class="row"> <div class="row">
<div class="col s12 m8"> <div class="col s12 m8">
<div class="container center"> <div class="container">
<h4 class="blue-grey-text header"> <h4 class="blue-grey-text center header">
{{ _("Call a representative and make your voice heard!") }} {{ _("Call a representative and make your voice heard!") }}
</h4> </h4>
<!-- contact page --> <div class="">
<div class="col s12 offset-m3 m6"> <div class="card horizontal sticky-action">
<div class="card sticky-action">
<div class="card-image"> <div class="card-image">
<img id="contact-image" src="/static/img/placeholder.jpg"> <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>
<div class="card-content"> <div class="card-stacked">
<span class="card-title grey-text text-darken-4" id="contact-full_name"> <div class="right-align card-content">
John Doe <a class="left btn-floating piphone-btn btn-large waves-effect activator green">
</span> <i class="material-icons">phone</i>
<repeat group="{{ @group_types }}" value="{{ @group_type }}"> </a>
<ul class="groups" data-name="{{ @group_type.name }}">{{ @group_type.name }} <span class="card-title grey-text text-darken-4" id="contact-full_name">
<li class="chip"> John Doe
Group </span>
</li> <span class="chip country">FR</span>
</ul> <span class="chip group">SD</span>
</repeat> <ul class="groups" data-name="committee">
<li class="chip blue white-text committee">
Group
</li>
</ul>
</div>
</div> </div>
<div class="card-reveal"> <div class="card-reveal">
<span id="contact-full_name-2" class="card-title grey-text text-darken-4">John Doe <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> </span>
<h5>{{ _("Call for free") }}</h5> <h5>{{ _("Call for free") }}</h5>
<form id="form-contact" method="post" action=""> <form id="form-contact" method="post" action="">
...@@ -44,12 +45,7 @@ ...@@ -44,12 +45,7 @@
<input class="btn btn-default" type="submit" value="{{ _('Call me') }}" /> <input class="btn btn-default" type="submit" value="{{ _('Call me') }}" />
</form> </form>
</div> </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> </div>
<!-- contact page -->
</div> </div>
</div> </div>
</div> </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