prenex/magcms
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[enh] handle 1 to 3 covers per line on the index

Browse Source
This commit is contained in:
Laurent Peuch 2015-12-09 06:44:39 +01:00
parent 7468d4aa56
commit d2c9445dc7
2 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
static/css/style.css
View File

@ -19,7 +19,15 @@ body {
height: 100%;
}
.gallery-square {
.covers-1 .gallery-square {
width: 47%;
height: 100%;
margin: auto;
padding-bottom: 47%;
position: relative;
}
.covers-2 .gallery-square {
width: 47%;
height: 100%;
float: left;
@ -28,6 +36,15 @@ body {
position: relative;
}
.covers-3 .gallery-square {
width: 33.333333333%;
height: 100%;
margin: 0;
padding-bottom: 47%;
position: relative;
display: inline-block;
}
.gallery-square > a {
position: absolute;
top: 0px;

28
templates/index.html
View File

@ -19,20 +19,20 @@
</div>
<div class="galleries-grid">
{% for galleries_line in galleries|batch(2) %}
<div class="galleries-line">
{% for gallery in galleries_line %}
<div class="gallery-square">
<a href="{{ gallery.link }}">
<div class="gallery-title">
<h2>{{ gallery.title }}</h2>
{% if gallery.sub_title %}<h3>{{ gallery.sub_title }}</h3>{% endif %}
{% if gallery.date %}<div class="gallery-datetime">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
</div>
</a>
<div class="gallery-cover" style="background-image: url('{{ gallery.cover }}');"></div>
</div>
{% endfor %}
{% for galleries_line in galleries|batch(3) %}
<div class="galleries-line covers-{{ galleries_line|length }}">
{% for gallery in galleries_line %}<!-- comment tricks against space between inline-block
--><div class="gallery-square">
<a href="{{ gallery.link }}">
<div class="gallery-title">
<h2>{{ gallery.title }}</h2>
{% if gallery.sub_title %}<h3>{{ gallery.sub_title }}</h3>{% endif %}
{% if gallery.date %}<div class="gallery-datetime">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
</div>
</a>
<div class="gallery-cover" style="background-image: url('{{ gallery.cover }}');"></div>
</div><!-- comment tricks against space between inline-block
-->{% endfor %}
</div>
{% endfor %}
</div>