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

28
templates/index.html
View File

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