toodego: minitiles on air quality map (#22323)
This commit is contained in:
parent
b5a78e9e8b
commit
81b03f3bcc
|
|
@ -5,7 +5,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
div.airquality {
|
||||
div.tile.airquality {
|
||||
a.address-name {
|
||||
display: block;
|
||||
color: $font-color;
|
||||
text-transform: uppercase;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
div.air2go {
|
||||
margin: 1rem auto;
|
||||
width: 120px;
|
||||
|
|
@ -24,6 +30,23 @@ div.airquality {
|
|||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
span.air2go.valeur {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
padding-top: 0px;
|
||||
border: 5px solid white;
|
||||
height: 40px;
|
||||
display: inline-block;
|
||||
border-radius: 40px;
|
||||
padding: 5px;
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
& + span.qualif {
|
||||
display: inline-block;
|
||||
padding-left: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
div.explanation {
|
||||
padding: 2rem 4rem;
|
||||
h3 {
|
||||
|
|
@ -33,4 +56,30 @@ div.airquality {
|
|||
column-gap: 4rem;
|
||||
}
|
||||
}
|
||||
div.cell.map {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
div.minitiles {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
width: 90%;
|
||||
bottom: 0rem;
|
||||
z-index: 1000;
|
||||
div.cell {
|
||||
pointer-events: all;
|
||||
position: relative;
|
||||
width: 30%;
|
||||
display: inline-block;
|
||||
}
|
||||
div.tile {
|
||||
div.tile-head,
|
||||
div.tile-picture {
|
||||
display: none;
|
||||
}
|
||||
div.tile-content {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ body.page-connect {
|
|||
#columns > div:first-child {
|
||||
overflow: hidden;
|
||||
}
|
||||
.tile-head h2 {
|
||||
div.tile.is-place > .tile-head h2 {
|
||||
height: 152px;
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% load l10n %}
|
||||
{% load gnm l10n %}
|
||||
{{ cell.media }}
|
||||
{% localize off %}
|
||||
<div class="cell map">
|
||||
|
|
@ -16,20 +16,40 @@
|
|||
{% endif %}
|
||||
>
|
||||
</div>
|
||||
<div class="minitiles">
|
||||
</div>
|
||||
</div>
|
||||
{{places|json_script:"places-data"}}
|
||||
<script>
|
||||
$(function() {
|
||||
function add_layer() {
|
||||
var $map_widget = $('div.combo-cell-map');
|
||||
var map = $map_widget[0].leaflet_map;
|
||||
var $map_widget = $('div.combo-cell-map');
|
||||
var map = $map_widget[0].leaflet_map;
|
||||
function configure_map() {
|
||||
map = $map_widget[0].leaflet_map;
|
||||
L.tileLayer('https://b.tiles.atmo-aura.fr/indices_j/{z}/{x}/{y}.png',
|
||||
{
|
||||
opacity: 0.7,
|
||||
maxZoom: 19
|
||||
}).addTo(map);
|
||||
|
||||
map.on('moveend', function(e) {
|
||||
var center = map.getCenter();
|
||||
$.ajax({
|
||||
url: '/api/dashboard/auto-tile/airquality/',
|
||||
data: JSON.stringify({'lat': center.lat, 'lon': center.lng}),
|
||||
contentType: 'application/json; charset=utf-8',
|
||||
type: 'POST',
|
||||
dataType: 'html',
|
||||
success: function(html) {
|
||||
var $tile = $('<div class="cell">' + html + '</div>');
|
||||
$('.minitiles').empty();
|
||||
$tile.appendTo($('.minitiles'));
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
add_layer();
|
||||
$('div.cell.map').on('combo:map-ready', add_layer);
|
||||
configure_map();
|
||||
$('div.cell.map').on('combo:map-ready', configure_map);
|
||||
});
|
||||
</script>
|
||||
{% endlocalize %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{% load combo gnm assets %}
|
||||
{% load l10n combo gnm assets %}
|
||||
{% with is_place_page=page|is_place_page %}
|
||||
<div class="tile airquality {% if is_place_page %}is-place{% endif %}">
|
||||
{% if is_place_page %}
|
||||
|
|
@ -7,8 +7,10 @@
|
|||
<div class="tile-picture" style="background-image: url({% asset_url "picture:atmo" %})"></div>
|
||||
<div class="tile-head">
|
||||
<div class="tile-title">
|
||||
<h2><a href="{{cell|place_page_url}}">Qualité de l'air{% if nominatim %}
|
||||
<br><span class="subtitle">{{ nominatim.display_name }}</span>{% endif %}</a></h2>
|
||||
{% localize off %}
|
||||
<h2><a href="{{airquality_details_path}}{{lon}},{{lat}}/">Qualité de l'air</a>{% if nominatim and is_place_page %}
|
||||
<br><span class="subtitle">{{ nominatim.display_name }}</span>{% endif %}</h2>
|
||||
{% endlocalize %}
|
||||
<span class="producer" style="background-image: url({% asset_url "logo:atmo" %})">Air Rhône Alpes</span>
|
||||
</div>
|
||||
<!--
|
||||
|
|
@ -19,30 +21,36 @@
|
|||
{% if q_lon or lon %}
|
||||
{% include "combo/dashboard_cell_icons.html" %}
|
||||
{% endif %}
|
||||
{% if is_place_page %}
|
||||
<div class="tile-content">
|
||||
<div>
|
||||
|
||||
{% if not q_lon and not lon %}
|
||||
{% if is_place_page and not q_lon and not lon %}
|
||||
{% gnm_airquality_map %}
|
||||
{% endif %}
|
||||
|
||||
{% if air2go %}
|
||||
{% if air2go and is_place_page %}
|
||||
<div class="air2go" style="border-color: {{air2go.indice_multipolluant.couleur_html}}">
|
||||
<span class="valeur">{{air2go.indice_multipolluant.valeur}}</span>
|
||||
<span class="qualif">{{air2go.indice_multipolluant.qualificatif}}</span>
|
||||
</div>
|
||||
{% elif air2go %}
|
||||
{% localize off %}
|
||||
<a class="address-name" href="{{airquality_details_path}}{{lon}},{{lat}}/">{{ nominatim.display_name }}</a>
|
||||
{% endlocalize %}
|
||||
<span class="air2go valeur" style="border-color: {{air2go.indice_multipolluant.couleur_html}}">{{air2go.indice_multipolluant.valeur}}</span>
|
||||
<span class="qualif">{{air2go.indice_multipolluant.qualificatif}}</span>
|
||||
{% endif %}
|
||||
|
||||
{% if is_place_page %}
|
||||
<div class="explanation">
|
||||
<h3>Qu'est-ce que c'est ?</h3>
|
||||
<div>
|
||||
{% placeholder "explication" %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endwith %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue