toodego: start new air quality pages and tiles (#22323)
This commit is contained in:
parent
e79635126f
commit
f029d08ffb
|
|
@ -0,0 +1,36 @@
|
|||
#page.place div.airquality div.cell.map {
|
||||
margin-top: 0;
|
||||
div.combo-cell-map.leaflet-container {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
div.airquality {
|
||||
div.air2go {
|
||||
margin: 1rem auto;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 120px;
|
||||
border: 10px solid transparent;
|
||||
text-align: center;
|
||||
span.valeur {
|
||||
display: block;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
padding-top: 20px;
|
||||
}
|
||||
span.qualif {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
div.explanation {
|
||||
padding: 2rem 4rem;
|
||||
h3 {
|
||||
}
|
||||
> div {
|
||||
column-count: 2;
|
||||
column-gap: 4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -212,12 +212,14 @@ $(function() {
|
|||
var $map_widget = $(this).find('div.combo-cell-map');
|
||||
var map = $map_widget[0].leaflet_map;
|
||||
var place_type = $(this).parents('.tile').data('place-type');
|
||||
var marker = L.divIcon({
|
||||
if (place_type) {
|
||||
var marker = L.divIcon({
|
||||
iconAnchor: [0, 0],
|
||||
popupAnchor: [5, -45],
|
||||
html: '<span class="layer-' + place_type + '"><i class="leaflet-marker-icon"></i></span>'
|
||||
});
|
||||
L.marker([$map_widget.data('init-lat'), $map_widget.data('init-lng')], {icon: marker}).addTo(map);
|
||||
});
|
||||
L.marker([$map_widget.data('init-lat'), $map_widget.data('init-lng')], {icon: marker}).addTo(map);
|
||||
}
|
||||
});
|
||||
|
||||
/* section collapsing/expanding */
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
@import 'forms';
|
||||
@import 'custom';
|
||||
// individual tiles
|
||||
@import 'atmo';
|
||||
@import 'tcl';
|
||||
@import 'velov';
|
||||
@import 'carrousel';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,31 @@
|
|||
{% load l10n %}
|
||||
{{ cell.media }}
|
||||
{% localize off %}
|
||||
<div class="cell map">
|
||||
<div class="combo-cell-map" data-init-state="{{ initial_state }}"
|
||||
data-init-zoom="{{ initial_zoom }}" data-min-zoom="{{ min_zoom }}"
|
||||
data-max-zoom="{{ max_zoom }}" data-init-lat="{{ init_lat }}"
|
||||
data-init-lng="{{ init_lng }}"
|
||||
data-tile-urltemplate="{{ tile_urltemplate}}" data-map-attribution="{{ map_attribution}}"
|
||||
{% if group_markers %}data-group-markers="1"{% endif %}
|
||||
{% if max_bounds.corner1.lat %}
|
||||
data-max-bounds-lat1="{{ max_bounds.corner1.lat }}"
|
||||
data-max-bounds-lng1="{{ max_bounds.corner1.lng }}"
|
||||
data-max-bounds-lat2="{{ max_bounds.corner2.lat }}"
|
||||
data-max-bounds-lng2="{{ max_bounds.corner2.lng }}"
|
||||
{% endif %}
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$('div.cell.map').on('combo:map-ready', function() {
|
||||
var $map_widget = $('div.combo-cell-map');
|
||||
var 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);
|
||||
});
|
||||
</script>
|
||||
{% endlocalize %}
|
||||
|
|
@ -1,24 +1,46 @@
|
|||
{% load combo gnm assets %}
|
||||
{% with is_place_page=page|is_place_page %}
|
||||
<div class="tile airquality">
|
||||
<div class="tile airquality {% if is_place_page %}is-place{% endif %}">
|
||||
{% if is_place_page %}
|
||||
{% placeholder "explication" name="Explication" render=False %}
|
||||
{% endif %}
|
||||
<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}}">Niveau de pollution de l'air</a></h2>
|
||||
<h2><a href="{{cell|place_page_url}}">Qualité de l'air{% if nominatim %}
|
||||
<br><span class="subtitle">{{ nominatim.display_name }}</span>{% endif %}</a></h2>
|
||||
<span class="producer" style="background-image: url({% asset_url "logo:atmo" %})">Air Rhône Alpes</span>
|
||||
</div>
|
||||
<!--
|
||||
<div class="badge"><span
|
||||
class="airquality-{{json.data.latest.value}}">Niveau {{json.data.latest.value}}</span></div>
|
||||
-->
|
||||
</div>
|
||||
{% if q_lon or lon %}
|
||||
{% include "combo/dashboard_cell_icons.html" %}
|
||||
{% endif %}
|
||||
{% if is_place_page %}
|
||||
<div class="tile-content">
|
||||
<div>
|
||||
{% if json.data.comment %}
|
||||
{{json.data.comment|linebreaks}}
|
||||
{% else %}
|
||||
<p>Pas d'informations détaillées disponibles actuellement.</p>
|
||||
|
||||
{% if not q_lon and not lon %}
|
||||
{% gnm_airquality_map %}
|
||||
{% endif %}
|
||||
|
||||
{% if air2go %}
|
||||
<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>
|
||||
{% endif %}
|
||||
|
||||
<div class="explanation">
|
||||
<h3>Qu'est-ce que c'est ?</h3>
|
||||
<div>
|
||||
{% placeholder "explication" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue