[FIX] website_event_booth: form layout

Address a minor layout issue on desktop devices.

Note: "Stable friendly" fix. The 'booth_category.description' field
output, for example, should be moved outside the `card-body` element.

task-3718417
part of task-3698364

Part-of: odoo/odoo#152434
This commit is contained in:
stefanorigano (SRI)
2024-03-21 19:54:27 +00:00
parent bba71b091e
commit 9e98d50e3c
2 changed files with 7 additions and 7 deletions
@@ -9,7 +9,7 @@
<form method="post"
id="o_wbooth_contact_details_form"
t-att-data-event-id="event.id"
class="col-12 js_website_submit_form">
class="col-12 col-lg-9 js_website_submit_form">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<input type="hidden" name="booth_category_id" t-att-value="booth_category.id"/>
<input type="hidden" name="event_booth_ids" t-att-value="event_booths.ids"/>
@@ -56,20 +56,20 @@
<t t-foreach="event.event_booth_category_ids" t-as="booth_category">
<t t-set="booth_category_unavailable" t-value="booth_category not in available_booth_category_ids"/>
<div class="col-md-6 col-lg-4 mb-4">
<label t-attf-class="d-block h-100 #{'o_wbooth_category_unavailable' if booth_category_unavailable else ''}">
<label t-attf-class="d-block h-100 #{'o_wbooth_category_unavailable overflow-hidden' if booth_category_unavailable else ''}">
<input type="radio" name="booth_category_id" t-att-value="booth_category.id" t-att-disabled="booth_category_unavailable"
t-att-checked="booth_category.id == selected_booth_category_id"/>
<div class="card h-100">
<div t-field="booth_category.image_1920" class="card-img-top border-bottom"
t-options='{"widget": "image", "qweb_img_responsive": False, "class": "img img-fluid h-100 w-100 mw-100", "style": "max-height: 208px; min-height: 208px; object-fit: cover"}'/>
<div class="card-body">
<h5 name="booth_category_name" class="card-title" t-out="booth_category.name"/>
<div class="card-body d-flex flex-wrap w-100 gap-2 justify-content-between flex-grow-0 pb-0">
<h5 name="booth_category_name" class="card-title my-0" t-out="booth_category.name"/>
<span class="booth_category_price"></span>
<div class="mx-n3 small" t-attf-id="o_wbooth_booth_description_#{booth_category.id}"
<div class="flex-basis-100 flex-grow-1 pb-2 mx-n3 small" t-attf-id="o_wbooth_booth_description_#{booth_category.id}"
t-field="booth_category.description"/>
</div>
</div>
<div t-if="booth_category_unavailable" class="o_ribbon_right bg-danger">
<div t-if="booth_category_unavailable" class="o_ribbon_right text-bg-danger">
<span class="text-nowrap">Sold Out</span>
</div>
</label>
@@ -101,7 +101,7 @@
</div>
</div>
<div class="my-3" name="booth_registration_submit">
<div class="d-flex align-items-center justify-content-end pt-3 border-top gap-2 mt-4 mb-5">
<div class="d-flex align-items-center justify-content-end pt-3 gap-2 mt-4 mb-5">
<button type="submit" class="o_wbooth_registration_submit btn btn-primary btn-block" disabled="true">
<span>Book my Booth(s)</span>
</button>