thisfro/pflaenz.li-Symfony
Archived
1
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases 3 Wiki Activity

styling offer page

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

10
assets/styles/app.scss
View file

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

56
templates/app/offer.html.twig
View file

@ -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 %}