Темы AdminLTE: небольшие разногласия с коллегами (мягкие навыки) - PullRequest
Новая
       50

Темы AdminLTE: небольшие разногласия с коллегами (мягкие навыки)

0 голосов
/ 02 апреля 2020

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

Наша рабочая среда:

  • Laravel
  • AdminLTE
  • Два laravel охранника для «партнера» и «персонала». Каждый тип пользователя (партнер / персонал) имеет доступ к разному набору страниц с использованием разных наборов контроллеров и разных поддоменов.

Администратор LTE поставляется с некоторыми скинами, которые вы можете применить к вашей <body>, например, тема скинов. Вот так выглядит наша страница. Просто для сравнения, если вы удалите класс 'skin-blue', наш веб-сайт будет выглядеть так .

Мы были наш клиент попросил изменить цвет верхней панели навигации для персонала. Итак, поскольку цвета на данный момент добавляются скином adminLTE, я подумал, что было бы лучше создать вторую тему для персонала, назвав ее «skin-staff», а затем в нашем базовом блейд-файле проверить, для чего Охранник используется, и добавьте класс соответствующим образом. 

<body class="@if(get_guard() === 'partner') skin-blue @else skin-staff @endif" ...>

Я сделал копию исходного синего файла скина, переименовал его в skin-staff и просто изменил цвет необходимых элементов. Я подумал, что это лучший способ go об этом, но разработчик, который должен был просмотреть мой github Pull Request, сказал, что, поскольку это было такое небольшое изменение, не было необходимости создавать новый скин. Его предлагаемое решение состояло в том, чтобы просто добавить css классы в блейд-файл, что-то вроде: 

<head>

…

<style type="text/css">
@if (get_guard() === 'staff')
   .skin-blue .main-header .navbar{
       background-color:#bdac3c
   } 
   .skin-blue .main-header .navbar .sidebar-toggle:hover{
        background-color:#ac9b2b
   }
   .skin-blue .main-header .logo{
         background-color:#bdac3c;
   }

   … // and other classes
@endif
</style>

Теперь, для меня это не правильно, потому что мы смешиваем логи c для персонала и сторона партнера без четкого способа их дифференцировать. Если мы используем скины, мы можем просто сказать что-то вроде «Верхняя панель навигации желтого цвета , потому что мы используем класс skin-staff». И «Мы используем класс скинов , потому что мы на страже персонала». Предложения ясны и просты. Однако, добавив raw CSS в наш блейд-файл, мы получим что-то вроде "Верхняя панель навигации желтого цвета , потому что мы используем скины синего цвета , а также мы находимся на Охранник персонала , а также мы добавили несколько пользовательских CSS для охраны персонала ". Дополнительные изменения, которые мы вносим в систему, не следуют шаблону, используемому adminLTE, для меня они просто похожи на шум. Например, если бы нам пришлось делать это еще пять раз, в нашем базовом файле blade-сервера было бы много CSS, что, я думаю, выглядело бы плохо и заставило бы нас в конечном итоге принять решение об использовании системы скинов adminLTE, то, что мы могли бы сделать прямо сейчас.

Но, будучи настолько упрямым, насколько я знаю, я не знаю, имею ли я правильную идею или просто хочу что-то делать мой путь .

Что вы думаете, ребята? Лучше создать новый скин, даже если большая часть кода CSS внутри файла скина будет дублирована, но это позволит нам придерживаться существующего способа работы, или лучше просто добавить код в блейд-файл и не думать больше об этом?

Спасибо за ваши идеи

1 Ответ

0 голосов
/ 02 апреля 2020

Это вопрос, основанный на мнениях, здесь нет четкого правильного или неправильного ответа.

Лично я согласен с вашим коллегой, зачем копировать всю тему, которая состоит из сотен строк, просто изменить несколько классов?

Тем не менее, мне лично не нравятся стили, живущие в DOM под тегом стиля.

Почему бы не создать новый файл CSS, содержащий стили: 

.skin-blue .main-header .navbar{
    background-color:#bdac3c
} 
.skin-blue .main-header .navbar .sidebar-toggle:hover{
    background-color:#ac9b2b
}
.skin-blue .main-header .logo{
    background-color:#bdac3c;
}

… // and other classes

И затем, если вы включите этот файл после базовой темы skin-blue CSS, ваши обновленные изменения скина персонала будут иметь приоритет.

Примерно так : 

<link rel="stylesheet" href="{{ asset('css/skin-blue.css') }}">
@if (get_guard() === 'staff')
<link rel="stylesheet" href="{{ asset('css/skin-staff.css') }}">
@endif

Это сохраняет абстракцию ваших CSS внутри CSS файлов (и вне DOM), но переписывает только то, что нужно.

Это также означает что если вам нужно обновить общий стиль между двумя темами, вам не нужно вносить изменения в два разных файла; вам просто нужно изменить файл skin-blue.css.

...