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

Refine manager calendar card layout

Browse Source
This commit is contained in:
Ruslan Bakiev
2026-04-06 11:56:11 +07:00
parent d119a76ae6
commit f506c8cf86
1 changed files with 49 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
app/pages/client-orders/index.vue
View File

@@ -195,10 +195,11 @@ const statusTabs = computed<Array<{ id: StatusFilter; label: string; count: numb
const calendarOptions = computed(() => ({ const calendarOptions = computed(() => ({
plugins: [dayGridPlugin], plugins: [dayGridPlugin],
locale: ruLocale, locale: ruLocale,
initialView: 'dayGridMonth', initialView: 'dayGridWeek',
height: 'auto', height: 'auto',
fixedWeekCount: false, fixedWeekCount: false,
firstDay: 1, firstDay: 1,
weekends: false,
headerToolbar: { headerToolbar: {
left: 'prev,next today', left: 'prev,next today',
center: 'title', center: 'title',
@@ -240,21 +241,21 @@ const calendarOptions = computed(() => ({
return { return {
html: ` html: `
<div class="manager-calendar-order-card"> <div class="manager-calendar-order-card">
<div class="manager-calendar-order-card__topline"> <div class="manager-calendar-order-card__header">
<div class="manager-calendar-order-card__header"> <div class="manager-calendar-order-card__avatar-shell">
<div class="manager-calendar-order-card__avatar-shell"> ${avatarSrc
${avatarSrc ? `<img src="${escapeHtml(avatarSrc)}" alt="${customerName}" class="manager-calendar-order-card__avatar">`
? `<img src="${escapeHtml(avatarSrc)}" alt="${customerName}" class="manager-calendar-order-card__avatar">` : `<span class="manager-calendar-order-card__initials">${initials}</span>`}
: `<span class="manager-calendar-order-card__initials">${initials}</span>`} </div>
</div> <div class="manager-calendar-order-card__text">
<div class="manager-calendar-order-card__text"> <div class="manager-calendar-order-card__name">${customerName}</div>
<div class="manager-calendar-order-card__name">${customerName}</div> <div class="manager-calendar-order-card__code">${orderCode}</div>
<div class="manager-calendar-order-card__code">${orderCode}</div>
</div>
</div> </div>
<span class="${orderGroupClass}">${orderGroupLabel}</span>
</div> </div>
<div class="manager-calendar-order-card__price">${totalPriceLabel}</div> <div class="manager-calendar-order-card__meta">
<span class="${orderGroupClass}">${orderGroupLabel}</span>
<div class="manager-calendar-order-card__price">${totalPriceLabel}</div>
</div>
</div> </div>
`, `,
}; };
@@ -353,35 +354,27 @@ const calendarOptions = computed(() => ({
<style> <style>
.manager-calendar-order-card { .manager-calendar-order-card {
display: grid; display: grid;
gap: 0.4rem; gap: 0.55rem;
min-height: 78px; min-height: 84px;
border-radius: 18px; border-radius: 18px;
background: #ffffff; background: #ffffff;
padding: 0.7rem 0.75rem; padding: 0.85rem 0.9rem;
box-shadow: 0 12px 26px rgba(18, 56, 36, 0.08); box-shadow: 0 12px 26px rgba(18, 56, 36, 0.08);
} }
.manager-calendar-order-card__topline {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.6rem;
}
.manager-calendar-order-card__header { .manager-calendar-order-card__header {
display: flex; display: flex;
align-items: flex-start; align-items: center;
gap: 0.55rem; gap: 0.7rem;
min-width: 0; min-width: 0;
flex: 1 1 auto;
} }
.manager-calendar-order-card__avatar-shell { .manager-calendar-order-card__avatar-shell {
width: 32px; width: 34px;
height: 32px; height: 34px;
flex: 0 0 auto; flex: 0 0 auto;
overflow: hidden; overflow: hidden;
border-radius: 11px; border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -408,27 +401,34 @@ const calendarOptions = computed(() => ({
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
font-size: 0.76rem; font-size: 0.8rem;
line-height: 1.15; line-height: 1.15;
font-weight: 800; font-weight: 800;
color: #123824; color: #123824;
} }
.manager-calendar-order-card__code { .manager-calendar-order-card__code {
margin-top: 0.15rem; margin-top: 0.18rem;
font-size: 0.72rem; font-size: 0.74rem;
line-height: 1.1; line-height: 1.1;
font-weight: 700; font-weight: 700;
color: #688676; color: #688676;
} }
.manager-calendar-order-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.65rem;
}
.manager-calendar-order-card__status { .manager-calendar-order-card__status {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 999px; border-radius: 999px;
padding: 0.24rem 0.5rem; padding: 0.28rem 0.58rem;
font-size: 0.62rem; font-size: 0.64rem;
line-height: 1; line-height: 1;
font-weight: 800; font-weight: 800;
white-space: nowrap; white-space: nowrap;
@@ -455,9 +455,11 @@ const calendarOptions = computed(() => ({
} }
.manager-calendar-order-card__price { .manager-calendar-order-card__price {
font-size: 0.74rem; font-size: 0.76rem;
font-weight: 700; font-weight: 700;
color: #0d854a; color: #0d854a;
text-align: right;
white-space: nowrap;
} }
.manager-calendar-shell :deep(.fc) { .manager-calendar-shell :deep(.fc) {
@@ -494,12 +496,21 @@ const calendarOptions = computed(() => ({
.manager-calendar-shell :deep(.fc-daygrid-day-frame) { .manager-calendar-shell :deep(.fc-daygrid-day-frame) {
background: transparent; background: transparent;
padding: 0.35rem; padding: 0.5rem;
} }
.manager-calendar-shell :deep(.fc-daygrid-day-top) { .manager-calendar-shell :deep(.fc-daygrid-day-top) {
justify-content: flex-end; justify-content: flex-end;
padding: 0.15rem 0.25rem 0.2rem; padding: 0.25rem 0.35rem 0.3rem;
}
.manager-calendar-shell :deep(.fc-daygrid-day-events) {
margin: 0;
padding: 0 0.3rem 0.45rem;
}
.manager-calendar-shell :deep(.fc-daygrid-event-harness) {
margin-top: 0.45rem;
} }
.manager-calendar-shell :deep(.fc-daygrid-day-number) { .manager-calendar-shell :deep(.fc-daygrid-day-number) {