rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-02-17 11:54:22 +01:00
Code Issues Releases Activity

(ui) Fix order-item layout

Browse Source
This commit is contained in:
vincent 2022-09-29 11:36:56 +02:00
parent a30eac10de
commit 1425e39183
2 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/frontend/src/javascript/components/store/order-item.tsx
View File

@ -48,7 +48,8 @@ export const OrderItem: React.FC<OrderItemProps> = ({ order, currentUser }) => {
} }
<div className="date"> <div className="date">
<span>{t('app.shared.store.order_item.created_at')}</span> <span>{t('app.shared.store.order_item.created_at')}</span>
<div>{FormatLib.date(order.created_at)} <div>
<p>{FormatLib.date(order.created_at)}
<div className="fab-tooltip"> <div className="fab-tooltip">
<span className="trigger"><PlusCircle size={16} weight="light" /></span> <span className="trigger"><PlusCircle size={16} weight="light" /></span>
<div className="content"> <div className="content">
@ -56,6 +57,7 @@ export const OrderItem: React.FC<OrderItemProps> = ({ order, currentUser }) => {
{FormatLib.date(order.updated_at)} {FormatLib.date(order.updated_at)}
</div> </div>
</div> </div>
</p>
</div> </div>
</div> </div>
<div className='price'> <div className='price'>

24
app/frontend/src/stylesheets/modules/store/order-item.scss
View File

@ -1,8 +1,8 @@
.order-item { .order-item {
width: 100%; width: 100%;
display: grid; display: grid;
grid-template-rows: repeat(2, min-content); grid-template-rows: repeat(3, min-content);
grid-template-columns: 2fr 1fr 10ch; grid-template-columns: 1fr 1fr;
gap: 1.6rem 2.4rem; gap: 1.6rem 2.4rem;
align-items: center; align-items: center;
padding: 1.6rem; padding: 1.6rem;
@ -52,7 +52,7 @@
} }
} }
.price { .price {
grid-area: 1 / 3 / 3 / 4; grid-area: 3 / 1 / 4 / 2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-self: flex-end; justify-self: flex-end;
@ -62,7 +62,25 @@
} }
p { @include text-base(600); } p { @include text-base(600); }
} }
button {
grid-area: 3 / 2 / 4 / 3;
justify-self: flex-end;
width: 4rem;
padding: 0;
display: flex;
justify-content: center;
}
@media (min-width: 640px) {
grid-template-rows: repeat(2, min-content);
grid-template-columns: 2fr 1fr 10ch;
.ref { grid-area: 1 / 1 / 2 / 2; }
.fab-state-label { grid-area: 1 / 2 / 2 / 3; }
.client { grid-area: 2 / 1 / 3 / 2; }
.date { grid-area: 2 / 2 / 3 / 3; }
.price { grid-area: 1 / 3 / 3 / 4; }
button { grid-area: 1 / 4 / 3 / 5; } button { grid-area: 1 / 4 / 3 / 5; }
}
@media (min-width: 1440px) { @media (min-width: 1440px) {
grid-auto-flow: column; grid-auto-flow: column;