From dbdd257c5223dbe4be08fefcb8d39386d9ec2700 Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Fri, 26 Feb 2016 19:52:14 +0100
Subject: [PATCH] add caption on exposure theme

---
 .../templates/sections/bordered-picture.html  |  2 +-
 .../templates/sections/pictures-group.html    |  2 +-
 .../themes/material/static/css/styles.css     | 41 +++++++++++++++++++
 .../themes/material/templates/index.html      |  2 +-
 .../templates/sections/bordered-picture.html  | 17 ++++----
 .../templates/sections/full-picture.html      |  3 +-
 .../templates/sections/pictures-group.html    | 15 +++----
 7 files changed, 61 insertions(+), 21 deletions(-)

diff --git a/prosopopee/themes/exposure/templates/sections/bordered-picture.html b/prosopopee/themes/exposure/templates/sections/bordered-picture.html
index a721190..a5f0cf8 100644
--- a/prosopopee/themes/exposure/templates/sections/bordered-picture.html
+++ b/prosopopee/themes/exposure/templates/sections/bordered-picture.html
@@ -3,7 +3,7 @@
 {{ image.copy()}}
 <section class="bordered-picture baguette">
     <div class="caption">
-        <a href="{{ image }}">
+        <a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}">
             <img src="{{ image }}">
             {% if caption %}
             <div class="caption__overlay">
diff --git a/prosopopee/themes/exposure/templates/sections/pictures-group.html b/prosopopee/themes/exposure/templates/sections/pictures-group.html
index 5e233bd..6f78714 100644
--- a/prosopopee/themes/exposure/templates/sections/pictures-group.html
+++ b/prosopopee/themes/exposure/templates/sections/pictures-group.html
@@ -6,7 +6,7 @@
             {% set image = Image(image) %}
             {{ image.copy() }}
             <div class="picture caption">
-                <a href="{{ image }}">
+                <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
                     <img src="{{ image.generate_thumbnail("x600") }}">
                     {% if caption %}
                     <div class="caption__overlay">
diff --git a/prosopopee/themes/material/static/css/styles.css b/prosopopee/themes/material/static/css/styles.css
index 1920adf..0baaed5 100644
--- a/prosopopee/themes/material/static/css/styles.css
+++ b/prosopopee/themes/material/static/css/styles.css
@@ -31,3 +31,44 @@ main {
   text-align: center;
   width: 100%;
 }
+
+.caption {
+    position: relative;
+    overflow: hidden;
+}
+
+.caption__media {
+    display: block;
+    min-width: 100%;
+    max-width: 100%;
+    height: auto;
+}
+
+
+.caption__overlay {
+    background-color: rgba(0, 0, 0, .4);
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    color: white;
+    transform: translateY(101%);
+    transition: transform .35s ease-out;
+}
+
+.caption:hover .caption__overlay {
+    transform: translateY(0);
+}
+
+.bordered-picture .caption__overlay {
+    margin-left: 11.5%;
+    margin-right: 11.5%;
+}
+
+.caption .card-panel {
+    margin: 0;
+    padding: 1px;
+    text-align: center;
+}
+  
diff --git a/prosopopee/themes/material/templates/index.html b/prosopopee/themes/material/templates/index.html
index ca50a93..b34d361 100644
--- a/prosopopee/themes/material/templates/index.html
+++ b/prosopopee/themes/material/templates/index.html
@@ -25,7 +25,7 @@
                     <div class="card-image">
                         {% set cover = Image(gallery.cover) %}
                         {{ cover.copy() }}
-                        <img src="{{ cover.generate_thumbnail("x800") }}">
+                        <img class="responsive-img" src="{{ cover.generate_thumbnail("x800") }}">
                         <span class="card-title truncate">{{ gallery.title }}</span>
                     </div>
                     <div class="card-content">
diff --git a/prosopopee/themes/material/templates/sections/bordered-picture.html b/prosopopee/themes/material/templates/sections/bordered-picture.html
index a93c129..7971de1 100644
--- a/prosopopee/themes/material/templates/sections/bordered-picture.html
+++ b/prosopopee/themes/material/templates/sections/bordered-picture.html
@@ -1,14 +1,13 @@
-<div class="container baguette hide-on-med-and-down">
+<div class="container baguette caption">
     {% set image = Image(section.image) %}
+    {% set caption = section.text %}
     {{ image.copy()}}
-    <a href="{{ image }}">
+    <a href="{{ image }} {% if caption %}data-caption="{{ caption }}"{% endif %}>
         <img class="responsive-img" src="{{ image.generate_thumbnail("x2000") }}">
-    </a>
-</div>
-<div class="container baguette hide-on-large-only">
-    {% set image = Image(section.image) %}
-    {{ image.copy()}}
-    <a href="{{ image.generate_thumbnail("x1024") }}">
-        <img class="responsive-img" src="{{ image.generate_thumbnail("x600") }}">
+        {% if caption %}
+        <div class="caption__overlay card-panel center">
+            <h5 class="black-white">{{ caption }}</h5>
+        </div>
+        {% endif %}
     </a>
 </div>
diff --git a/prosopopee/themes/material/templates/sections/full-picture.html b/prosopopee/themes/material/templates/sections/full-picture.html
index 33fc8bf..f20537b 100644
--- a/prosopopee/themes/material/templates/sections/full-picture.html
+++ b/prosopopee/themes/material/templates/sections/full-picture.html
@@ -1,8 +1,7 @@
 {% set image = Image(section.image) %}
 {{ image.copy() }}
 <div class="parallax-container z-depth-1 valign-wrapper">
-    <div class="parallax hide-on-med-and-down"><img src="{{ image }}"></div>
-    <div class="parallax hide-on-large-only"><img src="{{ image.generate_thumbnail("x1024") }}"></div>
+    <div class="parallax"><img src="{{ image }}"></div>
     {% if section.text %}
     <div class="parallax-tittle white-text">
     <h1>{{ section.text.title }}</h1>
diff --git a/prosopopee/themes/material/templates/sections/pictures-group.html b/prosopopee/themes/material/templates/sections/pictures-group.html
index 60a9fb0..e515099 100644
--- a/prosopopee/themes/material/templates/sections/pictures-group.html
+++ b/prosopopee/themes/material/templates/sections/pictures-group.html
@@ -2,19 +2,20 @@
     <div class="row baguette">
         {% for line in section.images %}
         {% for image in line %}
+        {% set caption = image.text %}
         {% set image = Image(image) %}
         {{ image.copy() }}
         {% set plop =  12 // loop.length %}
         <div class="col m{{ plop }} l{{ plop }}">
             <div class="card">
-                <div class="card-image hide-on-med-and-down">
-                    <a href="{{ image }}">
-                        <img class="responsive-img" src="{{ image.generate_thumbnail("x600") }}">
-                    </a>
-                </div>
-                <div class="card-image hide-on-large-only">
-                    <a href="{{ image.generate_thumbnail("x1024") }}">
+                <div class="card-image caption">
+                    <a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}>
                         <img class="responsive-img" src="{{ image.generate_thumbnail("x600") }}">
+                        {% if caption %}
+                        <div class="caption__overlay card-panel center">
+                            <h5 class="black-white">{{ caption }}</h5>
+                        </div>
+                        {% endif %}
                     </a>
                 </div>
             </div>