From 530a524373bb6f0e16f568de9fa2584d1a074089 Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Wed, 18 May 2016 17:43:43 +0200
Subject: [PATCH] picture group responsible

---
 .../themes/exposure/static/css/style-page.css |  9 +++
 .../templates/sections/pictures-group.html    | 67 +++++++++----------
 2 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css
index ca17c42..e23d51c 100644
--- a/prosopopee/themes/exposure/static/css/style-page.css
+++ b/prosopopee/themes/exposure/static/css/style-page.css
@@ -401,3 +401,12 @@ a.google {
 .video-container video.fillWidth {
   width: 100%;
 }
+
+@media only screen and (max-device-width : 992px) {
+
+.pictures-line {
+    display: inherit;
+}
+
+}
+
diff --git a/prosopopee/themes/material/templates/sections/pictures-group.html b/prosopopee/themes/material/templates/sections/pictures-group.html
index 19e2842..2af50c7 100644
--- a/prosopopee/themes/material/templates/sections/pictures-group.html
+++ b/prosopopee/themes/material/templates/sections/pictures-group.html
@@ -1,46 +1,45 @@
 {% if section.background %}
 <div id="bg-section" style="background: {{ section.background }};">
     {% endif %}
-    <div class="pictures-group baguette">
+    <div class="container baguette">
         <div class="row">
             {% for line in section.images %}
-            <div class="pictures-line">
-                {% for image in line %}
-                {% if image.type == "video" %}
-                {% set video = Video(image) %}
-                {{ video.copy() }}
-                {% else %}
-                {% set caption = image.text %}
-                {% set image = Image(image) %}
-                {{ image.copy() }}
-                {% endif %}
-                <div class="col">
-                    <div class="card">
-                        {% if video %}
-                        <div class="picture card-image">
-                            <img class="lazy" data-original="{{ video.generate_thumbnail("600") }}">
-                            <video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
-                                <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
-                            </video>
-                        </div>
-                        {% set video = "" %}
-                        {% else %}
-                        <div class="picture card-image caption">
-                            <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
-                                <img class="lazy" data-original="{{ image.generate_thumbnail("x600") }}">
-                                {% if caption %}
-                                <div class="caption__overlay center">
-                                    <h5 class="caption__overlay__title">{{ caption }}</h5>
-                                </div>
-                                {% endif %}
-                            </a>
-                        </div>
-                        {% endif %}
+            {% set number = line|length %}
+            {% for image in line %}
+            {% if image.type == "video" %}
+            {% set video = Video(image) %}
+            {{ video.copy() }}
+            {% else %}
+            {% set caption = image.text %}
+            {% set image = Image(image) %}
+            {{ image.copy() }}
+            {% endif %}
+            <div class="col s12 m{{24 // number }} l{{12 // number }}">
+                <div class="card">
+                    {% if video %}
+                    <div class="picture card-image">
+                        <img class="lazy" data-original="{{ video.generate_thumbnail("600") }}">
+                        <video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
+                            <source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
+                        </video>
                     </div>
+                    {% set video = "" %}
+                    {% else %}
+                    <div class="picture card-image caption">
+                        <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
+                            <img class="lazy" data-original="{{ image.generate_thumbnail("x600") }}">
+                            {% if caption %}
+                            <div class="caption__overlay center">
+                                <h5 class="caption__overlay__title">{{ caption }}</h5>
+                            </div>
+                            {% endif %}
+                        </a>
+                    </div>
+                    {% endif %}
                 </div>
-                {% endfor %}
             </div>
             {% endfor %}
+            {% endfor %}
         </div>
     </div>
     {% if section.background %}