From 6e8e85b025824075c9f77ef62994a6c1b21ffaba Mon Sep 17 00:00:00 2001
From: Jannis Portmann <jannis@thisfro.ch>
Date: Mon, 26 Apr 2021 23:50:23 +0200
Subject: [PATCH] styling homepage

---
 assets/styles/app.scss        | 18 ++++++++++++++++++
 templates/app/index.html.twig |  8 ++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index 50dbcb0..b084480 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -5,3 +5,21 @@ $primary: darken(#428bca, 20%);
 
 // the ~ allows you to reference things in node_modules
 @import "~bootstrap/scss/bootstrap";
+
+.offering > img {
+    height: 15rem;
+    object-fit: cover;
+}
+
+.offering {
+    $card-height: 100%;
+    width: 20rem;
+}
+
+.username {
+    float: left;
+}
+
+.zip {
+    float: right;
+}
\ No newline at end of file
diff --git a/templates/app/index.html.twig b/templates/app/index.html.twig
index 6d68183..3a1f675 100644
--- a/templates/app/index.html.twig
+++ b/templates/app/index.html.twig
@@ -7,13 +7,17 @@
         <div class="card-deck">
             {% for offering in offerings %}
             <a href="#">
-                    <div class="card" style="width: 20rem;">
+                    <div class="card offering h-100">
                         {% 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>
+                            <p class="card-text">{{ offering.description }}</p>
+                        </div>
+                        <div class="card-footer">
+                            <p class="username">{{ offering.byUser }}</p>
+                            <p class="zip">{{ offering.zipCode }}</p>
                         </div>
                     </div>
                 </a>