rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2024-11-29 10:24:20 +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">
<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">
<span className="trigger"><PlusCircle size={16} weight="light" /></span>
<div className="content">
@ -56,6 +57,7 @@ export const OrderItem: React.FC<OrderItemProps> = ({ order, currentUser }) => {
{FormatLib.date(order.updated_at)}
</div>
</div>
</p>
</div>
</div>
<div className='price'>

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

@ -1,8 +1,8 @@
.order-item {
width: 100%;
display: grid;
grid-template-rows: repeat(2, min-content);
grid-template-columns: 2fr 1fr 10ch;
grid-template-rows: repeat(3, min-content);
grid-template-columns: 1fr 1fr;
gap: 1.6rem 2.4rem;
align-items: center;
padding: 1.6rem;
@ -52,7 +52,7 @@
}
}
.price {
grid-area: 1 / 3 / 3 / 4;
grid-area: 3 / 1 / 4 / 2;
display: flex;
flex-direction: column;
justify-self: flex-end;
@ -62,7 +62,25 @@
}
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; }
}
@media (min-width: 1440px) {
grid-auto-flow: column;