Цифровой прокат: карточки сессий

[Rakovao]

Issue: Разработка Дизайна Переиспользуемых Карточек

---

Описание

Необходимо разработать два переиспользуемых компонента карточек, которые будут использоваться во всём приложении. Эти карточки должны соответствовать существующему стилю дизайна приложения, при этом оставаясь гибкими в плане кастомизации и размещения элементов. Карточки должны поддерживать динамическое изменение ширины в разумных пределах и предоставлять возможность показа/скрытия отдельных элементов через кнопку "показать/скрыть" в слоях.

Карточки должны содержать следующие элементы:

1. Общие элементы для обоих типов карточек:

   • Изображение: Главный визуальный элемент.
   • Заголовок (название): Чёткий и краткий заголовок карточки.
   • Подзаголовок: Второстепенная строка текста для дополнительного контекста.
   • Текст карточки: Краткое описание или основной текст.
   • Две кнопки: Интерактивные кнопки для действий пользователя.
   • Бейдж поверх изображения: Индикатор статуса или метка, размещенная поверх изображения.
   • Progress Bar: Микроинтеракция в виде индикатора загрузки для случаев долгой загрузки.

2. Возможности кастомизации:

   • Возможность показывать/скрывать отдельные элементы через переключатель "показать/скрыть" в слоях.
   • Динамическая адаптация ширины под различные размеры экрана.

3. Два типа карточек:

   • Большая карточка:
     • Подходит для пользовательских экранов.
     • Большинство элементов расположены под изображением.
   • Длинная карточка:
     • Создана для экранов администратора.
     • Элементы расположены по-другому: изображение слева, а все остальные элементы справа (в отличие от большой карточки, где большинство элементов находятся под изображением).

---

Требования к дизайну

1. Визуальная согласованность:

   • Убедитесь, что карточки визуально соответствуют текущей системе дизайна приложения.
   • Используйте существующие правила типографики, цветовой палитры и отступов.

2. Спецификации макета:

   • Большая карточка:
     • Изображение сверху, за ним следуют заголовок, подзаголовок, текст, кнопки.
     • Адаптивный дизайн для различных размеров экрана.
   • Длинная карточка:
     • Изображение слева, а заголовок, подзаголовок, текст, кнопки и бейдж выровнены вертикально справа.
     • Сохраните правильное выравнивание и отступы между элементами.

3. Интерактивность:

   • Включите возможность переключения видимости определённых элементов, таких как подзаголовок, текст или кнопки.
   • Реализуйте плавную анимацию для индикатора прогресса во время загрузки.

---

Критерии приемки

• Дизайн соответствует указанным требованиям и гармонирует с системой дизайна приложения.
• Оба типа карточек полностью адаптивны и могут корректно работать на разных размерах экрана.

---

Дополнительные примечания

Компонент Card библиотеки Vuetify: https://vuetifyjs.com/en/components/cards/#anatomy