Add event colors (Catppuccin Mocha) and read-only week view for users
All checks were successful
CI/CD Pipeline / build-and-deploy (push) Successful in 20s
All checks were successful
CI/CD Pipeline / build-and-deploy (push) Successful in 20s
Admins can now pick a color per event from a Catppuccin Mocha palette; existing events default to blue. Colors flow through to both the admin timeline and the new "Неделя" tab in the user view, which reuses the admin's weekly grid in a read-only mode. Also reworks event blocks to show a single-line "start–end title" so short events no longer overflow, tidies the admin toolbar, and expands mobile responsiveness across both frontends. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
vrubel
parent
fc66954c03
commit
c40a6569b4
10 changed files with 685 additions and 64 deletions
|
|
@ -7,6 +7,28 @@ const START_HOUR = 8;
|
|||
const END_HOUR = 20;
|
||||
const PIXELS_PER_MINUTE = 0.8;
|
||||
|
||||
const CATPPUCCIN_MOCHA = {
|
||||
rosewater: '#f5e0dc',
|
||||
flamingo: '#f2cdcd',
|
||||
pink: '#f5c2e7',
|
||||
mauve: '#cba6f7',
|
||||
red: '#f38ba8',
|
||||
maroon: '#eba0ac',
|
||||
peach: '#fab387',
|
||||
yellow: '#f9e2af',
|
||||
green: '#a6e3a1',
|
||||
teal: '#94e2d5',
|
||||
sky: '#89dceb',
|
||||
sapphire: '#74c7ec',
|
||||
blue: '#89b4fa',
|
||||
lavender: '#b4befe'
|
||||
};
|
||||
const DEFAULT_EVENT_COLOR = 'blue';
|
||||
|
||||
function eventColorHex(colorKey) {
|
||||
return CATPPUCCIN_MOCHA[colorKey] || CATPPUCCIN_MOCHA[DEFAULT_EVENT_COLOR];
|
||||
}
|
||||
|
||||
let dragOffsetY = 0;
|
||||
let currentRangeStart = null;
|
||||
let scheduleItems = [];
|
||||
|
|
@ -60,6 +82,11 @@ function formatDayLabel(dateStr) {
|
|||
};
|
||||
}
|
||||
|
||||
function timeToMinutes(time) {
|
||||
const [hour, minute] = time.split(':').map(Number);
|
||||
return hour * 60 + minute;
|
||||
}
|
||||
|
||||
function calculateEndTime(startTime, durationMin) {
|
||||
const [hour, minute] = startTime.split(':').map(Number);
|
||||
const totalMinutes = hour * 60 + minute + durationMin;
|
||||
|
|
@ -68,11 +95,6 @@ function calculateEndTime(startTime, durationMin) {
|
|||
return `${String(endHour).padStart(2, '0')}:${String(endMinute).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function timeToMinutes(time) {
|
||||
const [hour, minute] = time.split(':').map(Number);
|
||||
return hour * 60 + minute;
|
||||
}
|
||||
|
||||
function minutesToTime(totalMinutes) {
|
||||
const hour = Math.floor(totalMinutes / 60);
|
||||
const minute = totalMinutes % 60;
|
||||
|
|
@ -181,6 +203,7 @@ function renderEventBlock(event) {
|
|||
const startMinutes = timeToMinutes(event.start_time) - START_HOUR * 60;
|
||||
const top = Math.max(0, startMinutes * PIXELS_PER_MINUTE);
|
||||
const height = Math.max(42, event.duration_min * PIXELS_PER_MINUTE);
|
||||
const colorHex = eventColorHex(event.color);
|
||||
const endTime = calculateEndTime(event.start_time, event.duration_min);
|
||||
return `
|
||||
<article
|
||||
|
|
@ -189,11 +212,12 @@ function renderEventBlock(event) {
|
|||
data-kind="event"
|
||||
data-id="${event.id}"
|
||||
data-date="${event.source_date || event.date}"
|
||||
style="top:${top}px;height:${height}px;"
|
||||
style="top:${top}px;height:${height}px;--event-color:${colorHex};"
|
||||
>
|
||||
<div class="event-time">${event.start_time} - ${endTime}</div>
|
||||
<div class="event-title">${escapeHtml(event.title)}</div>
|
||||
<div class="meta-text" style="color: rgba(255,255,255,0.82);">${event.repeat_weekly ? 'Цикличное занятие' : 'Разовое занятие'}</div>
|
||||
<div class="event-line">
|
||||
<span class="event-time">${event.start_time}–${endTime}</span>
|
||||
<span class="event-title">${escapeHtml(event.title)}</span>
|
||||
</div>
|
||||
<div class="item-actions">
|
||||
<button class="item-action edit" data-action="edit" data-kind="event" data-id="${event.id}" data-date="${event.source_date || event.date}">Изменить</button>
|
||||
<button class="item-action delete" data-action="delete" data-kind="event" data-id="${event.id}" data-date="${event.source_date || event.date}">Удалить</button>
|
||||
|
|
@ -202,6 +226,38 @@ function renderEventBlock(event) {
|
|||
`;
|
||||
}
|
||||
|
||||
function renderColorPicker(selectedColor) {
|
||||
const current = selectedColor || DEFAULT_EVENT_COLOR;
|
||||
const swatches = Object.entries(CATPPUCCIN_MOCHA).map(([key, hex]) => `
|
||||
<button
|
||||
type="button"
|
||||
class="color-swatch ${key === current ? 'is-selected' : ''}"
|
||||
data-color="${key}"
|
||||
style="background:${hex};"
|
||||
title="${key}"
|
||||
aria-label="${key}"
|
||||
></button>
|
||||
`).join('');
|
||||
return `
|
||||
<div class="form-group full">
|
||||
<label>Цвет занятия</label>
|
||||
<input type="hidden" id="event-color" value="${current}">
|
||||
<div class="color-swatch-row">${swatches}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function bindColorPicker() {
|
||||
const input = document.getElementById('event-color');
|
||||
document.querySelectorAll('.color-swatch').forEach((swatch) => {
|
||||
swatch.addEventListener('click', () => {
|
||||
document.querySelectorAll('.color-swatch').forEach((el) => el.classList.remove('is-selected'));
|
||||
swatch.classList.add('is-selected');
|
||||
input.value = swatch.dataset.color;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function bindInteractiveHandlers() {
|
||||
document.removeEventListener('click', clearActiveItems);
|
||||
document.addEventListener('click', clearActiveItems);
|
||||
|
|
@ -450,6 +506,7 @@ function showEventModal(initial = {}, item = null) {
|
|||
<label>Название</label>
|
||||
<textarea id="event-title" required>${escapeHtml(initial.title || '')}</textarea>
|
||||
</div>
|
||||
${renderColorPicker(initial.color)}
|
||||
${isEdit ? buildScopeSelector(item) : ''}
|
||||
</div>
|
||||
<div class="actions-row">
|
||||
|
|
@ -459,6 +516,7 @@ function showEventModal(initial = {}, item = null) {
|
|||
</form>
|
||||
`);
|
||||
|
||||
bindColorPicker();
|
||||
document.getElementById('cancel-event').addEventListener('click', closeModal);
|
||||
document.getElementById('event-form').addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
|
|
@ -467,7 +525,8 @@ function showEventModal(initial = {}, item = null) {
|
|||
start_time: document.getElementById('event-start-time').value,
|
||||
duration_min: Number(document.getElementById('event-duration').value),
|
||||
title: document.getElementById('event-title').value.trim(),
|
||||
repeat_weekly: document.getElementById('event-repeat-weekly').checked
|
||||
repeat_weekly: document.getElementById('event-repeat-weekly').checked,
|
||||
color: document.getElementById('event-color').value
|
||||
};
|
||||
|
||||
if (isEdit) {
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ body {
|
|||
border-radius: 24px;
|
||||
padding: 18px 22px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 16px;
|
||||
|
|
@ -144,30 +144,9 @@ body {
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.legend {
|
||||
.week-navigation {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.legend-chip {
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
font-size: 13px;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.task-chip {
|
||||
background: rgba(21, 128, 61, 0.12);
|
||||
color: var(--task);
|
||||
}
|
||||
|
||||
.event-chip {
|
||||
background: rgba(15, 118, 110, 0.12);
|
||||
color: var(--event);
|
||||
}
|
||||
|
||||
.recurring-chip {
|
||||
background: rgba(245, 158, 11, 0.16);
|
||||
color: var(--brand-deep);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hint-panel {
|
||||
|
|
@ -340,32 +319,86 @@ body {
|
|||
left: 14px;
|
||||
right: 14px;
|
||||
border-radius: 18px;
|
||||
padding: 12px 14px;
|
||||
background: linear-gradient(160deg, rgba(15, 118, 110, 0.92), rgba(17, 94, 89, 0.84));
|
||||
color: white;
|
||||
box-shadow: 0 12px 24px rgba(15, 118, 110, 0.22);
|
||||
padding: 8px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
background: var(--event-color, #89b4fa);
|
||||
color: #1e1e2e;
|
||||
box-shadow: 0 12px 24px rgba(30, 30, 46, 0.22);
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
|
||||
}
|
||||
|
||||
.event-block.recurring {
|
||||
outline: 2px solid rgba(245, 158, 11, 0.55);
|
||||
outline: 2px solid rgba(30, 30, 46, 0.35);
|
||||
}
|
||||
|
||||
.event-block.is-active {
|
||||
transform: scale(1.01);
|
||||
box-shadow: 0 18px 32px rgba(15, 118, 110, 0.28);
|
||||
box-shadow: 0 18px 32px rgba(30, 30, 46, 0.3);
|
||||
}
|
||||
|
||||
.event-block.dragging {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.event-line {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.event-time {
|
||||
font-size: 12px;
|
||||
opacity: 0.82;
|
||||
margin-bottom: 6px;
|
||||
opacity: 0.75;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.event-block .event-title {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.event-block .item-action.edit {
|
||||
background: rgba(30, 30, 46, 0.14);
|
||||
color: #1e1e2e;
|
||||
}
|
||||
|
||||
.event-block .item-action.delete {
|
||||
background: rgba(30, 30, 46, 0.14);
|
||||
color: #1e1e2e;
|
||||
}
|
||||
|
||||
.color-swatch-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 999px;
|
||||
border: 2px solid rgba(123, 92, 62, 0.18);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
transition: transform 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.color-swatch:hover {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.color-swatch.is-selected {
|
||||
border-color: #1e1e2e;
|
||||
box-shadow: 0 0 0 2px rgba(30, 30, 46, 0.2);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
|
|
@ -502,6 +535,10 @@ body {
|
|||
align-items: stretch;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
|
@ -509,6 +546,84 @@ body {
|
|||
|
||||
@media (max-width: 560px) {
|
||||
.timeline {
|
||||
height: 520px;
|
||||
height: 480px;
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding: 20px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(26px, 8vw, 36px);
|
||||
}
|
||||
|
||||
.hero-copy {
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-actions .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.week-navigation {
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.week-navigation .nav-btn,
|
||||
.week-navigation .btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hint-panel {
|
||||
font-size: 12px;
|
||||
padding: 12px 14px;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.schedule-grid {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.day-card {
|
||||
padding: 12px;
|
||||
border-radius: 20px;
|
||||
min-height: 700px;
|
||||
}
|
||||
|
||||
.modal {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
padding: 20px;
|
||||
border-radius: 22px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.form-grid {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue