/shri-2018-task-2

Задание на вёрстку

Primary LanguageHTML

Краткое описание реализации задания

В основу решения поставленной задачи легли:

  • Идеи и подходы методологии БЭМ
  • mobile first подход адаптивного дизайна.
  • Точка перелома - 1280px(в соответсвии макетам)

Вопросы:

  • Почему использую данный подход? Удобство разработки, расширяемость, легко вносить изменения, возможность переиспользовать компоненты. Результат - хорошо организованные структуры, которые удобно использовать далее.
  • Что хотим получить? Наша задача на этом этапе получить сверстанные компоненты макета которые можно использовать в дальнейшем.

Пару слов о организованной среде разработки:

Пакетный менеджер npm и таск-менеджер gulp для выполнения рутинной работы(например подключение стилей каждого блока к странице, переопределение блоков). Скрипт сборки можно найти в файле gulpfile.js.

Минификация, и т.п. при реализации текущего задания не использовались, так как на данном этапе разработки в этом нет необходимости.(Используется только добовление префиксов. Для демонстрации и тестирования верстки в разных браузерах) Это обьясняется тем, что приложение(результат задания 3) построено с использованием утилиты create-react-app, которая при сборке проекта добавлет прификсы, минимизирует файлы с кодом.

Установка зависимостей

Установка для серверной части

npm install

Запуск

В файле gulpfile.js необходимо описать параметры сборки

var params = {
  out: 'public',
  htmlSrc: 'touch.main.html',
  levels: ['touch.blocks']
},

out - директория куда будет собираться страница с подключенными стилями и картинками.

htmlSrc - исходная html страница

levels - уровни переопределения. В нашем проекте будет два уровня переопределения touch.blocks и desktop.blocks touch.blocks - основной уровень. Если хотим собрать адаптивную версию включая стили для больших экранов, то пишем levels: ['touch.blocks', 'desktop.blocks']

Запуск сборщика осуществляется командой gulp

Live версии страниц:

  • Главная

    Свободные слоты на диаграмме(с белым цветом) в настоящем задании сделаны шириной свободного времени между встречами(Сделано в соответсвии с макетом - "главная" для десктопа, состояние наведения на слот.) Непосредственно, в приложении свободный слот будет иметь время максимум один час. Это наиболее удобно для пользователей и соотвествует логике дизайна с использованием визульного разделения времени с помощью сетки.

  • Главная. С тултипом

    Даная страница просто показывает верстку тултипа, но не его функциональность. Поэтому не настроено позиционирование всплывающего окошка и его частей(например позиционирование треугольника). Его функциональность реализована в 3 задании.

  • Главная. С календарем

  • Главная. Встреча создана

  • Новая встреча

    Сверстано в соотвествии с макетами, но в макете не хватает кнопки "отмена". В самом приложении эта кнопка добавлена. Плюс в самом приложении блок с этими кнопками будет прилипать к нижней части экрана для мобильных. Кнопки будут выровненны по центру, так как выравнивание их по правому краю немного "ломает" общий стиль дизайна приложения, и как результат даный блок сильно выделяется. Выравние по центру, решает эту неоднозначность - кнопки как-будто встают на свое место. Конечно, данный вопрос требует более подробной дискусии с дизайнером. Например, с другой стороны, выравнивание по правому краю делает более доступными эти кнопки, т.к. большой палец правой руки(считаем большинство пользователей правши) с легкостью дотягивается до них даже на смартфонах с широкими экранами. Хотелось бы узнать ваше экспертное мнение. Какое решение будет максимально удобным для пользователя?

  • Новая встреча. С выбором участника

    Статичный пример выпадающего списка выбора участника.

  • Редактирование встречи

    Дисскусия с кнопками описана чуть выше.

  • Редактирование Удалить

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

  • Подчеркну - вся динамика: Открытие календаря, автокоплит, тултипы, открытие модальных сообщений, и т.д. - реализованы в 3 задании. Но стили для обектов готовы и находятся в соотвествующих папках выше.
  • Стили связанные с наведением, активным состоянием, состоянием фокуса в заднии на верстку завязаны на селекторы типа :active, :hover, :focus с целью демонстрации верстки, но в резульирующем варианте большая часть этих селекторов будут заменена на селекторы типа .button_hovered_true, .button_pressed_true, input_focused_true, и т.д. и будут добавляться при совершении сооствествуюших событий с реакт-компонентом.

P.S.

Буду очень благодарен любой обратной связи, особоенно комментарии о использовании методологии БЭМ.