toodego: revamp map filtering (#39592)
This commit is contained in:
parent
21d0627557
commit
25ed18e1f5
|
|
@ -380,7 +380,7 @@ body.page-connect {
|
|||
padding: 9px 1ex 11px 1ex;
|
||||
margin: 0;
|
||||
}
|
||||
button {
|
||||
button.search-button {
|
||||
margin-right: 0;
|
||||
border-width: 1px 1px 1px 0;
|
||||
background: $red url(img/loupe-white.png) center center no-repeat;
|
||||
|
|
@ -389,6 +389,38 @@ body.page-connect {
|
|||
overflow: hidden;
|
||||
width: 40px;
|
||||
}
|
||||
button.filter-button {
|
||||
margin-left: 10px;
|
||||
margin-right: 0;
|
||||
&.on {
|
||||
background: $red;
|
||||
color: white;
|
||||
}
|
||||
@media screen and (max-width: $desktop-limit) {
|
||||
text-transform: none;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 20px;
|
||||
border: none;
|
||||
color: black;
|
||||
&:hover {
|
||||
background: white;
|
||||
}
|
||||
&:focus, &:active {
|
||||
outline: none;
|
||||
}
|
||||
&.on {
|
||||
outline: none;
|
||||
border: none;
|
||||
background: white;
|
||||
color: black;
|
||||
&::after {
|
||||
content: " ×";
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
div.suggestions {
|
||||
padding: 1rem 0 0.5rem 3px;
|
||||
|
|
@ -409,6 +441,47 @@ body.page-connect {
|
|||
}
|
||||
}
|
||||
}
|
||||
#filtres-autour-de-moi {
|
||||
display: none;
|
||||
padding: 1em;
|
||||
h4 {
|
||||
font-family: Oswald;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
ul, li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-right: 0.5em;
|
||||
line-height: 200%;
|
||||
}
|
||||
li a {
|
||||
background: black;
|
||||
padding: 3px 7px;
|
||||
color: white;
|
||||
border-radius: 20px;
|
||||
&.on {
|
||||
background: $red;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.combo-cell-map #filtres-autour-de-moi {
|
||||
z-index: 800; // less than search input
|
||||
background: white;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 19px;
|
||||
right: 19px;
|
||||
bottom: 10px;
|
||||
@media screen and (max-width: $desktop-limit) {
|
||||
top: 78px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body.focus-in #page.search-page {
|
||||
|
|
@ -421,7 +494,7 @@ body.focus-in #page.search-page {
|
|||
|
||||
.page-autour-de-moi #page.search-page {
|
||||
.gru-content #sidebar {
|
||||
margin-top: calc(0.4em + 60px + 2.8rem);
|
||||
margin-top: calc(0.4em + 60px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -92,6 +92,48 @@ $(function() {
|
|||
return false;
|
||||
});
|
||||
|
||||
/* map filters */
|
||||
$('#filtres-autour-de-moi').detach().appendTo('.combo-cell-map');
|
||||
$('#mapsearch .filter-button').on('click', function() {
|
||||
$(this).toggleClass('on');
|
||||
$('#filtres-autour-de-moi').toggle();
|
||||
if ($(this).hasClass('on')) {
|
||||
var mql = window.matchMedia("(max-width: 1100px)");
|
||||
if (mql.matches) {
|
||||
$('#sidebar .cell').removeClass('selected');
|
||||
$('#sidebar').css('min-height', 0);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
$('#filtres-autour-de-moi a').on('click', function(ev) {
|
||||
var href = $(this).attr('href');
|
||||
if (href[0] == '?') { // layer filter
|
||||
var layer_slug = href.substr(1);
|
||||
var map = $map_widget[0].leaflet_map;
|
||||
$(this).toggleClass('on');
|
||||
if ($(this).hasClass('on')) {
|
||||
if ($('#filtres-autour-de-moi a.on').length == 1) {
|
||||
// initial filter, disable all
|
||||
map.disable_all_layers();
|
||||
}
|
||||
map.enable_layer(layer_slug);
|
||||
} else {
|
||||
if ($('#filtres-autour-de-moi a.on').length == 0) {
|
||||
// no more filter, enable all
|
||||
map.enable_all_layers();
|
||||
} else {
|
||||
map.disable_layer(layer_slug);
|
||||
}
|
||||
}
|
||||
$sidebar.empty();
|
||||
$(document).trigger('gnm:new-results');
|
||||
$('#mapsearch .filter-button').trigger('click'); // close filter pane
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
/* map/marker tile */
|
||||
function map_marker_identifier(slug, marker) {
|
||||
return slug + ':' + (
|
||||
|
|
@ -394,7 +436,10 @@ $(function() {
|
|||
});
|
||||
map.each_marker(function(marker) {
|
||||
if (! map.getBounds().contains(marker.getLatLng())) {
|
||||
return;
|
||||
return;
|
||||
}
|
||||
if (! map.hasLayer(marker)) {
|
||||
return;
|
||||
}
|
||||
var marker_tile_identifier = map_marker_identifier(this.slug, marker);
|
||||
var $tile = $('[data-leaflet-id="' + marker_tile_identifier + '"]');
|
||||
|
|
|
|||
|
|
@ -19,20 +19,10 @@
|
|||
title="ex : nom d'un établissement, commune"
|
||||
{%endif %}
|
||||
><button class="search-button">Rechercher</button>
|
||||
</form>
|
||||
{% if cell.page.slug == 'autour-de-moi' %}
|
||||
<div class="suggestions">
|
||||
<a href="/services/mes-deplacements/aires-de-covoiturage/">Aire de covoiturage</a>
|
||||
<span>Bibliothèque</span>
|
||||
<a href="/services/ma-vie-de-quartier/decheteries-et-donneries/">Déchèterie</a>
|
||||
<a href="/services/mes-deplacements/horaires-a-larret/">Horaires à l'arrêt</a>
|
||||
<span>Mairie</span>
|
||||
<span>Maison de la Métropole</span>
|
||||
<span>Piscine</span>
|
||||
<span>Station de taxi</span>
|
||||
<span>Vélo'v</span>
|
||||
</div>
|
||||
<button class="filter-button">Filtrer</button>
|
||||
{% endif %}
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="loader">
|
||||
|
|
|
|||
Loading…
Reference in New Issue