serguzim/reitanlage-oranienburg
1
0
Fork 0
Code Issues Pull requests Actions Releases 17 Wiki Activity

fix: gallery

Browse source
This commit is contained in:
Tobias Reisinger 2020-02-03 01:39:26 +01:00
parent d6cd4628d8
commit 0596f600a5
3 changed files with 27 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
css/custom.css
View file

@ -21,6 +21,7 @@ body, #wrapper
.card-columns .card-columns
{ {
column-gap: 1em; column-gap: 1em;
column-count: 2;
} }
.card-columns.card .card-columns.card
@ -28,14 +29,6 @@ body, #wrapper
margin-bottom: 1em; margin-bottom: 1em;
} }
@media (min-width: 576px)
{
.card-columns
{
column-count: 2;
}
}
@media (min-width: 768px) @media (min-width: 768px)
{ {
.card-columns .card-columns

26
templates/gallery.html.twig
View file

@ -15,12 +15,34 @@
{% else %} {% else %}
<hr class="my-4"> <hr class="my-4">
{% endif %} {% endif %}
<a href="{{ child.url }}"> <a class="text-decoration-none" href="{{ child.url }}">
<h4 class="text-body">
{{ child.title }} {{ child.title }}
</h4>
<span class="text-body">
{{ child.content }}
</span>
<div class="card-columns"> <div class="card-columns">
{% for media_item in child.media.images[:10] %} {% for media_item in child.media.images[:5] %}
<div class="card"> <div class="card">
{{ media_item.quality(25).html }} {{ media_item.quality(25).html }}
{% if loop.last %}
{{ debug(media_item) }}
{{ debug(media_item.height) }}
{% set height_ratio = media_item.height / media_item.width %}
<p class="p-2" style="
text-align: center;
background-color: #343a40;
border-radius:10%;
color: white;
opacity: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);">
Mehr anzeigen
</p>
{% endif %}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>