update click anywhere popup with new design and share button
This commit is contained in:
Laura Klünder
parent
59bf483160
commit
86b61816d2
3 changed files with 74 additions and 30 deletions
|
|
@ -734,26 +734,51 @@ main:not([data-view=route-result]) #route-dots {
|
|||
margin: 15px 10px 10px;
|
||||
padding: 0;
|
||||
}
|
||||
.location-popup .leaflet-popup-content .location {
|
||||
padding: 0 0 0 42px;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.location-popup .leaflet-popup-content .icon {
|
||||
top: 3px;
|
||||
left: 0;
|
||||
}
|
||||
.location-popup .leaflet-popup-content .button-clear {
|
||||
display:block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.location-popup a.leaflet-popup-close-button {
|
||||
font-size: 24px;
|
||||
width: 22px;
|
||||
top: 2px;
|
||||
.location-popup {
|
||||
.leaflet-popup-content-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
.leaflet-popup-content {
|
||||
margin: 0;
|
||||
|
||||
.buttons {
|
||||
border: 0 #dddddd solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
.location {
|
||||
margin-right: 12px;
|
||||
}
|
||||
.button-clear {
|
||||
display:block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.as-location .material-icons {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
}
|
||||
a.leaflet-popup-close-button {
|
||||
font-size: 24px;
|
||||
width: 22px;
|
||||
top: 2px;
|
||||
}
|
||||
.leaflet-popup-tip-container::after {
|
||||
content: "";
|
||||
border: 0 #dddddd solid;
|
||||
border-top-width: 1px;
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
left: 11px;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.buttons {
|
||||
|
|
|
|||
|
|
@ -732,7 +732,7 @@ c3nav = {
|
|||
if ($(this).is('.save')) {
|
||||
$.post('/api/routing/options/', options);
|
||||
}
|
||||
c3nav.next_route_options = options
|
||||
c3nav.next_route_options = options;
|
||||
c3nav.update_state(null, null, null, false);
|
||||
},
|
||||
_location_buttons_route_click: function () {
|
||||
|
|
@ -759,7 +759,7 @@ c3nav = {
|
|||
},
|
||||
_popup_button_click: function (e) {
|
||||
e.stopPropagation();
|
||||
var $location = $(this).siblings('.location'),
|
||||
var $location = $(this).parent().siblings('.location'),
|
||||
location = c3nav.locations_by_id[parseInt($location.attr('data-id'))],
|
||||
$origin = $('#origin-input'),
|
||||
$destination = $('#destination-input');
|
||||
|
|
@ -769,6 +769,8 @@ c3nav = {
|
|||
if ($(this).is('.as-location')) {
|
||||
c3nav._locationinput_set($destination, location);
|
||||
c3nav.update_state(false);
|
||||
} else if ($(this).is('.share')) {
|
||||
c3nav._buttons_share_click(location);
|
||||
} else {
|
||||
var $locationinput = $(this).is('.as-origin') ? $origin : $destination,
|
||||
$other_locationinput = $(this).is('.as-origin') ? $destination : $origin,
|
||||
|
|
@ -783,18 +785,22 @@ c3nav = {
|
|||
},
|
||||
|
||||
// share logic
|
||||
_buttons_share_click: function () {
|
||||
_buttons_share_click: function (location) {
|
||||
c3nav.open_modal($('main > .share-ui')[0].outerHTML);
|
||||
c3nav._update_share_ui();
|
||||
c3nav._update_share_ui(false, location);
|
||||
},
|
||||
_update_share_ui: function(with_position) {
|
||||
_update_share_ui: function(with_position, location) {
|
||||
var $share = $('#modal').find('.share-ui'),
|
||||
state = $.extend({}, c3nav.state),
|
||||
url;
|
||||
if (!with_position) {
|
||||
state.center = null;
|
||||
if (location) {
|
||||
url = '/' + location.slug + '/';
|
||||
} else {
|
||||
if (!with_position) {
|
||||
state.center = null;
|
||||
}
|
||||
url = c3nav._build_state_url(state);
|
||||
}
|
||||
url = c3nav._build_state_url(state);
|
||||
$share.find('img').attr('src', '/qr' + url);
|
||||
$share.find('input').val(window.location.protocol + '//' + window.location.host + url);
|
||||
if (!window.mobileclient) $share.find('input')[0].select();
|
||||
|
|
|
|||
|
|
@ -30,9 +30,22 @@
|
|||
{% if not embed %}
|
||||
<section id="messages">{% include 'site/fragment_messages.html' %}</section>
|
||||
<section id="popup-buttons">
|
||||
<button class="button-clear as-location">{% trans 'Select this location' %}</button>
|
||||
<button class="button-clear as-destination">{% trans 'Route to here' %}</button>
|
||||
<button class="button-clear as-origin">{% trans 'Route from here' %}</button>
|
||||
<div class="buttons">
|
||||
<button class="button-clear as-location">
|
||||
<i class="material-icons">arrow_upward</i>
|
||||
{% trans 'Select' %}
|
||||
</button>
|
||||
<button class="button-clear share">
|
||||
<i class="material-icons">share</i>
|
||||
{% trans 'Share' %}
|
||||
</button>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="button-clear as-destination"><i class="material-icons">directions</i> {% trans 'Route to here' %}</button>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<button class="button-clear as-origin"><i class="material-icons">directions</i> {% trans 'Route from here' %}</button>
|
||||
</div>
|
||||
</section>
|
||||
<section class="share-ui">
|
||||
<h3>{% trans 'Share' %}</h3>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue