[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
parent
80539f3e36
commit
c3173a32c9
2 changed files with 74 additions and 79 deletions
|
|
@ -328,3 +328,41 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -46,85 +46,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<div class="card-meta-compact mt-3">
|
<t t-call="website_sale_aplicoop.eskaera_order_card_meta" />
|
||||||
<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>
|
|
||||||
<a t-attf-href="/eskaera/{{ order.id }}" class="btn btn-primary btn-sm" aria-label="Browse products for {{ order.name }}">
|
<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" />
|
<i class="fa fa-shopping-bag" aria-hidden="true" t-translation="off" />
|
||||||
<span>Browse Products</span>
|
<span>Browse Products</span>
|
||||||
|
|
@ -190,6 +112,41 @@
|
||||||
<template id="confirm_pickup_label_snippet" name="Confirm Pickup Label Snippet">
|
<template id="confirm_pickup_label_snippet" name="Confirm Pickup Label Snippet">
|
||||||
<t t-esc="_('Pickup Day')" />
|
<t t-esc="_('Pickup Day')" />
|
||||||
</template>
|
</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">
|
<template id="order_header" name="Order Header">
|
||||||
<div t-att-class="header_class or 'eskaera-order-header'">
|
<div t-att-class="header_class or 'eskaera-order-header'">
|
||||||
<div class="d-flex gap-5 align-items-center mb-4">
|
<div class="d-flex gap-5 align-items-center mb-4">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue