montpellier-ville: add style/behaviour for roadwork display (#72594)
This commit is contained in:
Gitea
parent
004e6d60bf
commit
83135cee5a
|
|
@ -31,3 +31,55 @@ $cell-map-mobile-height: calc(100vh - 108px);
|
|||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chantier {
|
||||
position: absolute;
|
||||
border: $cell-border;
|
||||
background: $cell-background;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 100000;
|
||||
height: calc(#{$cell-map-height} + 2px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
width: 25vw;
|
||||
transform: translateX(25vw);
|
||||
transition: transform linear 250ms;
|
||||
padding: 1em;
|
||||
h3 {
|
||||
@extend %title;
|
||||
padding: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
p {
|
||||
margin: 0.5em 0;
|
||||
&.chantier--localisations {
|
||||
font-size: 105%;
|
||||
@media ($max-mobile-viewport) {
|
||||
font-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chantier--dates {
|
||||
font-size: 80%;
|
||||
}
|
||||
.chantier--libelle {
|
||||
display: block;
|
||||
color: #333;
|
||||
}
|
||||
&.shown {
|
||||
transform: translateX(0vw);
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
top: unset;
|
||||
right: unset;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
height: 250px;
|
||||
max-height: calc(100vh - 180px);
|
||||
transform: translateY(250px);
|
||||
&.shown {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,27 @@
|
|||
"name": "Une colonne (spéciale carte travaux)",
|
||||
"template": "combo/page_template.html"
|
||||
}
|
||||
},
|
||||
"JSON_CELL_TYPES.update": {
|
||||
"chantiers-genants": {
|
||||
"cache_duration": 3600,
|
||||
"force_async": false,
|
||||
"name": "Chantiers gênants",
|
||||
"url": "{{url}}",
|
||||
"form": [
|
||||
{"label": "Adresse du GEOJSON des chantiers gênants", "varname": "url", "required": true}
|
||||
]
|
||||
},
|
||||
"chantiers-majeurs": {
|
||||
"cache_duration": 3600,
|
||||
"force_async": false,
|
||||
"name": "Chantiers majeurs",
|
||||
"url": "{{url}}",
|
||||
"form": [
|
||||
{"label": "Adresse de récupération des fiches des chantiers majeurs", "varname": "url", "required": true}
|
||||
]
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
$(function() {
|
||||
$('.page-template-roadworks-map div.cell.map').on('combo:map-feature-prepare', function(ev, info) {
|
||||
info.layer.on('click', function(ev) {
|
||||
var marker = info.layer;
|
||||
var chantier_id = marker.feature.properties.IDCHANTIER || marker.feature.properties.id;
|
||||
var $cell = $('[data-chantier-id=' + chantier_id + ']');
|
||||
if ($cell.hasClass('shown')) {
|
||||
$('.chantier').removeClass('shown');
|
||||
} else {
|
||||
$('.chantier[data-chantier-id!=' + chantier_id + ']').removeClass('shown');
|
||||
$('.chantier').show();
|
||||
$cell.addClass('shown');
|
||||
}
|
||||
});
|
||||
});
|
||||
$('.chantier').on('click', function() { $(this).toggleClass('shown'); });
|
||||
});
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
{% for feature in json.features %}
|
||||
<div class="chantier" data-chantier-id="{{feature.properties.IDCHANTIER}}" style="display: none">
|
||||
<h3>{{ feature.properties.TYPE }}<br>
|
||||
<span class="chantier--dates">
|
||||
{% with year=feature.properties.DEBUT|slice:":4" month=feature.properties.DEBUT|slice:"4:6" day=feature.properties.DEBUT|slice:"6:8" %}
|
||||
{% with date=year|add:"-"|add:month|add:"-"|add:day|date %}
|
||||
du {{date}}
|
||||
{%endwith %}
|
||||
{% endwith %}
|
||||
{% with year=feature.properties.FIN|slice:":4" month=feature.properties.FIN|slice:"4:6" day=feature.properties.FIN|slice:"6:8" %}
|
||||
{% with date=year|add:"-"|add:month|add:"-"|add:day|date %}
|
||||
au {{date}}
|
||||
{%endwith %}
|
||||
{%endwith %}
|
||||
</span>
|
||||
</h3>
|
||||
<div>
|
||||
<p class="chantier--localisations">{{ feature.properties.LOCALISATIONS|safe }}</p>
|
||||
|
||||
{% if feature.properties.INCIDENCE_CIRCULATION %}<p><span class="chantier--libelle">Incidence circulation :</span> {{feature.properties.INCIDENCE_CIRCULATION}}</p>{% endif %}
|
||||
{% if feature.properties.INCIDENCE_STATIONNEMENT %}<p><span class="chantier--libelle">Incidence sur le stationnement :</span> {{feature.properties.INCIDENCE_STATIONNEMENT}}</p>{% endif %}
|
||||
{% if feature.properties.NATURE %}<p><span class="chantier--libelle">Nature :</span> {{feature.properties.NATURE }}</p>{% endif %}
|
||||
{% if feature.properties.MOUVRAGE %}<p><span class="chantier--libelle">Maîtrise d’ouvrage :</span> {{feature.properties.MOUVRAGE }}</p>{% endif %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{% for feature in json.data %}
|
||||
<div class="chantier" data-chantier-id="{{feature.display_id}}" style="display: none">
|
||||
<h3>{{ feature.fields.chantier }}<br>
|
||||
<span class="chantier--dates">
|
||||
{% with date=feature.fields.debutchantier|date %}
|
||||
du {{date}}
|
||||
{% endwith %}
|
||||
{% with date=feature.fields.finchantier|date %}
|
||||
au {{date}}
|
||||
{% endwith %}
|
||||
</span>
|
||||
</h3>
|
||||
<div>
|
||||
<p class="chantier--localisations">{{ feature.fields.numero|default:"" }} {{ feature.fields.rue }}, {{ feature.fields.commune }}</p>
|
||||
|
||||
<p>{{feature.fields.descriptifchantier|safe}}</p>
|
||||
|
||||
{% if feature.fields.contacts %}<p><span class="chantier--libelle">Contacts :</span> {{feature.fields.contacts }}</p>{% endif %}
|
||||
{% if feature.fields.categoriechantier %}<p><span class="chantier--libelle">Catégorie :</span> {{feature.fields.categoriechantier }}</p>{% endif %}
|
||||
{% if feature.fields.emploisgeneres %}<p><span class="chantier--libelle">Emplois générés :</span> {{feature.fields.emploisgeneres }}</p>{% endif %}
|
||||
{% if feature.fields.montanttravaux %}<p><span class="chantier--libelle">Montant des travaux :</span> {{feature.fields.montanttravaux }}</p>{% endif %}
|
||||
|
||||
{% if feature.fields.url %}<p><a class="pk-button" href="{{ feature.fields.url }}">Plus d’infos</a></p>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
Loading…
Reference in New Issue