Задача
Необходимо внести ряд изменений в купленный с ThemeForest шаблон и сверстать на его основе 2 страницы. Шаблон гибкий, имеет вертикальный и горизонтальный способы отображения, правки вносить нужно будет в горизонтальный (при этом крайне желательно, чтобы вертикальный не пострадал).
Сам шаблон можно увидеть по ссылке: https://coderthemes.com/ubold/layouts/default/layouts-horizontal.html (к нему есть все исходники, в т.ч. scss \ gulp, будут выданы исполнителю).
Макеты страниц (читайте коментарии): https://www.figma.com/file/1wP7Ng1ulPUZzC0JY107Vf/L2Catalog.com?node-id=171%3A589
Результатом работы должны быть изменения именно в исходниках + 2 собранные страницы.
Изменения не должны "ломать" стандартное поведение базовых элементов (ссылки \ кнопки и тд), а так же должна сохраниться кроссбраузерность.
Общая информация
Текущий вид проекта (чисто для наглядности и ознакомления, в нем используется старая версия шаблона): http://l2catalog.com/ru/
Шаблон имеет несколько глобальных настроек (прямо в теге body), необходимо выбрать следующие:
data-layout-width="boxed" - чтобы контейнер имел ограниченную ширину
data-layout-menu-position="scrollable" - чтобы navbar не был закреплен сверху и при промотке вниз страницы - исчезал из вида
data-sidebar-color="dark" - включает темную тему
И хотел бы заострить внимание еще на таком моменте: т.к. эти 2 страницы - не единственные, которые планируются на сайте, необходимо, чтобы правки в исходники вносились только те элементы, которые относятся ко всем страницам (навбар, подвал, , фон, форма и расположение основного контейнера), все остальные элементы, которые могут быть использованы и на других страницах (таблицы, кнопки, ссылки и прочие "кирпичики") - если вдруг они требуют изменений, чтобы именно на этих двух страницах они отображались иначе - лучше создавать отдельный новый класс для этого.
Работу можно разбить на 2 этапа - создание страницы без контента, где будут исправления шаблона, а затем уже верстка страниц по макету.
Размеры контейнера
В шаблоне уже описана сетка: https://coderthemes.com/ubold/layouts/default/ui-grid.html
А в макете изображены 4 разрешения: https://www.figma.com/file/1wP7Ng1ulPUZzC0JY107Vf/L2Catalog.com?node-id=171%3A589 - 2 для десктопа + планшет + мобайл
Брейкпоинты останутся стандартными (т.е. как уже описано в шаблоне)
Список необходимых исправлений (общих для шаблона) - 1 этап
- Сместить весь контент (контейнер) вниз так, чтобы в шапке над навбаром можно было расположить картинку или видео фон (на макете изображен синим цветом, вам нужно будет реализовать оба тега, чтобы можно было использовать один из них по необходимости). Версий (разрешений) фона будет 2: для мобильных устройств и всех остальных. Видео фон на мобильных устройствах использоваться не будет, вместо него тоже будет подставляться картинка. Возможно использование лейзи лоада, если это не будет создавать дерганий. Важно чтобы 2 варианта фона подгружались не сразу, а по необходимости
- Фон всегда должен центрироваться, а высота фона должна масштабироваться в зависимости от размера окна браузера / контейнера. Фон на разных разрешениях будет занимать разное пространство, размеры можно смотреть в фигме:
- на XL+ фон имеет размер 1920 х 600 px, отступ контента сверху: 300px
- на LG размер фона должен составлять 84% от оригинала (~ 1617 х 505 px), отступ сверху: 253px
- на MD - 63% (1213 x 379 px), отступ сверху: 190px
- на XS-SM будет использоваться уже другая картинка для фона, ее нужно будет просто растянуть на всю ширину экрана, а высота должна подстраиваться автоматом, чтобы сохранялись пропорции
- Необходимо переработать навбар, в шаблоне там 2 строки, их нужно объединить в одну. По умолчанию в шаблоне прописана вся типичная логика именно для второй строки (например это она собирается в бургер). Так же в навбаре нужно изменить hover и OnClick эффекты (описано в макете).
- Боковые отступы между контентом и контейнером нужно уменьшить (сделать max-width: 100% вместо 90% у container-fluid)
- У контента сейчас отбрасывается тень, она темная, нужно ее убрать (box-shadow у wrapper'a и других элементов), но при этом отделить фон контейнера от фона всего сайта цветами (как на макете)
- В шаблоне используется 2 типа шрифтов (Nunito и Cerebri, и второй не поддерживает кирилицу, его нужно заменить на https://fonts.google.com/specimen/Rubik - он используется в заголовках H1-H6)
- При появлении модалок и боковой панели вместо "забеления" нужен блюр эффект
Задачи \ уточнения по страницам с макета - 2 этап
- Нужно создать несколько кастомных классов для отображения ячеек в таблицах (нарисованы в фигме, см. коменты):
- premium-status
- premium-status-alt
- top-status
- vip-status
- basic-status
- no-status
- disabled-status
- Нужно сделать так, чтобы не было дубликатов таблиц под десктоп и мобильную версии. Нужно чтобы код был один, но классы изменяли способ его отображения в зависимости от разрешения (т.к. серверов в таблицах будет прям сотни - засорять страницу нельзя)
- Самые нижние таблицы нужно сделать не обычными, а DataTables (https://datatables.net/) В шаблоне: (https://coderthemes.com/ubold/layouts/default/tables-datatables.html) Для теста нужно вбить в эту таблицу 25 записей, но сделать отображение 10 шт на странице. Проблема заключается в том, что обычно после инициализации DataTables столбцы в ней немного смещаются относительно обычных таблиц - это нужно как-либо исправить, чтобы столбцы были одинаковые в обоих типах таблиц (обычных и DataTables)
- Для страницы календаря потребуется повозиться с библиотекой https://fullcalendar.io/ - на их сайте есть документация, где описано, как ее можно стилизовать (в самом шаблоне тоже есть стилизация, но ее нужно немного изменить)
- В макете фигмы достаточно дотошно проработаны размеры шрифтов в шапке и строках таблиц \ календаря - используйте их. Пиксель перфект не требуется, небольшие расхождения в отступах не страшны, если только это катастрофически не вредит внешнему виду и восприятию контента (все в рамках адекватности). Вообще надеюсь что разовые просьбы о правках касательно размеров шрифтов или отступов не будут восприниматься в штыки (я сам в браузере смотрю и подбираю все размеры на уже живом сайте, и говорю точный размер, а не дергаю вас в духе "а сделайте так, а теперь так, а теперь верните обратно")
- Изменения в существующие компоненты (кирпичики), используемые на этих двух страницах лучше всего вносить путем "дополнения" а не "переписывания", чтобы не нарушить стандартное поведение существующих компонент (в будущем будут создаваться и другие страницы). Подобные изменения лучше обсуждать \ согласовывать.
Перед тем как взяться за работу, я рассчитываю, что исполнитель ознакомится к макетом и уточнит спорные \ непонятные моменты. Я постарался описать все ключевые "крупные" задачи в рамках этих двух страниц, а различные анимации и эффекты либо уже существуют в шаблоне, либо, если требуется что-то особенное, то они описаны на макете в фигме. Но я мог что-то и упустить, поэтому во избежание недопониманий - если увидите, что я где-то что-то не учел - лучше сразу ткните пальцем. Мне потребуются другие страницы в скором будущем, и я был бы рад найти исполнителя, с которым можно было продолжить работу и в будущем (в рамках таких же разовых мини задач по верстке отдельных страниц).
