Browse Source

ref(annonces): proprification du style des images et du carroussel; fix #21

tags/v090
François Poulain 11 months ago
parent
commit
f55fcc0657
3 changed files with 57 additions and 4 deletions
  1. +1
    -0
      assets/scss/app.scss
  2. +50
    -0
      assets/scss/components/_carroussel.scss
  3. +6
    -4
      biohdf/templates/biohdf/annonce.html

+ 1
- 0
assets/scss/app.scss View File

@@ -42,6 +42,7 @@
@import "components/richtext";
@import "components/video";
@import "components/books";
@import "components/_carroussel";

// Page-specific styles
//@import "pages/home";

+ 50
- 0
assets/scss/components/_carroussel.scss View File

@@ -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;
}
}
}
}

+ 6
- 4
biohdf/templates/biohdf/annonce.html View File

@@ -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 %}

Loading…
Cancel
Save