From 811056d9011917c8ea6f5d105cfc2901f4b41cee Mon Sep 17 00:00:00 2001
From: jannisp <jannisp@student.ethz.ch>
Date: Mon, 26 Apr 2021 18:54:00 +0200
Subject: [PATCH] use bootstrap card to display offerings

---
 templates/app/index.html.twig | 27 +++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/templates/app/index.html.twig b/templates/app/index.html.twig
index aa0d3fa..6d68183 100644
--- a/templates/app/index.html.twig
+++ b/templates/app/index.html.twig
@@ -1,17 +1,24 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-    {% if offerings|length > 0 %}
-        {% for offering in offerings %}
-            {% if offering.photoFilename %}
-                <img src="{{ asset('uploads/photos/' ~ offering.photofilename) }}" />
-            {% endif %}
 
-            <h4>{{ offering.title }}</h4>
-            <small>
-                {{ offering.createdAt|format_datetime('medium', 'short') }}
-            </small>
-        {% endfor %}
+    <h1>Offerings</h1>
+    {% if offerings|length > 0 %}
+        <div class="card-deck">
+            {% for offering in offerings %}
+            <a href="#">
+                    <div class="card" style="width: 20rem;">
+                        {% if offering.photoFilename %}
+                            <img class="card-img-top" src="{{ asset('uploads/photos/' ~ offering.photofilename) }}" />
+                        {% endif %}
+                        <div class="card-body">
+                            <h5 class="card-title">{{ offering.title }}</h5>
+                            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+                        </div>
+                    </div>
+                </a>
+            {% endfor %}
+        </div>
     {% else %}
         <p>There are currently no active listings</p>
     {% endif %}