From ecb1cadbeebbf11c12370da6176b709183f866fc Mon Sep 17 00:00:00 2001
From: Quentin Schulz <foss@0leil.net>
Date: Sun, 5 May 2019 20:43:39 +0200
Subject: [PATCH] themes: pictures-group: fix alignment when pictures do not
 fill the flex container

In most cases, a line in a pictures-group contains enough pictures or at
least in the correct format (usually in landscape mode) to actually make
the browser call flex-shrink.

However, in a few specific cases, when pictures do not fill the flex
container, there is some space left on the right side of the line which
could be filled in.

In that case, we can use the flex-grow property. To be able to keep
everything aligned, we need to set the flex-grow property according to
the ratio of the picture so that all pictures in the line are grown
proportionally.

Adding this alignment fix required a bit of re-ordering so we could call
the ratio property for the div of class `picture`.

Fixes #92

Signed-off-by: Quentin Schulz <foss@0leil.net>
---
 .../templates/sections/pictures-group.html    | 20 +++++++++++--------
 .../templates/sections/pictures-group.html    | 20 +++++++++++--------
 2 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/prosopopee/themes/exposure/templates/sections/pictures-group.html b/prosopopee/themes/exposure/templates/sections/pictures-group.html
index 3fb624b..2b22b65 100644
--- a/prosopopee/themes/exposure/templates/sections/pictures-group.html
+++ b/prosopopee/themes/exposure/templates/sections/pictures-group.html
@@ -5,12 +5,19 @@
     {% for line in section.images %}
     <div class="pictures-line">
       {% for image in line %}
-      <div class="picture caption">
+      {% set caption = image.text %}
+      {% if image.type == "video" %}
+      {% set video = Video(image) %}
+      {% set format = settings.ffmpeg.extension %}
+      {{ video.copy() }}
+      {% set ratio = video.ratio %}
+      {% else %}
+      {% set image = Image(image) %}
+      {{ image.copy() }}
+      {% set ratio = image.ratio %}
+      {% endif %}
+      <div class="picture caption" style="flex-grow: {{ ratio }}">
         {% if image.type == "video" %}
-        {% set caption = image.text %}
-        {% set video = Video(image) %}
-        {% set format = settings.ffmpeg.extension %}
-        {{ video.copy() }}
         <img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
         <video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
           <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
@@ -21,9 +28,6 @@
         </div>
         {% endif %}
         {% else %}
-        {% set caption = image.text %}
-        {% set image = Image(image) %}
-        {{ image.copy() }}
         <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
            data-at-450="{{ image.generate_thumbnail("x450") }}"
            data-at-800="{{ image.generate_thumbnail("x800") }}"
diff --git a/prosopopee/themes/material/templates/sections/pictures-group.html b/prosopopee/themes/material/templates/sections/pictures-group.html
index 6732a5f..85ae8e4 100644
--- a/prosopopee/themes/material/templates/sections/pictures-group.html
+++ b/prosopopee/themes/material/templates/sections/pictures-group.html
@@ -5,12 +5,19 @@
     {% for line in section.images %}
     <div class="pictures-line">
       {% for image in line %}
-      <div class="picture caption">
+      {% set caption = image.text %}
+      {% if image.type == "video" %}
+      {% set video = Video(image) %}
+      {% set format = settings.ffmpeg.extension %}
+      {{ video.copy() }}
+      {% set ratio = video.ratio %}
+      {% else %}
+      {% set image = Image(image) %}
+      {{ image.copy() }}
+      {% set ratio = image.ratio %}
+      {% endif %}
+      <div class="picture caption" style="flex-grow: {{ ratio }}">
         {% if image.type == "video" %}
-        {% set caption = image.text %}
-        {% set video = Video(image) %}
-        {% set format = settings.ffmpeg.extension %}
-        {{ video.copy() }}
         <img class="z-depth-2 lazy responsive-img" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
         <video class="lazy responsive-video" id="{{ video }}" onclick="goFullscreen('{{ video }}');" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
           <source src="{{ video }}.{{ format }}" type="video/{{ format }}">
@@ -21,9 +28,6 @@
         </div>
         {% endif %}
         {% else %}
-        {% set caption = image.text %}
-        {% set image = Image(image) %}
-        {{ image.copy() }}
         <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
            data-at-450="{{ image.generate_thumbnail("x450") }}"
            data-at-800="{{ image.generate_thumbnail("x800") }}"