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 {
$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
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
......
......@@ -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;
}
......@@ -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']);
};
......
......@@ -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>
......
<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>
......
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