From a5946f996f31d5020aec887a2500a49edef69940 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne@peacefrogs.net>
Date: Mon, 6 Apr 2020 18:10:42 +0200
Subject: Layout: use float position for images

---
 scss/pergamon.scss                         | 11 ++++
 showcase/templates/showcase/item-find.html | 93 +++++++++++++++---------------
 showcase/templates/showcase/show_case.html | 10 +---
 3 files changed, 60 insertions(+), 54 deletions(-)

diff --git a/scss/pergamon.scss b/scss/pergamon.scss
index d8ab1a3..d50e31f 100644
--- a/scss/pergamon.scss
+++ b/scss/pergamon.scss
@@ -82,4 +82,15 @@ main.container{
     margin-bottom: 0;
 }
 
+.show-case{
+	max-width: 1024px;
+	background-color: #fff;
+	border-radius: 4px;
+}
+
+.card-body.legend {
+	padding: 0.5rem;
+	font-size: 0.9em;
+}
+
 @import "custom_post";
\ No newline at end of file
diff --git a/showcase/templates/showcase/item-find.html b/showcase/templates/showcase/item-find.html
index 403f524..0659e5f 100644
--- a/showcase/templates/showcase/item-find.html
+++ b/showcase/templates/showcase/item-find.html
@@ -39,58 +39,57 @@
 </div>
 
 <hr>
-<div class="card clearfix show-case-detail">
-    <div class="card-body">
-      <div class="row">
+<div class="row justify-content-md-center clearfix show-case-detail show-case">
+    <div class="p-3 show-case">
         {% if data.images.0.thumbnail %}
-        <div class="col-12 col-lg-6 text-center">
-            <img src="{{data.images.0.thumbnail}}" class="img-fluid img-thumbnail">
+        <div class="mw-50 float-md-left text-center">
+            <div class="p-3">
+                <img src="{{data.images.0.thumbnail}}" class="rounded w-100">
+                {% if data.images.0.authors %}
+                <div class="card-body legend"><em>&copy; {% for author in data.images.0.authors %}
+                   {% if author.type == "Auteur principal" %}{% if forloop.counter0 %} ; {% endif %}{{author.person}}{% endif %}
+                {% endfor %}</em></div>{% endif %}
+            </div>
         </div>
         {% endif %}
-        {% if data.images.0.thumbnail %}
-        <div class="col-12 col-lg-6">
-        {% else %}
-        <div class="col-12">
-        {% endif %}
-            <h3 class="pt-2 mb-3 text-right">{{data.denomination}}</h3>
+        <h3 class="pt-2 mb-3 text-right">{{data.denomination}}</h3>
 
-            <div>
-                {% if data.public_description %}
-                <div class="description">{{data.public_description|linebreaks}}</div>
-                {% elif data.description %}
-                <div class="description">{{data.description|linebreaks}}</div>
-                {% endif %}
-                {% if data.object_types|length %}
-                <p><em>{% trans "Object type(s):" %}</em> {{data.object_types|join:" ; "}}</p>
-                {% endif %}
-                {% if data.materials|length %}
-                <p><em>{% trans "Material(s):" %}</em> {{data.materials|join:" ; "}}</p>
-                {% endif %}
-                {% if data.datings|length %}<p><em>{% trans "Period(s):" %}</em>
-                {% for dating in data.datings %}{% if forloop.counter0 %} ; {% endif %}{{dating}}{% endfor %}
-                </p>{% endif %}
-                {% if data.free_id %}<p><small><em>{% trans "ID:" %}</em> {{data.free_id}}</small></p>{% endif %}
-            </div>
+        <div class="p-3">
+            {% if data.public_description %}
+            <div class="description">{{data.public_description|linebreaks}}</div>
+            {% elif data.description %}
+            <div class="description">{{data.description|linebreaks}}</div>
+            {% endif %}
+            {% if data.object_types|length %}
+            <p><em>{% trans "Object type(s):" %}</em> {{data.object_types|join:" ; "}}</p>
+            {% endif %}
+            {% if data.materials|length %}
+            <p><em>{% trans "Material(s):" %}</em> {{data.materials|join:" ; "}}</p>
+            {% endif %}
+            {% if data.datings|length %}<p><em>{% trans "Period(s):" %}</em>
+            {% for dating in data.datings %}{% if forloop.counter0 %} ; {% endif %}{{dating}}{% endfor %}
+            </p>{% endif %}
+            {% if data.free_id %}<p><small><em>{% trans "ID:" %}</em> {{data.free_id}}</small></p>{% endif %}
+        </div>
 
