Saumur: intégration graphique, retouches (#71873) #48
|
@ -26,6 +26,7 @@ main {
|
||||||
#logo {
|
#logo {
|
||||||
@media screen and ($max-mobile-viewport) {
|
@media screen and ($max-mobile-viewport) {
|
||||||
padding: 0 $space-small;
|
padding: 0 $space-small;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -87,7 +88,8 @@ div.gru-nav {
|
||||||
|
|
||||||
#toplinks {
|
#toplinks {
|
||||||
@media screen and ($max-mobile-viewport) {
|
@media screen and ($max-mobile-viewport) {
|
||||||
margin-top: $space-small;
|
position: static;
|
||||||
|
display: inline-block;
|
||||||
margin-right: $nav-menu-side;
|
margin-right: $nav-menu-side;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
@ -183,7 +185,7 @@ div.link-cell {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
h2:first-child {
|
h2:first-child {
|
||||||
padding-left: $space-large * 1.5;
|
padding-left: $space-large;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
img {
|
img {
|
||||||
|
@ -191,18 +193,38 @@ div.link-cell {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
width: $space-large;
|
width: $space-large;
|
||||||
top: $space-small;
|
top: $space-small;
|
||||||
left: $space-medium;
|
left: 0;
|
||||||
}
|
}
|
||||||
&.foldable:not(.folded) picture::after {
|
&.foldable:not(.folded) picture::after {
|
||||||
@extend %orange-border;
|
@extend %orange-border;
|
||||||
margin: 0 1rem;
|
margin: 0;
|
||||||
}
|
}
|
||||||
&:not(.foldable) picture::after {
|
&:not(.foldable) picture::after {
|
||||||
@extend %orange-border;
|
@extend %orange-border;
|
||||||
margin: 0 1rem;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// borderless cells in grid
|
||||||
|
|
||||||
|
.gru-content > #columns-wrapper > #columns {
|
||||||
|
border: $widget-border;
|
||||||
|
background: white;
|
||||||
|
padding: $space-medium;
|
||||||
|
.cell {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// communes selector
|
||||||
|
|
||||||
|
div#services-communes {
|
||||||
|
select {
|
||||||
aberriot marked this conversation as resolved
Outdated
|
|||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// forms
|
// forms
|
||||||
.form-content {
|
.form-content {
|
||||||
@extend %cell;
|
@extend %cell;
|
||||||
|
|
|
@ -81,8 +81,8 @@ $button-hover-background: $orange;
|
||||||
$button-hover-color: $white;
|
$button-hover-color: $white;
|
||||||
$button-focus-outline: 2px solid $orange;
|
$button-focus-outline: 2px solid $orange;
|
||||||
$button-focus-outline-offset: 2px;
|
$button-focus-outline-offset: 2px;
|
||||||
$buttons-order: previous, cancel (grow), submit;
|
$buttons-order: previous, cancel, submit;
|
||||||
|
$buttons-alignment: flex-end;
|
||||||
$widget-background: $gray-light-1;
|
$widget-background: $gray-light-1;
|
||||||
$widget-border: 1px solid $gray-dark-1;
|
$widget-border: 1px solid $gray-dark-1;
|
||||||
$widget-focus-border: 1px solid $orange;
|
$widget-focus-border: 1px solid $orange;
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
{% block cell-content %}
|
||||||
|
<h2>{{ title }}</h2>
|
||||||
|
<div class="cell--body">
|
||||||
|
<form>
|
||||||
|
<select id="commune--select-{{ cell.id }}">
|
||||||
aberriot marked this conversation as resolved
Outdated
csechet
commented
commune--title et commune--select ne sont pas utilisées dans le CSS (sur la version izi-ici de cette cellule, commune--select ne l'est pas non plus d'ailleurs) commune--title et commune--select ne sont pas utilisées dans le CSS (sur la version izi-ici de cette cellule, commune--select ne l'est pas non plus d'ailleurs)
aberriot
commented
Exact, merci c'est retiré 👍 Exact, merci c'est retiré 👍
|
|||||||
|
<option value="">Sélectionnez</option>
|
||||||
|
{% for link in links %}
|
||||||
|
<option value="{{ link.url }}">{{ link.title }}</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
<p>Sélectionnez une commune pour découvrir ses services en ligne.</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
{% endblock %}
|
||||||
|
<script>
|
||||||
|
$(function() {
|
||||||
|
$('#commune--select-{{ cell.id }}').change(function(e){
|
||||||
|
const link = this.options[this.selectedIndex].value;
|
||||||
|
if (link) {
|
||||||
|
window.location.href = link;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
});
|
||||||
|
</script>
|
Loading…
Reference in New Issue
div#services-communes est déjà une cellule, pas besoin de définir le background ici.
Bien vu, je viens d'enlever