From d2c9445dc7d45ec6a34facf1c51f662197846a81 Mon Sep 17 00:00:00 2001
From: Laurent Peuch <cortex@worlddomination.be>
Date: Wed, 9 Dec 2015 06:44:39 +0100
Subject: [PATCH] [enh] handle 1 to 3 covers per line on the index

---
 static/css/style.css | 19 ++++++++++++++++++-
 templates/index.html | 28 ++++++++++++++--------------
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index ab37667..ff1b104 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -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;
diff --git a/templates/index.html b/templates/index.html
index b856f2a..778f1af 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -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>