From e6bfbef4b98dff168812db52339b3e2cc37cc8d5 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne@peacefrogs.net>
Date: Tue, 27 Aug 2019 14:46:54 +0200
Subject: Callout for operation/site detail

---
 scss/bootstrap-callout.scss                | 68 ++++++++++++------------------
 scss/pergamon.scss                         |  1 +
 showcase/templates/showcase/item-find.html | 20 ++++-----
 3 files changed, 38 insertions(+), 51 deletions(-)

diff --git a/scss/bootstrap-callout.scss b/scss/bootstrap-callout.scss
index 1364867..1dc08a1 100644
--- a/scss/bootstrap-callout.scss
+++ b/scss/bootstrap-callout.scss
@@ -1,77 +1,63 @@
 .bs-callout {
       padding: 20px;
-        margin: 20px 0;
-          border: 1px solid #eee;
-            border-left-width: 5px;
-              border-radius: 4px;
-                margin-left: 50px;
+      margin: 20px 0;
+      border: 1px solid #eee;
+      border-left-width: 5px;
+      border-radius: 4px;
+      margin-left: 50px;
 }
+
 .bs-callout-xl {
       margin-left: 0px;
 }
+
 .bs-callout-lg {
       margin-left: 50px;
 }
+
 .bs-callout-md {
       margin-left: 100px;
 }
+
 .bs-callout-sm {
       margin-left: 150px;
 }
+
 .bs-callout-xs {
       margin-left: 200px;
 }
+
 .bs-callout h4 {
       margin-top: 0;
-        margin-bottom: 5px;
+      margin-bottom: 5px;
 }
+
 .bs-callout p:last-child {
       margin-bottom: 0;
 }
+
 .bs-callout code {
       border-radius: 4px;
 }
+
 .bs-callout+.bs-callout {
       margin-top: -5px;
 }
+
 .bs-callout-default {
       border-left-color: #777;
-        background-color: #f7f7f9;
+      background-color: #f7f7f9;
 }
+
 .bs-callout-default h4 {
       color: #777;
 }
-.bs-callout-primary {
-      border-left-color: #428bca;
-}
-.bs-callout-primary h4 {
-      color: #428bca;
-}
-.bs-callout-success {
-      border-left-color: #5cb85c;
-        background-color: #efffe8;
-}
-.bs-callout-success h4 {
-      color: #5cb85c;
-}
-.bs-callout-danger {
-      border-left-color: #d9534f;
-        background-color: #fcf2f2;
-}
-.bs-callout-danger h4 {
-      color: #d9534f;
-}
-.bs-callout-warning {
-      border-left-color: #f0ad4e;
-        background-color: #fefbed;
-}
-.bs-callout-warning h4 {
-      color: #f0ad4e;
-}
-.bs-callout-info {
-      border-left-color: #5bc0de;
-        background-color: #f0f7fd;
-}
-.bs-callout-info h4 {
-      color: #5bc0de;
-}
+
+@each $color, $value in $theme-colors {
+      .bs-callout-#{$color} {
+            border-left-color: $value;
+      }
+      .bs-callout-#{$color} h4 {
+            color: $value;
+      }
+}
\ No newline at end of file
diff --git a/scss/pergamon.scss b/scss/pergamon.scss
index 452e1d5..67b8e85 100644
--- a/scss/pergamon.scss
+++ b/scss/pergamon.scss
@@ -1,5 +1,6 @@
 @import "custom";
 @import "bootstrap-src/scss/bootstrap";
+@import "bootstrap-callout";
 
 body{
     background-color: #eee;
diff --git a/showcase/templates/showcase/item-find.html b/showcase/templates/showcase/item-find.html
index 6d67ac5..e3f0f43 100644
--- a/showcase/templates/showcase/item-find.html
+++ b/showcase/templates/showcase/item-find.html
@@ -4,7 +4,7 @@
 {% block body_class %}template-showcase-item{% endblock %}
 
 {% block content %}
-<h3 class="mb-0"><a href="/{{page.slug}}">{{page.title}}</a></h3>
+<h2 class="mb-0"><a href="/{{page.slug}}">{{page.title}}</a></h2>
 <div class="font-weight-light mb-2">{{current_number_1}} / {{total}}</div>
 
 <div class="d-flex justify-content-between">
@@ -46,39 +46,39 @@
             <img src="{{data.images.0.thumbnail}}" class="img-fluid img-thumbnail">
         </div>
         {% endif %}
-        <h4 class="pt-2 text-right">{{data.denomination}}</h4>
+        <h3 class="pt-2 text-right">{{data.denomination}}</h3>
 
-        <div>
+        <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 %}
+            {% if data.object_types|length %}
             <p><em>{% trans "Object type:" %}</em> {{data.object_types|join:" ; "}}</p>
             {% endif %}
-            {% if data.materials %}
+            {% if data.materials|length %}
             <p><em>{% trans "Materials:" %}</em> {{data.materials|join:" ; "}}</p>
             {% endif %}
-            {% if data.datings %}<p><em>{% trans "Period(s):" %}</em>
+            {% 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="mt-2">
+        <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 %}
-            <h5>{% trans "Archaeological site / Operation" %}</h5>
+            <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 %}
+            {% if site.periods|length %}
             <p><em>{% trans "Period(s):" %}</em> {{site.periods|join:" ; "}}</p>
             {% endif %}
-            {% if site.remains %}
+            {% if site.remains|length %}
             <p><em>{% trans "Remain(s):" %}</em> {{site.remains|join:" ; "}}</p>
             {% endif %}
             {% endwith %}
-- 
cgit v1.2.3