Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?

Question

[Andy Koshman]

Всем привет. У меня возник вопрос относительно верстки в blade-шаблонах. Есть два компонента родительский app и дочерний about:

//app.blade.php
<div class="@if(request()->is('About')) about-content @endif">
  <div class="container">
    @yield('content')
  </div>
</div>

//About.blade.php
@extends('app')
@section('content')
<div class="pt-5 pb-5">
  <h2>ABOUT US</h2>
  ...
</div>

<div class="pb-5">
  <h2>MANAGEMENT PHILOSOPHY</h2>
  ...
</div>

@endsection

.about-content {
    background: #FFF;
}

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

<div class="pb-5 management-content" 
  <h2>MANAGEMENT PHILOSOPHY</h2>
  ...
</div>

сделать по типу:

.management-content {
    background: red;
}

Например через ::before подсвечивать этот блок другим цветом, даже за пределами контейнера по всей ширине, мне кажется, не совсем удачным решением. Как это можно реализовать, я так и не понял, поскольку весь контент страницы находится в @yield('content'), где уже размещены два блока. Может быть, существуют какие-то magic алиасы в Laravel, с помощью которых можно найти обходные пути, или же следует пересмотреть логику верстки.

Comments

[Сергей delphinpro]

К вопросу не относится, но замечу, что условные классы лучше писать через директиву @class

<div @class(['about-content' => request()->is('About')])>
  <div class="container">
    @yield('content')
  </div>
</div>

[Виктор]

следует пересмотреть логику верстки

вот это.

Blade тут не причем.

[Andy Koshman]

Виктор, Как бы вы предложили реализовать?

[Виктор]

Andy Koshman,

даже за пределами контейнера по всей ширине, мне кажется, не совсем удачным решением

структура HTML неправильная, видимо. Контейнер должен быть на всю ширину, внутри него должны быть еще контейнеры (они могут быть шаблонами Blade, но это не важно), которые можно делать как на всю, так и не на всю ширину.

[Andy Koshman]

Виктор, Я тут подумал и да, действительно структура халтурная, я сделал общий контейнер на все страницы поверх всего, хотя нужно для каждой страницы сделать свой внутренний контейнер а поверх уже bg лепить. Извиняюсь, совсем забыл как верстать)

Answer 1

[Andy Koshman]

Проблема решена, изменил структуру HTML.

Answer 2

[Сергей delphinpro]

Я бы не делал общий контейнер

<!-- лэйаут -->
<div @class(['about-content' => request()->is('About')])>
    @yield('content')
</div>

<!--Дочерний-->
<div class="pb-5 management-content">
  <div class="container">
    <h2>MANAGEMENT PHILOSOPHY</h2>
    ...
  </div>
</div>

Ну и понятно, к ларавел это никак не относится.

Comments

[Andy Koshman]

Да, я это уже сообразил)