Infolist Sidebar Layout

Hi. I'm trying to organise my View Record by having a main section that holds the main information and then a quarter size sidebar with 2 InfoLists one which is the status info on top and the other a management InfoList below the status. At the moment I have been able to get the columns sorted and get a sidebar, but can't figure out how to get the stacked sidebar!

Any help or guidance on this would be grateful.

Many thanks

LaryAI

1 year ago

Level 58

To achieve a layout with a main section and a sidebar that contains two stacked InfoLists, you can use CSS Flexbox or CSS Grid. Below is an example using Flexbox to create the desired layout.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Infolist Sidebar Layout</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="main-section">
            <!-- Main information goes here -->
            <h1>Main Information</h1>
            <p>This is the main section where the main information is displayed.</p>
        </div>
        <div class="sidebar">
            <div class="info-list status-info">
                <!-- Status InfoList goes here -->
                <h2>Status Info</h2>
                <p>Status details...</p>
            </div>
            <div class="info-list management-info">
                <!-- Management InfoList goes here -->
                <h2>Management Info</h2>
                <p>Management details...</p>
            </div>
        </div>
    </div>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: row;
    height: 100vh;
}

.main-section {
    flex: 3;
    padding: 20px;
    background-color: #f4f4f4;
}

.sidebar {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    background-color: #e4e4e4;
}

