feat: исправление мобильной версии и улучшение UX
- Исправлена мобильная версия: добавлена горизонтальная прокрутка навигации, оптимизированы отступы и размеры элементов для touch-интерфейсов - Устранено зависание на мобильных: удален бесконечный цикл в date-serializer.ts - Улучшена читаемость: сделаны светлее описание пар, дни недели и текст последнего обновления (текущий день остается выделенным) - Добавлена автоматическая прокрутка до текущего дня при загрузке страницы - Добавлено отображение 'Пары нет' для отмененных пар при замене - Оптимизированы скрипты установки: добавлена проверка зависимостей перед установкой для ускорения повторных запусков - Исправлено отображение адреса и аудитории на мобильных устройствах - Улучшены диалоги и touch-цели для мобильных устройств
This commit is contained in:
@@ -1,14 +1,54 @@
|
||||
import type { Day as DayType } from '@/shared/model/day'
|
||||
import { Day } from '@/widgets/schedule/day'
|
||||
import { useRouter } from 'next/router'
|
||||
import React from 'react'
|
||||
import { getDayOfWeek } from '@/shared/utils'
|
||||
|
||||
export function Schedule({ days }: {
|
||||
days: DayType[]
|
||||
}) {
|
||||
const group = useRouter().query['group']
|
||||
const hasScrolledRef = React.useRef(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (hasScrolledRef.current || typeof window === 'undefined') return
|
||||
|
||||
const today = new Date()
|
||||
today.setHours(0, 0, 0, 0)
|
||||
|
||||
// Находим текущий день
|
||||
const todayDay = days.find(day => {
|
||||
const dayDate = new Date(day.date)
|
||||
dayDate.setHours(0, 0, 0, 0)
|
||||
return dayDate.getTime() === today.getTime()
|
||||
})
|
||||
|
||||
if (todayDay) {
|
||||
// Небольшая задержка для завершения рендеринга
|
||||
const timeoutId = setTimeout(() => {
|
||||
const elementId = getDayOfWeek(todayDay.date)
|
||||
const element = document.getElementById(elementId)
|
||||
|
||||
if (element) {
|
||||
// Прокручиваем с отступом для sticky header
|
||||
const headerOffset = 100
|
||||
const elementPosition = element.getBoundingClientRect().top
|
||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
hasScrolledRef.current = true
|
||||
}
|
||||
}, 100)
|
||||
|
||||
return () => clearTimeout(timeoutId)
|
||||
}
|
||||
}, [days])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col p-8 md:p-16 gap-12 md:gap-14">
|
||||
<div className="flex flex-col p-4 md:p-8 lg:p-16 gap-6 md:gap-12 lg:gap-14">
|
||||
{days.map((day, i) => (
|
||||
<Day day={day} key={`${group}_day${i}`} />
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user