-            <div class="mt-2 bs-callout bs-callout-xl bs-callout-primary">
-                {% with data.base_finds.0.context_record.site as site %}
-                {% with data.base_finds.0.context_record.operation as operation %}
-                <h4>{% trans "Archaeological site / Operation" %}</h4>
-                <p>{{site.name}} {% if site.discovery_date %}({{site.discovery_date}}){% endif %}
-                <br><small>{{site.towns.0}}</small></p>
-                {% if operation.year %}<p><em>{% trans "Year of the survey:" %}</em> {{operation.year}}</p>{% endif %}
-                {% if site.shipwreck_name %}<p><em>{% trans "Shipwreck" %} : </em>{{site.shipwreck_name}}
-                {% if site.sinking_date %} <em>{% trans "sinking" %}</em> {{site.sinking_date}}{% endif %}</p>
-                {% endif %}
-                {% if site.periods|length %}
-                <p><em>{% trans "Period(s):" %}</em> {{site.periods|join:" ; "}}</p>
-                {% endif %}
-                {% if site.remains|length %}
-                <p><em>{% trans "Remain(s):" %}</em> {{site.remains|join:" ; "}}</p>
-                {% endif %}
-                {% endwith %}
-                {% endwith %}
-            </div>
+        <div class="mt-2 bs-callout bs-callout-xl bs-callout-primary">
+            {% with data.base_finds.0.context_record.site as site %}
+            {% with data.base_finds.0.context_record.operation as operation %}
+            <h4>{% trans "Archaeological site / Operation" %}</h4>
+            <p>{{site.name}} {% if site.discovery_date %}({{site.discovery_date}}){% endif %}
+            <br><small>{{site.towns.0}}</small></p>
+            {% if operation.year %}<p><em>{% trans "Year of the survey:" %}</em> {{operation.year}}</p>{% endif %}
+            {% if site.shipwreck_name %}<p><em>{% trans "Shipwreck" %} : </em>{{site.shipwreck_name}}
+            {% if site.sinking_date %} <em>{% trans "sinking" %}</em> {{site.sinking_date}}{% endif %}</p>
+            {% endif %}
+            {% if site.periods|length %}
+            <p><em>{% trans "Period(s):" %}</em> {{site.periods|join:" ; "}}</p>
+            {% endif %}
+            {% if site.remains|length %}
+            <p><em>{% trans "Remain(s):" %}</em> {{site.remains|join:" ; "}}</p>
+            {% endif %}
+            {% endwith %}
+            {% endwith %}
         </div>
     </div>
 </div>
diff --git a/showcase/templates/showcase/show_case.html b/showcase/templates/showcase/show_case.html
index acc599a..f9888c6 100644
--- a/showcase/templates/showcase/show_case.html
+++ b/showcase/templates/showcase/show_case.html
@@ -8,18 +8,14 @@
 
 
 <div class="row justify-content-md-center">
-<div class="card" style="max-width: 1024px;">
-  <div class="row no-gutters">
-    <div class="col-md-6">
+  <div class="p-2 show-case">
+    <div class="p-3 w-50 float-left">
       {% image page.image original as head_image %}
       <img src="{{ head_image.url }}" alt="{{ head_image.alt }}" class="card-img" />
     </div>
-    <div class="col-md-6">
-      <div class="card-body">
+    <div class="p-3">
         {{ page.body|richtext }}
-      </div>
     </div>
-  </div>
 </div>
 </div>
 
-- 
cgit v1.2.3