refactor: полная унификация всех модальных окон
Проведен аудит всех 6 модальных окон календаря и унифицированы стили. Проблемы до рефакторинга: - CalendarModal: z-[200] вместо z-[100], нет backdrop-blur-sm, нет max-h/overflow - CalendarParticipantsModal: нет backdrop-blur-sm, нет max-h/overflow - Другие модалы: лишние transition классы Стандартный стиль для ВСЕХ модалов: Overlay: fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 Контейнер: w-full max-w-[md/2xl] rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto Унифицированные модалы: ✅ EventModal ✅ ViewEventDetailsModal ✅ ViewDayEventsModal ✅ CalendarModal ✅ CalendarParticipantsModal ✅ CalendarSubscriptionsModal Результат: - Единообразный внешний вид всех модалов - Правильная иерархия z-index (все z-[100]) - Размытие фона везде одинаковое - Прокрутка контента при переполнении - Простой и понятный код без излишеств
This commit is contained in:
parent
ef58ad2bf6
commit
cd1d0f2a69
@ -85,8 +85,8 @@ export function CalendarModal({ isOpen, onClose, calendar }: CalendarModalProps)
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[200] flex items-center justify-center bg-black/50 p-4">
|
||||
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl">
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
|
||||
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
{calendar?.id ? "Редактировать календарь" : "Создать календарь"}
|
||||
|
||||
@ -183,11 +183,11 @@ export default function CalendarParticipantsModal({
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 p-4"
|
||||
className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="relative w-full max-w-2xl rounded-2xl bg-white shadow-xl"
|
||||
className="relative w-full max-w-2xl rounded-2xl bg-white shadow-xl max-h-[90vh] overflow-y-auto"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between border-b px-6 py-4">
|
||||
|
||||
@ -138,8 +138,8 @@ export function CalendarSubscriptionsModal({ isOpen, onClose, onUpdate }: Props)
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-all duration-200">
|
||||
<div className="w-full max-w-2xl rounded-2xl bg-white shadow-xl transition-all duration-300 ease-out">
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
|
||||
<div className="w-full max-w-2xl rounded-2xl bg-white shadow-xl max-h-[90vh] overflow-y-auto">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between border-b border-gray-100 px-6 py-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900">Подписки на календари</h3>
|
||||
|
||||
@ -331,8 +331,8 @@ export function EventModal({
|
||||
if (!isOpen || !editingEvent) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-all duration-200">
|
||||
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto transition-all duration-300 ease-out">
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
|
||||
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
{editingEvent.id ? "Редактировать событие" : "Создать событие"}
|
||||
|
||||
@ -42,8 +42,8 @@ export function ViewDayEventsModal({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-all duration-200">
|
||||
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto transition-all duration-300 ease-out">
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
|
||||
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-gray-900">События на {capitalizedDate}</h3>
|
||||
|
||||
@ -65,8 +65,8 @@ export function ViewEventDetailsModal({
|
||||
const capitalizedEnd = formatDateTime(event.end).charAt(0).toUpperCase() + formatDateTime(event.end).slice(1);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 transition-all duration-200">
|
||||
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto transition-all duration-300 ease-out">
|
||||
<div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4">
|
||||
<div className="w-full max-w-md rounded-2xl bg-white p-6 shadow-xl max-h-[90vh] overflow-y-auto">
|
||||
<div className="mb-4 flex items-start justify-between">
|
||||
<div className="flex-1 min-w-0 pr-3">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user