From c989b2480b48700d709ea6ea6dcb128b06ddf797 Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne@peacefrogs.net>
Date: Thu, 22 Aug 2019 08:34:48 +0200
Subject: Card layout for showcases

---
 scss/ishtar_public.scss                    |  5 +++
 showcase/templates/showcase/show_case.html | 50 +++++++++++++++++++++++-------
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/scss/ishtar_public.scss b/scss/ishtar_public.scss
index 62cf259..22f482c 100644
--- a/scss/ishtar_public.scss
+++ b/scss/ishtar_public.scss
@@ -25,6 +25,7 @@
     position: relative;
     overflow: hidden;
     min-height: 250px;
+    margin-bottom: 0;
 }
 
 .jumbotron h2{
@@ -51,4 +52,8 @@
     opacity: 0.9;
 }
 
+main.container{
+    margin-top: 2rem;
+}
+
 @import "custom_post";
\ No newline at end of file
diff --git a/showcase/templates/showcase/show_case.html b/showcase/templates/showcase/show_case.html
index b6a4afa..6a2f13b 100644
--- a/showcase/templates/showcase/show_case.html
+++ b/showcase/templates/showcase/show_case.html
@@ -4,17 +4,43 @@
 {% block body_class %}template-showcase{% endblock %}
 
 {% block content %}
-{% image page.image width-500 %}
-{{ page.body|richtext }}
-{% if page.data %}<ul>
-{% for item in page.data %}
-    <li>
-        <a href="{% url 'display-item' page.slug forloop.counter0 %}">
-            {{item.denomination}}
-            <img src="{{item.images.0.thumbnail}}">
-        </a>
-    </li>
-{% endfor %}
-</ul>{% endif %}
+
+<div class="row justify-content-md-center">
+<div class="card" style="max-width: 1024px;">
+  <div class="row no-gutters">
+    <div class="col-md-6">
+      {% 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">
+        <h5 class="card-title">{{page.title}}</h5>
+        {{ page.body|richtext }}
+      </div>
+    </div>
+  </div>
+</div>
+</div>
+
+<hr>
+
+{% if page.data %}
+<div class="row justify-content-md-center">
+    {% for item in page.data %}
+    <div class="col-md-auto m-1" style="width: 12rem;">
+    <div class="card">
+    {% if item.images.0.thumbnail %}
+        <img src="{{item.images.0.thumbnail}}" class="card-img-top">
+    {% endif %}
+    <div class="card-body">
+      <a href="{% url 'display-item' page.slug forloop.counter0 %}">
+        {{item.denomination}}
+      </a>
+    </div>
+    </div>
+    </div>
+    {% endfor %}
+</div>
+{% endif %}
 
 {% endblock %}
-- 
cgit v1.2.3