Компоненты

Навигация

Боковое меню, верхняя полоса телефона, вкладки, выбор вида.

Панель: боковое меню и верхняя полоса

На web (≥ 1024 px) слева постоянное тёмно-зелёное меню, активный пункт «сливается» с фоном страницы. На телефоне и планшете — тёмная верхняя полоса: ☰, название страницы, поиск; меню выезжает слева.

Клиенты

Телефон: нажмите ☰

Правила

  • Заголовок страницы — в верхней полосе; никаких «хлебных крошек» и второго h1.
  • Число в пункте меню — ожидающая работа (новый лид, непрочитанное сообщение).
  • На телефоне пункт меню высотой 44 px.
  • Переключатель CRM ↔ CEO — вверху меню, только для тех, у кого есть права.
  • На web меню сворачивается до иконок (88 px): иконки того же размера, что в открытом меню (18 px), логотип — знак того же логотипа без надписи; название пункта — под курсором.

Статус сотрудника (StateSwitch)

Статус сотрудника, принимающего лиды, — в верхней панели между профилем и «Выйти», на каждой странице: только иконка текущего статуса своим цветом. По нажатию — весь список: иконка, название, отметка у текущего и пояснение внизу.

Верхняя панельShahlo Nazarova

Правила

  • Только сотрудникам, принимающим лиды; CEO не показывается.
  • Выбор сохраняется сразу; при ошибке возвращается прежний статус и появляется уведомление.
  • «Занят» и «Перерыв» — на время: по его окончании статус сам возвращается к «Работаю».

Вкладки (tab)

Разделы внутри страницы — подчёркнутый ряд. На телефоне листается вбок; число ожидающих дел — в красной метке. При прокрутке прилипает сверху.

Содержимое раздела «Основное».

Этапы (Stepper)

Долгое действие — новая продажа, ценовое предложение, проверка: этапы в одну строку. Пройденный — с ✓ и открывается снова, текущий закрашен, следующие ждут.

  2. 2Пакет
  3. 3
  4. 4

Правила

  • Название этапа — короткое существительное: «Клиент», «Пакет», «Оплата».
  • На телефоне — только название текущего этапа, остальные — номером.
  • К прошлому этапу можно вернуться; к следующему — только через «Продолжить».

Меню настроек

В настройках: на web — колонка слева, на телефоне и планшете — листаемый ряд кнопок сверху.

Фирма

Содержимое страницы настроек.

Шапка сайта (маркет, сайт агентства)

На сайте: логотип, разделы, язык, тема и «Войти». На телефоне разделы прячутся под ☰, «Войти» остаётся видна.

Centrum Holidays

Правила

  • На страницах агентства логотип ведёт на его главную (и со страницы брони), «Пакеты» — к брони.
  • «Вернуться на маркет» — только когда агентство открыто через адрес маркета (/agency/<slug>); на собственном домене агентства не показывается. На телефоне — только стрелка.

Выбор языка (LangSwitch)

Единственный способ выбора языка — список, как в dashboard: виден только выбранный язык с флагом и кратким названием, по нажатию открываются четыре языка своими названиями. Используется во всех приложениях (dashboard, CRM, CEO, сайт, мобильное).

На обычной панели

На тёмной панели

Продажи

Правила

  • Ряд кнопок (UZ · RU · EN · AR) и браузерный <select> не используются.
  • В списке язык написан на нём самом: O'zbekcha, Русский, English, العربية.
  • Флаг — SVG (Windows показывает эмодзи-флаги буквами).
  • Для арабского не флаг, а буква «ع» на зелёном фоне: язык не принадлежит одной стране.
  • На тёмной панели (верхняя полоса телефона, боковое меню) — вариант dark.
  • Выбор хранится в cookie umra_locale и один на всех поддоменах.