Better layout for find page

1 files changed, 43 insertions, 36 deletions

diff --git a/showcase/templates/showcase/item-find.html b/showcase/templates/showcase/item-find.html
index e3f0f43..e43b1b5 100644
--- a/showcase/templates/showcase/item-find.html
+++ b/showcase/templates/showcase/item-find.html
@@ -41,48 +41,55 @@
 <hr>
 <div class="card clearfix show-case-detail">
     <div class="card-body">
+      <div class="row">
         {% if data.images.0.thumbnail %}
-        <div class="float-left pr-2" style="max-width:50%">
+        <div class="col-12 col-lg-6 text-center">
             <img src="{{data.images.0.thumbnail}}" class="img-fluid img-thumbnail">
         </div>
         {% endif %}
-        <h3 class="pt-2 text-right">{{data.denomination}}</h3>
+        {% if data.images.0.thumbnail %}
+        <div class="col-12 col-lg-6">
+        {% else %}
+        <div class="col-12">
+        {% endif %}
+            <h3 class="pt-2 text-right">{{data.denomination}}</h3>
 
-        <div class="float-left" style="max-width:50%">
-            {% 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:" %}</em> {{data.object_types|join:" ; "}}</p>
-            {% endif %}
-            {% if data.materials|length %}
-            <p><em>{% trans "Materials:" %}</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.period}}{% endfor %}
-            </p>{% endif %}
-        </div>
+            <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:" %}</em> {{data.object_types|join:" ; "}}</p>
+                {% endif %}
+                {% if data.materials|length %}
+                <p><em>{% trans "Materials:" %}</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.period}}{% endfor %}
+                </p>{% endif %}
+            </div>
 
-        <div class="float-left mt-2 bs-callout bs-callout-xl bs-callout-primary" style="max-width:50%">
-            {% 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 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>
 </div>