From 34e3c4b5c811bd424164c72c89a4050b1019bc7c Mon Sep 17 00:00:00 2001
From: Richard Thier <u9vata@gmail.com>
Date: Wed, 4 Mar 2020 00:53:06 +0100
Subject: [PATCH] First working version. Without further parameters it uses big
 polaroid images. Parameters not tested; TODO: likely sizing should be made
 mandatory when positioning and we should add min-height or height of the link
 based on the image and text sizes calculated in python jinja2 code.

---
 .../themes/exposure/static/css/style.css      | 29 ++++++++++++++-----
 ...olariod-group.html => polaroid-group.html} | 21 ++++++++++----
 2 files changed, 36 insertions(+), 14 deletions(-)
 rename prosopopee/themes/exposure/templates/sections/{polariod-group.html => polaroid-group.html} (72%)

diff --git a/prosopopee/themes/exposure/static/css/style.css b/prosopopee/themes/exposure/static/css/style.css
index 9a5549c..8ca8e0b 100644
--- a/prosopopee/themes/exposure/static/css/style.css
+++ b/prosopopee/themes/exposure/static/css/style.css
@@ -553,13 +553,17 @@ nav ul ul ul li {
 /* END: navmenu */
 
 /* START: polaroid-group */
+.polaroid-line {
+    width: 70vw;
+    margin: auto;
+}
+
 a.polaroid {
     display: block;
     padding: 10px 10px 25px 10px;
     border: 2px solid #BFBFBF;
-    /*background-color: white;*/
+    background-color: white;
     z-index: 2;
-    font-size: 0.7em;
     /* Shadows around the box */
     -webkit-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
     -moz-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
@@ -571,23 +575,32 @@ a.polaroid {
     -ms-transition: width 1s, height 1s, -ms-transform 1s;
     -webkit-transition: width 1s, height 1s, -webkit-transform 1s;
     -o-transition: width 1s, height 1s,-o-transform 1s;
-
+    text-align: center;
 }
 
 /* Remove rotation and make it visible (z-index) */
 a.polaroid:hover,
 a.polaroid:focus,
 a.polaroid:active {
-        z-index: 100;
-        -webkit-transform: rotate(0deg);
-        -moz-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        transform: rotate(0deg);
+		z-index: 100 !important;
+		border-color: #BFBFBF;
+		-webkit-box-shadow: 5px 5px 6px rgba(149,150,151,0.3); /* Same as above */
+		-moz-box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
+		box-shadow: 5px 5px 6px rgba(149,150,151,0.3);
+        /* The "!important" keywords is needed to override higher preference of generated inline styling! */
+		-webkit-transform: rotate(0deg) !important; /* Removes rotation through a transition */
+		-moz-transform: rotate(0deg) !important;
+		-ms-transform: rotate(0deg) !important;
+		transform: rotate(0deg) !important;
 }
 
 a.polaroid img {
         border: none;
         display: block;
+        min-width: 10vw;
+        max-width: 100%;
+        max-height: 100%;
+        margin: auto; /* Centers wth display: block */
 }
 
 /* END: polaroid-group */
diff --git a/prosopopee/themes/exposure/templates/sections/polariod-group.html b/prosopopee/themes/exposure/templates/sections/polaroid-group.html
similarity index 72%
rename from prosopopee/themes/exposure/templates/sections/polariod-group.html
rename to prosopopee/themes/exposure/templates/sections/polaroid-group.html
index c319b87..5ce2e37 100644
--- a/prosopopee/themes/exposure/templates/sections/polariod-group.html
+++ b/prosopopee/themes/exposure/templates/sections/polaroid-group.html
@@ -2,27 +2,35 @@
 <div class="bg-section" style="background: {{ section.background }};">
 {% endif %}
     <section class="polaroid-group baguette" {% if section.css %}style="{{ section.css }}"{% endif %} >
-    <div class="polaroid-line" style="width: 100%; height: 33vh;">
-    {% for image in line %}
+    <div class="polaroid-line">
+    {% for image in section.images %}
         {% set caption = image.text %}
+        {% set custpos = false %}
         {% if image.angle %}
            {% set angle = image.angle %}
         {% else %}
-            {% set angle = 20 %}
+            {% if (loop.index%2 == 1) %}
+                {% set angle = 15 %}
+            {% else %}
+                {% set angle = -15 %}
+            {% endif %}
         {% endif %}
         {% if image.x %}
             {% set x = image.x %}
+            {% set custpos = true %}
         {% else %}
             {% set x = "0px" %}
+        {% endif %}
         {% if image.y %}
             {% set y = image.y %}
+            {% set custpos = true %}
         {% else %}
             {% set y = "0px" %}
         {% endif %}
         {% if image.z %}
             {% set z = image.z %}
         {% else %}
-            {% set z = 2 %}
+            {% set z = loop.index %}
         {% endif %}
         {% set image = Image(image) %}
         {{ image.copy() }}
@@ -33,7 +41,7 @@
             data-at-1366="{{ image.generate_thumbnail("x1366") }}"
             data-at-1920="{{ image.generate_thumbnail("x1920") }}"
             class="polaroid"
-            style="left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);">
+            style="{% if custpos %}position:absolute;{% endif %}left: {{ x }}; top: {{ y }}; z-index: {{ z }}; -webkit-transform: rotate({{ angle }}deg); -moz-transform: rotate({{ angle }}deg); transform: rotate({{ angle }}deg);">
                 {% if caption %}
                 <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="{{ caption }}">
                 <h5 class="polaroid__title">{{ caption }}</h5>
@@ -41,8 +49,9 @@
                 <img class="lazy" src="" data-original="{{ image.generate_thumbnail("x450") }}" alt="unnamed image">
                 {% endif %}
         </a>
-    </div>
     {% endfor %}
+    </div>
+    </section>
 {% if section.background %}
 </div>
 {% endif %}