fregat/web-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refine order detail layout

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 15:21:05 +07:00
parent 2e3c64bc98
commit bb39642b67
5 changed files with 301 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
app/components/orders/OrderStatusTimelineCard.vue
View File

@@ -12,16 +12,6 @@ const isExpanded = ref(false);
const presentation = computed(() => getOrderStatusPresentation(props.status, props.createdAt, props.audience ?? 'client'));
function itemClass(state: 'done' | 'current' | 'upcoming') {
if (state === 'current') {
return 'bg-white shadow-[0_14px_28px_rgba(19,153,87,0.08)]';
}
if (state === 'done') {
return 'bg-white';
}
return 'bg-white';
}
function markerClass(state: 'done' | 'current' | 'upcoming') {
if (state === 'current') {
return 'bg-[#139957] ring-4 ring-[#dff4e8]';
@@ -31,6 +21,36 @@ function markerClass(state: 'done' | 'current' | 'upcoming') {
}
return 'bg-[#d8e4dd]';
}
function connectorClass(state: 'done' | 'current' | 'upcoming') {
if (state === 'done' || state === 'current') {
return 'bg-[#cfe5d7]';
}
return 'bg-[#e4ece7]';
}
function titleClass(state: 'done' | 'current' | 'upcoming') {
if (state === 'current') {
return 'text-[#123824]';
}
if (state === 'done') {
return 'text-[#355947]';
}
return 'text-[#6a8a76]';
}
function noteClass(state: 'done' | 'current' | 'upcoming') {
if (state === 'current') {
return 'text-[#355947]';
}
if (state === 'done') {
return 'text-[#557562]';
}
return 'text-[#7d9688]';
}
</script>
<template>
@@ -62,22 +82,37 @@ function markerClass(state: 'done' | 'current' | 'upcoming') {
</div>
</button>
<div v-if="isExpanded" class="mt-5 space-y-3 pt-1">
<div v-if="isExpanded" class="mt-5 pt-1">
<div
v-for="stage in presentation.stages"
v-for="(stage, index) in presentation.stages"
:key="stage.code"
class="rounded-3xl p-4"
:class="itemClass(stage.state)"
class="flex gap-4"
>
<div class="flex items-start gap-3">
<span class="mt-1 h-3 w-3 shrink-0 rounded-full" :class="markerClass(stage.state)" />
<div class="min-w-0 flex-1 space-y-1">
<div class="flex flex-wrap items-center justify-between gap-2">
<p class="text-sm font-semibold text-[#123824]">{{ stage.label }}</p>
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#5c7b69]">{{ stage.dateLabel }}</p>
</div>
<p class="text-sm leading-6 text-[#355947]">{{ stage.note }}</p>
<div class="flex w-4 shrink-0 flex-col items-center">
<span class="mt-1 h-3 w-3 rounded-full" :class="markerClass(stage.state)" />
<span
v-if="index < presentation.stages.length - 1"
class="mt-2 w-px flex-1"
:class="connectorClass(stage.state)"
/>
</div>
<div
class="min-w-0 flex-1 pb-5"
:class="index < presentation.stages.length - 1 ? 'border-b border-[#e1ebe4]' : ''"
>
<div class="flex flex-wrap items-center justify-between gap-2">
<p class="text-sm font-semibold" :class="titleClass(stage.state)">
{{ stage.label }}
</p>
<p class="text-xs font-semibold uppercase tracking-[0.12em] text-[#5c7b69]">
{{ stage.dateLabel }}
</p>
</div>
<p class="mt-2 text-sm leading-6" :class="noteClass(stage.state)">
{{ stage.note }}
</p>
</div>
</div>
</div>