Change Shell Layout #240

Ajotah98 · 2024-02-23T11:23:19Z

Ajotah98
Feb 23, 2024

Hello!

I've been tinkering with Tabler.io since I'm building an internal application to report my work hours on something different from what my company controls.

Well, I've discovered that by modifying the shell.handlebars as follows:

<!DOCTYPE html>
<html lang="{{language}}" style="font-size: {{default font_size 18}}px">
<head>
    <meta charset="utf-8"/>
    <title>{{default title "SQLPage"}}</title>

    <link rel="stylesheet" href="/{{static_path 'sqlpage.css'}}">
   {{#each (to_array css)}}
        {{#if this}}
            <link rel="stylesheet" href="{{this}}">
        {{/if}}
   {{/each}}

   {{#if font}}
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family={{font}}&display=fallback">
        <style>:root { --tblr-font-sans-serif: '{{font}}', Arial, sans;}</style>
    {{/if}}

    <script src="/{{static_path 'sqlpage.js'}}" defer></script>
    {{#each (to_array javascript)}}
        {{#if this}}
            <script src="{{this}}" defer></script>
        {{/if}}
    {{/each}}

    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="{{description}}"/>
    {{#if norobot}}
        <meta name="robots" content="noindex,nofollow">
    {{/if}}

    {{#if refresh}}
        <meta http-equiv="refresh" content="{{refresh}}">
    {{/if}}
    <meta name="generator" content="SQLPage"/>
</head>

<body 
    {{#if layout}} class={{layout}} 
        {{else}}class="layout-boxed"{{/if}}
    {{#if theme}}data-bs-theme="{{theme}}"{{/if}}>
<div class="page">
    {{#if title}}
        <nav class="navbar navbar-expand-md navbar-light">
            <div class="container-fluid">
                <a class="navbar-brand flex-grow-1 overflow-hidden" href="{{#if link}}{{link}}{{else}}/{{/if}}">
                    {{#if image}}
                        <img src="{{image}}" alt="{{title}}" width="32" height="32"
                             class="navbar-brand-image">
                    {{/if}}
                    {{#if icon}}
                        {{~icon_img icon~}}
                    {{/if}}
                    <h1 class="mb-0 w-0 fs-2">{{title}}</h1>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbar-menu">
                    <ul class="navbar-nav ms-auto">
                        {{#each (to_array menu_item)}}
                            {{#if (eq (typeof this) 'object')}}
                                <li class="nav-item{{#if this.submenu}} dropdown{{/if}}">
                                <a class="nav-link {{#if this.submenu}}dropdown-toggle{{/if}}" href="{{#if this.link}}{{this.link}}{{else}}#{{/if}}"
                                    {{#if this.submenu}}data-bs-toggle="dropdown" data-bs-auto-close="outside"{{/if}}
                                    role="button"
                                >
                                    {{this.title}}
                                </a>
                                {{#if this.submenu}}
                                    <div class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
                                        {{#each this.submenu}}
                                            <a class="dropdown-item" href="{{this.link}}">
                                                {{this.title}}
                                            </a>
                                        {{/each}}
                                    </div>
                                {{/if}}
                                </li>
                            {{else}}
                                <li class="nav-item">
                                    <a class="nav-link text-capitalize" href="{{this}}.sql">{{this}}</a>
                                </li>
                            {{/if}}
                        {{/each}}
                    </ul>
                    {{#if search_target}}
                        <form class="d-flex" role="search" action="{{search_target}}">
                            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"
                                   name="search">
                            <button class="btn btn-outline-success" type="submit">Search</button>
                        </form>
                    {{/if}}
                </div>
            </div>
        </nav>
    {{/if}}
    <main class="page-wrapper container-xl pt-3 px-md-5 px-sm-3">
        {{~#each_row~}}{{~/each_row~}}
    </main>
</div>
<div class="w-100 text-center fs-6 my-2 text-secondary">
    {{#if footer}}
        {{{markdown footer}}}
    {{else}}
        <!-- You can change this footer using the 'footer' parameter of the 'shell' component -->
        Built with <a class="text-reset" href="https://sql.ophir.dev" title="SQLPage v{{buildinfo 'CARGO_PKG_VERSION'}}">SQLPage</a>
    {{/if}}
</div>
</body>
</html>

To highlight the change, it's here:

<body 
    {{#if layout}} class={{layout}} 
        {{else}}class="layout-boxed"{{/if}}
    {{#if theme}}data-bs-theme="{{theme}}"{{/if}}>

If you notice, simply the "layout" option is added to the shell.

But if you define layout as 'layout-horizontal' you have to see this:

To see this:

I'm trying to include some of the layouts that Tabler provides, but I hope this gives more variety into the applications developed with SQLPage!

lovasoa · 2024-02-24T19:09:30Z

lovasoa
Feb 24, 2024
Maintainer

I added support for customizing the layout from the official shell, this will be in v0.19.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Change Shell Layout #240

{{title}}

Replies: 1 comment

{{title}}

Select a reply

Change Shell Layout #240

Ajotah98 Feb 23, 2024

Replies: 1 comment

lovasoa Feb 24, 2024 Maintainer

Ajotah98
Feb 23, 2024

lovasoa
Feb 24, 2024
Maintainer