CMPI Редизайн

#верстка #frontend #backend #octoberCMS #laravel

https://cmp-i.com/

В разработку поступил запрос на редизайн главной. Это довольно большой проект- портал со специалистами в области коучинга/менторинга/психологии + личный кабинет. Большая кодовая база как на фронтенде, так и на бэкенде. Естественно одной версткой главной не обойтись, тк это затрагивает основной пул стилей всего сайта. К тому же сложность заключалась и в том, чтобы пересобрать не только стили, но и html фронтенд, местами js и бэкенд.

Проект большой, но встала загвоздка в том, что для него отсутствовала сборка. Точнее она была где-то на ранних этапах, но по гиту так и не получилось ее отыскать. И по итоге имелась небольшая каша из css файлов и основного style.css на 26000 строк кода.

Сборка фронтенда

Так как с фронтендом было совсем все не очень, я взял на себя волевое решение - перебрать фронтенд, сделать адекватную сборку. Так стили разбились на составляющие:

  • plugins - плагины
  • partials - компоненты, присутствующие не только на одной странице
  • pages - отдельные изолирование стили для страниц

По итогу получилась более логичная структура, с которой можно было работать. А 26000 перешли в 16000. Но это я еще не затронул фронтенд кабинета.

Были переработаны все кнопки сайта. Их было большое количество, как и накопившихся мусорных стилей. От больше части я избавился, переписал основные.

Были переработаны Owl-карусели. Их было достаточное количество. Много стилей, старых и лишних. Еще был нюанс, что к каруселям прилагались табы. Это фильтры контента, который брался по ajax, а потом вновь карусель пересобиралась. Была переосмыслена и упорядочено вся механика, стили, js, шаблоны октобер и html.

Так же местами значительно сократил лишние html обертки для элементов. Так были места, где вместо 2-3 ех уровней вложенности, оставалась 1-ин.

Затронутые страницы

Все бы ничего ;), но естественно переработка фронтенда затронула другие страницы. Я надеялся на лучшее, но впринципе получилось неплохо. Было затронуто 10-15% изменений на других страницах. Пришлось уделить 2 дня на редизайн и восставление элементов других страниц. Так как не хотелось это делать быстро и плодить быстрый код, решил уделить нормально времени на переработку остальных страниц как html так и фронтенд.

Все было успешно поправлено, хоть и с недооцененной переработкой в 2 дня.

По гиту за 4 коммита скопилось примерно 100 000 измененных строк кода и 160 изменений в файлах.
Понятное дело что из 100 000 процентов 80 это переработанные файлы плагинов, старые css и множество удаленных файлов как css так и html. Ну и файлов изменных примерно в порядке 50-ти. Но это просто примерных условный показатель проделанной работы с кодовой базой.

Старый дизайн

Новый дизайн

Posted in 2022, backend, frontend, interesting, js, laravel, верстка on Feb 06, 2022.