ПРивет
## Дизайн интерфейса – пошаговые задачи
### A. Верхняя панель навигации и управление категориями
1. **Создать фиксированную верхнюю панель навигации**
* Сделать верхнюю панель навигации фиксированной в верхней части страницы.
* Макет слева направо:
1. Значок меню (гамбургер)
2. Значок/логотип сайта
3. Горизонтальный список выбранных «популярных» категорий (например, «Финансы», «Технологии» и т. д.)
4. Поле ввода поиска
5. Значок отправки поиска (без большой кнопки)
6. Значок информационного круга
2. **Загрузка категорий при загрузке страницы**
* При каждой загрузке страницы запускать отдельный запрос для извлечения всех категорий из базы данных.
* Сортировать категории в алфавитном порядке (A–Z).
3. **Меню категорий слева за пределами экрана** т
* При нажатии на значок меню открыть панель слева за пределами экрана.
* Отобразить полный список категорий (A–Z), извлеченный из базы данных.
* При нажатии на категорию:
* Отфильтруйте записи по выбранной категории.
* Выделите категорию, если она является одной из «популярных» категорий, отображаемых в верхней панели навигации.
* Сохраните выбранную категорию в качестве скрытого значения, связанного с полем поиска (поиск ограничен этой категорией).
4. **Выделение категорий в верхней панели навигации**
* Если выбранная в данный момент категория совпадает с одной из категорий, отображаемых в верхней панели навигации, визуально выделите ее.
* Сохраняйте состояние выделения в синхронизации с выбором вне канваса.
---
### B. Поведение поиска и пользовательский интерфейс
5. **Стиль поля ввода поиска**
* Соответствуйте стилю поля поиска на сервере.
* Удалите большую кнопку отправки.
* Используйте значок поиска в качестве триггера отправки.
6. **Jumbotron при пустом поиске**
* При отсутствии параметра запроса (`?q=`):
* Показать темный jumbotron (высотой ~600 пикселей).
* При наличии поискового запроса:
* Скрыть jumbotron.
7. **Поиск по категориям**
* Убедитесь, что поиск учитывает выбранную категорию (скрытое поле, устанавливаемое при выборе категории).
---
### C. Отображение результатов поиска
8. **Метка типа публикации на миниатюрах**
* На миниатюрах результатов поиска:
* Отобразите метку в верхнем левом углу, показывающую первый выбранный тип публикации (например, «Новости», «Продукт»).
9. **Индикаторы видео на миниатюрах**
* Если пост является видео:
* Отобразите значок воспроизведения по центру миниатюры.
* Отобразите продолжительность видео в правом нижнем углу.
* Используйте существующую вспомогательную функцию PHP для форматирования секунд в строку продолжительности.
10. **Форматирование относительной даты**
* Отображение дат в виде относительного времени:
* «X минут назад», «X дней назад» и т. д.
* Применяйте это последовательно:
* Результаты поиска
* Страница просмотра поста
* Списки бэкэнда
---
### D. Модальное окно с информацией
11. **Модальное окно с кругом информации**
* При нажатии на значок информационного круга:
* Откройте модальное окно по центру.
* Оставьте содержимое модального окна пустым на данный момент (позже оно будет содержать информацию о сайте/о нас).
---
### E. Страница просмотра поста (главная страница статьи)
12. **Восстановите боковую панель со связанными постами**
* Снова включите список связанных постов в правой части страницы просмотра поста.
13. **Удалить кнопку «Назад»**
* Полностью удалить кнопку «Назад» со страницы просмотра публикации.
14. **Интеграция видеоплеера**
* На странице просмотра публикации:
* Если URL-адрес видео установлен и продолжительность действительна:
* Отобразить плеер Video.js.
* Установить URL-адрес видео в качестве источника.
* Добавьте jQuery в нижнюю часть страницы для автоматического воспроизведения видео.
* Повторно используйте пример кода из `/samples`.
15. **Поведение ссылок в контенте**
* Для всех ссылок в HTML-коде контента публикации:
* Добавьте `target=«_window»`, чтобы ссылки открывались в новой вкладке/окне.
Переведено с помощью DeepL.com (бесплатная версия)
