[IMP] website_sale_aplicoop: extract order card meta to separate template

- Create eskaera_order_card_meta template for cleaner code
- Simplify layout: horizontal meta-grid instead of table
- Fix t-if conditions on container elements
- Show only relevant fields: cutoff, pickup, delivery
- Add meta-grid CSS styles for compact horizontal display
- Home delivery badge only shown when enabled
This commit is contained in:
snt 2026-03-06 14:10:58 +01:00
parent 80539f3e36
commit c3173a32c9
2 changed files with 74 additions and 79 deletions

View file

@ -328,3 +328,41 @@
align-items: center;
gap: 0.5rem;
}
/* Meta grid - compact horizontal layout for order card metadata */
.meta-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 1rem;
justify-content: center;
align-items: center;
}
.meta-grid .meta-item {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
}
.meta-grid .meta-label {
font-weight: 600;
color: #374151;
min-width: auto;
}
.meta-grid .meta-value {
color: #6b7280;
}
.meta-grid .badge {
font-size: 0.75rem;
padding: 0.25rem 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.meta-grid .badge i {
font-size: 0.7rem;
}

View file

@ -46,85 +46,7 @@
</div>
</div>
</a>
<div class="card-meta-compact mt-3">
<table class="meta-table">
<tbody>
<tr class="meta-row">
<td class="meta-label-cell" t-if="order.type">
<span>Order Type</span>
</td>
<td class="meta-value-cell">
<t t-if="order.type">
<t t-esc="dict(order.fields_get('type', ['selection'])['type']['selection']).get(order.type, order.type)" />
</t>
</td>
</tr>
<tr class="meta-row">
<td class="meta-label-cell" t-if="order.period">
<span>Order Period</span>
</td>
<td class="meta-value-cell">
<t t-if="order.period">
<t t-esc="dict(order.fields_get('period', ['selection'])['period']['selection']).get(order.period, order.period)" />
</t>
</td>
</tr>
<tr class="meta-row">
<td class="meta-label-cell" t-if="order.cutoff_day">
<span>Cutoff Day</span>
</td>
<td class="meta-value-cell">
<t t-if="order.cutoff_day">
<t t-esc="day_names[int(order.cutoff_day) % 7]" /> - <t t-esc="order.cutoff_date.strftime('%d/%m')" />
</t>
</td>
</tr>
<tr class="meta-row">
<td class="meta-label-cell" t-if="order.pickup_day and order.pickup_date">
<span>Pickup Day</span>
</td>
<td class="meta-value-cell">
<t t-if="order.pickup_day and order.pickup_date">
<t t-esc="day_names[int(order.pickup_day) % 7]" /> - <t t-esc="order.pickup_date.strftime('%d/%m')" />
</t>
</td>
</tr>
<tr class="meta-row">
<td class="meta-label-cell" t-if="order.end_date">
<span>Open until</span>
</td>
<td class="meta-value-cell">
<t t-if="order.end_date">
<t t-esc="order.end_date.strftime('%d/%m/%Y')" />
</t>
</td>
</tr>
<tr class="meta-row">
<td class="meta-label-cell">
<span>Home Delivery</span>
</td>
<td class="meta-value-cell">
<t t-if="order.home_delivery">
<span class="badge bg-success">Yes</span>
</t>
<t t-else="">
<span class="badge bg-warning">No</span>
</t>
</td>
</tr>
<tr class="meta-row">
<td class="meta-label-cell" t-if="order.delivery_date and order.home_delivery">
<span>Delivery</span>
</td>
<td class="meta-value-cell">
<t t-if="order.delivery_date and order.home_delivery">
<t t-esc="day_names[order.delivery_date.weekday()]" /> - <t t-esc="order.delivery_date.strftime('%d/%m')" />
</t>
</td>
</tr>
</tbody>
</table>
</div>
<t t-call="website_sale_aplicoop.eskaera_order_card_meta" />
<a t-attf-href="/eskaera/{{ order.id }}" class="btn btn-primary btn-sm" aria-label="Browse products for {{ order.name }}">
<i class="fa fa-shopping-bag" aria-hidden="true" t-translation="off" />
<span>Browse Products</span>
@ -190,6 +112,41 @@
<template id="confirm_pickup_label_snippet" name="Confirm Pickup Label Snippet">
<t t-esc="_('Pickup Day')" />
</template>
<template id="eskaera_order_card_meta" name="Order Card Metadata">
<div class="card-meta-compact mt-3">
<div class="meta-grid">
<t t-if="order.cutoff_day and order.cutoff_date">
<div class="meta-item">
<span class="meta-label">Cutoff</span>
<span class="meta-value">
<t t-esc="day_names[int(order.cutoff_day) % 7]" /> <t t-esc="order.cutoff_date.strftime('%d/%m')" />
</span>
</div>
</t>
<t t-if="order.pickup_day and order.pickup_date">
<div class="meta-item">
<span class="meta-label">Pickup</span>
<span class="meta-value">
<t t-esc="day_names[int(order.pickup_day) % 7]" /> <t t-esc="order.pickup_date.strftime('%d/%m')" />
</span>
</div>
</t>
<t t-if="order.home_delivery and order.delivery_date">
<div class="meta-item">
<span class="meta-label">Delivery</span>
<span class="meta-value">
<t t-esc="day_names[order.delivery_date.weekday()]" /> <t t-esc="order.delivery_date.strftime('%d/%m')" />
</span>
</div>
</t>
<t t-if="order.home_delivery">
<div class="meta-item">
<span class="badge bg-success"><i class="fa fa-truck" /> Home Delivery</span>
</div>
</t>
</div>
</div>
</template>
<template id="order_header" name="Order Header">
<div t-att-class="header_class or 'eskaera-order-header'">
<div class="d-flex gap-5 align-items-center mb-4">