From db9316b58010ca0020f52a61b703ebaa5d8546e7 Mon Sep 17 00:00:00 2001
From: thisfro <jannis@thisfro.ch>
Date: Tue, 4 May 2021 14:28:18 +0200
Subject: [PATCH] styling offer page

---
 assets/styles/app.scss        | 10 +++++++
 templates/app/offer.html.twig | 56 +++++++++++++++++------------------
 2 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
index ccb0051..aa11425 100644
--- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -26,4 +26,14 @@ $primary: darken(#005035, 20%);
 
 .listings-container {
     padding-top: 2rem;
+}
+
+.img-container {
+    width: 50%;
+    min-width: 20rem;
+}
+
+.offer-info {
+    width: 50%;
+    min-width: 20rem;;
 }
\ No newline at end of file
diff --git a/templates/app/offer.html.twig b/templates/app/offer.html.twig
index 4f22e69..b6afcd0 100644
--- a/templates/app/offer.html.twig
+++ b/templates/app/offer.html.twig
@@ -3,34 +3,32 @@
 {% block body %}
     <h1 class="mb-3">{{ offer.title }}</h1>
 
-    <div class="media">
-        <img class="mr-3 w-25 rounded" alt="Generic placeholder image" src="{{ asset('uploads/photos/' ~ offer.photofilename) }}">
-        <div class="media-body">
-            <h3>
-                Description
-            </h3>
-            <p>
-            {{ offer.description }}
-          </p>
-          <h3>
-             From
-          </h3>
-          <p>{{ offer.byUser }} in {{ offer.zipCode }}</p>
-          <h3>Wishes</h3>
-          <p>{{ offer.byUser }} would like some of the following in return:</p>
-          <div class="mb-3">
-            {% if wishes == [] %}
-                <div class="alert alert-warning" role="alert">
-                    There are currently no wishes!
-                </div>
-            {% else %}
-                <ul class="list-group">
-                {% for wish in wishes %}
-                    <li class="list-group-item"> {{ wish.title }}</li>
-                {% endfor %}
-                </ul>
-            {% endif %}
-            </div>
+    <div class="offer d-flex flex-wrap justify-content-around">
+        <div class="p-3 img-container">
+            <img class="mb-3 img-fluid rounded" alt="Generic placeholder image" src="{{ asset('uploads/photos/' ~ offer.photofilename) }}">
         </div>
-      </div>
+        <div class="offer-info p-3">
+          <h3>Description</h3>
+          <p>{{ offer.description }}</p>
+          <h3>From</h3>
+          <p>{{ offer.byUser }} in {{ offer.zipCode }}</p>
+        </div>
+    </div>
+
+    <h3>Wishes</h3>
+    <p>{{ offer.byUser }} would like some of the following in return:</p>
+    <div class="mb-3">
+        {% if wishes == [] %}
+            <div class="alert alert-warning" role="alert">
+                There are currently no wishes!
+            </div>
+        {% else %}
+            <ul class="list-group">
+            {% for wish in wishes %}
+                <li class="list-group-item"> {{ wish.title }}</li>
+            {% endfor %}
+            </ul>
+        {% endif %}
+        </div>
+        <button class="btn btn-primary">Offer trade</button>
 {% endblock %}
\ No newline at end of file