ZeBoard

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.

##Technical tasks:

Нужно сверстать страницу по макету согласно тз. Разрешено использование любых фреймворков, библиотек и плагинов (bootstrap, jquery, vue и тд).

Обязательные требования для принятия работы:

• верстка должна быть адаптивной (на второй странице в фигме нарисована мобильная версия);
• верстка должна корректно отображаться в Chrome, Safari (как моб, так и пк)
• сверстать хедер, колонки и карточки в колонках;
• при клике на “Сreate task” должна открываться модалка с формой;
• в поле “Description” используется редактор текста с кнопками, которые позволят выделить текст жирным, курсивов или подчеркиванием.
• в поле “Name” есть валидация - поле обязательно, максимум 50 символов
• все ошибки валидации видны на экране (при сабмите формы и при потере фокуса)
• для ввода в поле “Until” в модалке используется datepicker
• поле “Until” - не обязательное - но если оно заполнено - проверяется валидность даты. Дата должна быть не ранее текущего момента.
• в поле “Estimation time” валидация на корректность данных, допустимые форматы ввода “1d 10h 5m”, “18m”, “3h 7m” - т.е. дни, часы и минуты
• поле “Author” - выпадающий список (как на макете), обязательно для заполнения
• при двойном клике на карточку - открывается модалка (экран “Card_info”)
• при нажатии на кнопку “Сreate task” в модалке форма очищается, и создается карточка с данными в первой колонке
• тег “Project” на карточках генерируется рандомно из имеющихся проектов (X, Y, Z)(обратить внимание, что каждый тег имеет свой цвет), при создании карточки
• номера задач идут по-порядку, начиная с “BM-1” и увеличиваются с каждой новой карточкой
• вверху каждой колонки указано количество карточке в колонке
• карточки можно перемещать в разные колонки с помощью мыши

Дополнительные требования (которые лучше помогут понять вашу квалификацию).

• реализовать проект на vue (nuxt js)
• все данные храняться в localstorage и не теряются при перезагрузке страницы
• стилизовать скролл бар как на макете
• модалки появляются с анимацией
• карточки можно перемещать в разные колонки с помощью touch
• при клике на “Сreate column” открывается модалка для создания новой колонки. Новая колонка добавляется перед колонкой “DONE”
• все колонки, кроме первой и последней можно менять местами, двигая за хедер колонки (где указано название и кол-во карточек)

Макет: https://www.figma.com/file/YolnpTWLJWAAiypV3cCcqP/Test_2?node-id=0%3A1

And the copy: https://www.figma.com/file/hRBn9xgVniQIV9drti3KAj/Test_2-(Copy)