styling offer page

This commit is contained in:
Jannis Portmann 2021-05-04 14:28:18 +02:00
parent 75142b9347
commit db9316b580
2 changed files with 37 additions and 29 deletions

View file

@ -27,3 +27,13 @@ $primary: darken(#005035, 20%);
.listings-container { .listings-container {
padding-top: 2rem; padding-top: 2rem;
} }
.img-container {
width: 50%;
min-width: 20rem;
}
.offer-info {
width: 50%;
min-width: 20rem;;
}

View file

@ -3,19 +3,18 @@
{% block body %} {% block body %}
<h1 class="mb-3">{{ offer.title }}</h1> <h1 class="mb-3">{{ offer.title }}</h1>
<div class="media"> <div class="offer d-flex flex-wrap justify-content-around">
<img class="mr-3 w-25 rounded" alt="Generic placeholder image" src="{{ asset('uploads/photos/' ~ offer.photofilename) }}"> <div class="p-3 img-container">
<div class="media-body"> <img class="mb-3 img-fluid rounded" alt="Generic placeholder image" src="{{ asset('uploads/photos/' ~ offer.photofilename) }}">
<h3> </div>
Description <div class="offer-info p-3">
</h3> <h3>Description</h3>
<p> <p>{{ offer.description }}</p>
{{ offer.description }} <h3>From</h3>
</p>
<h3>
From
</h3>
<p>{{ offer.byUser }} in {{ offer.zipCode }}</p> <p>{{ offer.byUser }} in {{ offer.zipCode }}</p>
</div>
</div>
<h3>Wishes</h3> <h3>Wishes</h3>
<p>{{ offer.byUser }} would like some of the following in return:</p> <p>{{ offer.byUser }} would like some of the following in return:</p>
<div class="mb-3"> <div class="mb-3">
@ -31,6 +30,5 @@
</ul> </ul>
{% endif %} {% endif %}
</div> </div>
</div> <button class="btn btn-primary">Offer trade</button>
</div>
{% endblock %} {% endblock %}