New sidebar layout for theme-tabler

[susanu]

Hi guys

In one of my cruds i need to display some data related to the entry but in a sidebar.
I achieved this by creating a new layout called horizontal_right_sidebar_dark that displays the content as usual and the sidebar which show some widgets configured in setupShowOperation, section sidebar.

Steps how to do this:

1. Copy vendor/backpack/theme-tabler/resources/views/layouts/horizontal_dark.blade.php to resources/views/vendor/backpack/theme-tabler/layouts/horizontal_right_sidebar_dark.blade.php
2. Change the following lines

- <div class="container-fluid animated fadeIn">
-     @yield('before_content_widgets')
-     @yield('content')
-     @yield('after_content_widgets')
- </div>

+ <div class="container-fluid animated fadeIn">
+     <div class="row">
+         <div class="col-8">
+             @yield('before_content_widgets')
+             @yield('content')
+             @yield('after_content_widgets')
+         </div>
+ 
+         <div class="col-4">
+             @include(backpack_view('inc.widgets'), [ 'widgets' => app('widgets')->where('section', 'sidebar')->toArray() ])
+         </div>
+     </div>
+ </div>

3. Add the following line in config/backpack/theme-tabler.php

'layout' => 'horizontal_dark',

+ 'sidebar_layout' => 'horizontal_right_sidebar_dark',

4. In setupShowOperation add the following lines to enable the new layout

if ($sidebarLayout = config('backpack.theme-tabler.sidebar_layout')) {
    config(['backpack.theme-tabler.layout' => $sidebarLayout]);
}

Let me know what you think!

Pretty simple example:

if ($sidebarLayout = config('backpack.theme-tabler.sidebar_layout')) {
    config(['backpack.theme-tabler.layout' => $sidebarLayout]);
}

Widget::add([
    'type' => 'alert',
    'class' => 'alert alert-danger mb-2',
    'heading' => 'Important information!',
    'content' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti nulla quas distinctio veritatis provident mollitia error fuga quis repellat, modi minima corporis similique, quaerat minus rerum dolorem asperiores, odit magnam.',
    'close_button' => true, // show close button or not
]);

Widget::add([
    'type' => 'alert',
    'class' => 'alert alert-danger mb-2',
    'section' => 'sidebar',
    'heading' => 'Important information!',
    'content' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti nulla quas distinctio veritatis provident mollitia error fuga quis repellat, modi minima corporis similique, quaerat minus rerum dolorem asperiores, odit magnam.',
    'close_button' => true, // show close button or not
]);

Widget::add([
    'type' => 'alert',
    'class' => 'alert alert-danger mb-2',
    'section' => 'sidebar',
    'heading' => 'Important information!',
    'content' => 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti nulla quas distinctio veritatis provident mollitia error fuga quis repellat, modi minima corporis similique, quaerat minus rerum dolorem asperiores, odit magnam.',
    'close_button' => true, // show close button or not
]);

[pxpm]

Hey @susanu

From the screenshot is not very perceptive, but is that a "full page width" (row) with col-md-8 | col-md-4 or similar ?

If you used the div widget, https://backpackforlaravel.com/docs/6.x/base-widgets#div-1 couldn't we achieve the same result without creating a new layout specifically for this ?

Thanks for the idea, let me know!

Cheers

[susanu]

Hi @pxpm,

I managed to do it with div widget, but the downside of this is that columns are not integrated into col-md-8

vs the layout i showed

[pxpm]

I get it. 👍

I think it's fine if we add new layouts to themes but we need to think very well if it's really worth to introduce a new layout or if it should be a "setting" on the current layouts.

One thing that immediately stood out to me is the fact that this is the right_sidebar, are we going to create the left_sidebar ? Probably some people will want the left_right_sidebar. Maybe then a top_bar? You see were I am going ?

Another thing that I don't like is the fact we call it sidebar. The way I see it, this is a "two column" layout. The vertical_transparent should be able to have a "two column" layout for the content as you propose here for the horizontal no? In that case "sidebar" become ambiguous because that layout already has a "sidebar".

I would prefer if we could introduce this as a "layout" setting or something similar, and find a way to "wire" the widgets to those sections.

Just spit balling from the top of my head:

• content_columns => 2, // how many columns the "content part" will take on the layout
• show_content_on_column => 1, // in what column the "content" (table, columns etc are displayed)

Then maybe having a "convention" on stack names to push widgets to those columns, like column-stack-1, column-stack-2 something like that.

You have been exploring this way more than me in the last times, do you think this is feasible ? Can we come up with a way to make this work with "any layout" without creating a specific layout for it ?

Cheers

[susanu]

Hi @pxpm,

I think all layouts should have the content split into: left-content, content and right-content.
The content is always displayed and left-content and right-content are displayed if you add widgets to the sections.

What do you think?

[pxpm]

Ok ... that simplifies it even more, I love it! Let's try to keep this line of thought.

So the "content" (table, columns etc) always have 3 sections (left, center, right). Content is always displayed on center (what we have now). How could we define the "size" of the left and right ? With theme settings ?

'left_content' => 'col-md-3 col-sm-12',
'right_content' => null
'center_content' => // we get this from the `contentClass` of the operation if not defined ?  https://github.com/Laravel-Backpack/CRUD/blob/39f51338767ae5805650369ee679e2f774d00f2d/src/config/backpack/operations/list.php#L12

Is this what you had in mind ?