ref(annonces): proprification du style des images et du carroussel; fix #21
Parent
15bd8f56b7
révision
f55fcc0657
|
@ -42,6 +42,7 @@
|
|||
@import "components/richtext";
|
||||
@import "components/video";
|
||||
@import "components/books";
|
||||
@import "components/_carroussel";
|
||||
|
||||
// Page-specific styles
|
||||
//@import "pages/home";
|
||||
|
|
|
@ -0,0 +1,50 @@
|
|||
// -----------------------------------------------------------------------------
|
||||
// Carroussel
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
.carousel-annonce {
|
||||
.modal-body {
|
||||
img {
|
||||
max-width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.carousel {
|
||||
.carousel-item {
|
||||
height: 300px;
|
||||
img {
|
||||
object-fit: contain;
|
||||
max-width: 90%;
|
||||
height: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
.carousel-control-next-icon,
|
||||
.carousel-control-prev-icon, {
|
||||
background: none;
|
||||
&::before {
|
||||
color: $dark;
|
||||
font-family: $fa-font-family;
|
||||
font-size: 2 * $fa-font-size-base;
|
||||
content: $fa-var-chevron-right;
|
||||
}
|
||||
}
|
||||
.carousel-control-prev-icon::before {
|
||||
content: $fa-var-chevron-left;
|
||||
}
|
||||
.carousel-indicators-li {
|
||||
opacity: 0.8;
|
||||
background: none;
|
||||
&::after {
|
||||
text-indent: 1ex;
|
||||
color: $dark;
|
||||
font-family: $fa-font-family;
|
||||
font-size: $fa-font-size-base;
|
||||
content: $fa-var-circle-o;
|
||||
}
|
||||
&.active::after {
|
||||
content: $fa-var-circle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -67,6 +67,7 @@
|
|||
</div>
|
||||
{{ annonce.description | linebreaks}}
|
||||
{% if annonce.images.all %}
|
||||
<div class="carousel-annonce">
|
||||
{% for image in annonce.images.all %}
|
||||
<div class="modal fade" id="modal-annonce-{{ forloop.counter0 }}" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
|
||||
|
@ -79,7 +80,7 @@
|
|||
</div>
|
||||
<div class="modal-body">
|
||||
<a href="{{ image.image.url }}">
|
||||
<img class="d-block" style="margin:0 auto; max-width:100%" src="{{ image.image.url }}" alt="{{ image.filename }}">
|
||||
<img class="d-block" src="{{ image.image.url }}" alt="{{ image.filename }}">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -89,14 +90,14 @@
|
|||
<div id="carouselAnnonces" class="carousel slide" data-ride="carousel">
|
||||
<ol class="carousel-indicators">
|
||||
{% for image in annonce.images.all %}
|
||||
<li data-target="#carouselAnnonces" data-slide-to="{{ forloop.counter0 }}"{% if forloop.first %} class="active"{% endif %}></li>
|
||||
<li class="carousel-indicators-li" data-target="#carouselAnnonces" data-slide-to="{{ forloop.counter0 }}"{% if forloop.first %} class="active"{% endif %}></li>
|
||||
{% endfor %}
|
||||
</ol>
|
||||
<div class="carousel-inner">
|
||||
{% for image in annonce.images.all %}
|
||||
<div class="carousel-item{% if forloop.first %} active{% endif %}" style="height:300px">
|
||||
<div class="carousel-item{% if forloop.first %} active{% endif %}">
|
||||
<a data-toggle="modal" data-target="#modal-annonce-{{ forloop.counter0 }}">
|
||||
<img class="d-block" style="object-fit: contain; height: 300px; max-width:90%; margin:0 auto;" src="{{ image.image.url }}" alt="{{ image.filename }}">
|
||||
<img class="d-block" src="{{ image.image.url }}" alt="{{ image.filename }}">
|
||||
</a>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
@ -110,6 +111,7 @@
|
|||
<span class="sr-only">Précédant</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endwith %}
|
||||
|
|
Chargement…
Référencer dans un nouveau ticket