Правки по проекту luxstore

Сегодня хотел рассказать о правках на сайте luxstor.ru

Ко мне обратился руководитель компании ABP Company и поставил несколько задач:
— изменить шапку сайта
— сверстать страницу
— стилизовать список.

Расскажу о каждой подробнее.

Верстка страницы «Партнерам»

Страница до:

Страница после:

Также были добавлены модальные окна, которые появляются при нажатии на кнопки «Заказать звонок» и «Написать нам»

Стили заголовков, текста, кнопок, полей форм, модальных окон мне не нужно было писать заново, они уже были созданы на сайте.

Когда я разрабатывал текущий сайт, я сделал все блоки независимыми, чтобы потом при появлении таких задач можно было быстро, как на конструкторе собирать формы и страницы.

Так делают не все, я часто встречаю такие сайты, в которых много одинаковых блоков, кнопок, полей. Код оформления для каждого блока написан повторно. Это увеличивает размер кода и замедляет сайт.

Изменение шапки

С шапкой пришлось повозится, так как кроме версии для компьютера, нужно было менять еще и адаптивный вариант. Сделать это нужно было быстро, чтобы пользователи не видели разваливающейся страницы пока я редактирую код.

Я сделал чтобы все изменения в новой шапке были видны только администратору сайта, а когда все было готово, просто отключил это условие и подменил шапки, никто и не заметил 🙂

Шапка до:

И шапка после:

Стилизация списка

Изначальный вид списка:

На такой список не хочется смотреть второй раз. Нет отступов, отделения сущностей друг от друга. Теряешься когда смотришь на него.

Заказчик хотел выполнить его в стиле списка заказов и в добавок пожелание: «Чтобы было красиво!» 🙂

Не вопрос, сделаем:

Другое дело!

Список стал читабельнее: четкое разделение пунктов, ярко выделен статус, выделена кнопка действия.

Изменение оформления мобильного меню

Мне захотелось изменить мобильное меню, текущий вариант мне не очень нравился. Я делал внешний вид мобильной версии сам, я думаю ничего страшного если мы немного улучшим его вид.

Было:

В верхней панели меня не устраивали маленькие внутренние отступы. Маленький шрифт, текст по центру выглядит как-то неаккуратно. Меню не нужно столько места.

Стало:

Увеличил отступы, шрифт, уменьшил ширину блока с меню.

Спасибо за просмотр поста.
Хорошего вам дня!