.info-list {
    flex: 1;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.info-list:last-child {
    margin-bottom: 0;
}

Explanation

HTML Structure:
- The .container div holds both the main section and the sidebar.
- The .main-section div is for the main content.
- The .sidebar div contains two .info-list divs for the status and management information.
CSS Styling:
- The .container uses display: flex to create a flex container with a row direction.
- The .main-section takes up 3 parts of the available space (flex: 3), while the .sidebar takes up 1 part (flex: 1).
- The .sidebar uses display: flex and flex-direction: column to stack its children vertically.
- Each .info-list is styled with padding, background color, and border to visually separate them.
- The margin-bottom on .info-list ensures there is space between the two lists, except for the last child.

This layout should give you a main section with a sidebar that contains two stacked InfoLists. Adjust the flex values and other styles as needed to fit your specific design requirements.

skoobi

1 year ago

Level 13

Heres my code using Grids (using an alias):

[
            InfolistGrid::make([
                'default' => 4,
                'sm' => 1,
                'md' => 4,
                'xl' => 4,
                '2xl' => 4,
            ])->schema([
                // Main Section
                InfolistGrid::make([
                    'default' => 3,
                    'sm' => 1,
                    'md' => 3,
                    'xl' => 3,
                    '2xl' => 3,
                ])->schema([
                    InfolistSection::make('Animal Details')
                        ->columns([
                            'sm' => 1,
                            'md' => 2,
                            'xl' => 2,
                            '2xl' => 2,
                        ])
                        ->schema([
                            Fieldset::make('Identity')
                                ->schema([
                                    TextEntry::make('tag_number')
                                        ->weight(FontWeight::Bold)
                                        ->color('primary'),

                                    TextEntry::make('name')
                                        ->label('Pedigree Name // Nickname'),

                                    TextEntry::make('dob')
                                        ->label("Born")
                                        ->since(),

                                    TextEntry::make('gender')
                                        ->label("Gender"),
                                ]),

                            Fieldset::make('Management')
                                ->schema([
                                    TextEntry::make('date_sold')
                                        ->label('Date Sold'),

                                    TextEntry::make('vendor_id')
                                        ->label('Sold By'),

                                    TextEntry::make('sold_price')
                                        ->prefix('£'),

                                    TextEntry::make('commission_cost')
                                        ->prefix('£'),

                                    TextEntry::make('other_sales_costs')
                                        ->prefix('£'),

                                    TextEntry::make('sale_notes')
                                        ->columnSpanFull()

                                ]),
                            Fieldset::make('Breeding')
                                ->schema([])
                        ])
                ]),

                // Sidebar Section
                InfolistGrid::make([
                    'default' => 1,
                ])->schema([
                    InfolistSection::make('Status')
                        ->description('')
                        ->columns([
                            'default' => 1,
                        ])
                        ->schema([
                            TextEntry::make('status')
                                ->badge(),

                            TextEntry::make('dob')
                                ->label("Date Born // Bought")
                                ->dateTime(),

                            TextEntry::make('date_sold')
                                ->label('Date Left Farm'),
                        ])
                        ->columnSpan('full'),

                    InfolistSection::make('Status')
                        ->description('')
                        ->columns([
                            'default' => 1,
                        ])
                        ->schema([
                            TextEntry::make('status')
                                ->badge(),

                            TextEntry::make('dob')
                                ->label("Date Born // Bought")
                                ->dateTime(),

                            TextEntry::make('date_sold')
                                ->label('Date Left Farm'),
                        ])
                        ->columnSpan('full'),
                ]),
            ]),
        ];

Its just not doing anything to the layout

skoobi

1 year ago

Best Answer

Level 13

Managed to find what the issue was.

I wasnt defining a ->columnSpan() for the grid.

return [
            InfolistGrid::make([
                'default' => 1,
                'md' => 4,
                'xl' => 4,
                '2xl' => 4,
            ])->schema([
                // Main Section
                InfolistGrid::make([
                    'default' => 3,
                    'sm' => 1,
                    'md' => 3,
                    'xl' => 3,
                    '2xl' => 3,
                ])->schema([
                    InfolistSection::make('Animal Details')
                        ->columns([
                            'default' => 1,
                            'md' => 2,
                            'xl' => 2,
                            '2xl' => 2,
                        ])
                        ->schema([
                            Fieldset::make('Identity')
                                ->schema([
                                    TextEntry::make('tag_number')
                                        ->weight(FontWeight::Bold)
                                        ->color('primary'),

                                    TextEntry::make('name')
                                        ->label('Pedigree Name // Nickname'),

                                    TextEntry::make('dob')
                                        ->label("Born")
                                        ->since(),

                                    TextEntry::make('gender')
                                        ->label("Gender"),
                                ]),

                            Fieldset::make('Management')
                                ->schema([
                                    TextEntry::make('date_sold')
                                        ->label('Date Sold'),

                                    TextEntry::make('vendor_id')
                                        ->label('Sold By'),

                                    TextEntry::make('sold_price')
                                        ->prefix('£'),

                                    TextEntry::make('commission_cost')
                                        ->prefix('£'),

                                    TextEntry::make('other_sales_costs')
                                        ->prefix('£'),

                                    TextEntry::make('sale_notes')
                                        ->columnSpanFull()

                                ]),
                            Fieldset::make('Breeding')
                                ->schema([])
                        ])
                ])->columnSpan(3),

                // Sidebar Section
                InfolistGrid::make([
                    'default' => 1,
                ])->schema([

                    // First Sidebar InfoList
                    InfolistSection::make('Status')
                        ->description('')
                        ->columns([
                            'default' => 1,
                        ])
                        ->schema([
                            TextEntry::make('status')
                                ->badge(),

                            TextEntry::make('dob')
                                ->label("Date Born // Bought")
                                ->dateTime(),

                            TextEntry::make('date_sold')
                                ->label('Date Left Farm'),
                        ])
                        ->columnSpanFull(),

                    // Second Sidebar InfoList (Management InfoList)
                    InfolistSection::make('Management')
                        ->columns([
                            'default' => 1,
                        ])
                        ->schema([
                            TextEntry::make('status')
                                ->badge(),

                            TextEntry::make('dob')
                                ->label("Date Born // Bought")
                                ->dateTime(),

                            TextEntry::make('date_sold')
                                ->label('Date Left Farm'),
                        ])
                        ->columnSpanFull(),
                ])->columnSpan(1),
            ]),

Please or to participate in this conversation.