Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

make tool bar full width using a layout #2

Merged
merged 2 commits into from
May 18, 2024
Merged

make tool bar full width using a layout #2

merged 2 commits into from
May 18, 2024

Conversation

PGimenez
Copy link
Collaborator

The issue with the toolbar is that it needs to be inside a q-headerand inside a q-layout. We do this in the component gallery with this code

StippleUI.layout(style="margin:auto;max-width:800px",
    [
        quasar(:header, style="background:darkblue", toolbar(
            [
            btn(; dense=true, flat=true, round=true, icon="menu", @click("left_drawer_open = !left_drawer_open")),
            toolbartitle("Genie Component Gallery")
        ],
        ),
        ),
...

To use this, I've defined a page_layout function in layout.jl and used it in every _uipage. This works, but isn't the best option and needs some improvements.

Ideally, you'd define the layout like
layout.jl:

StippleUI.layout(style="margin:auto;max-width:800px",
    [
        quasar(:header, style="background:darkblue", toolbar(
            [
            btn(; dense=true, flat=true, round=true, icon="menu", @click("left_drawer_open = !left_drawer_open")),
            toolbartitle("Genie Component Gallery")
        ],
        ),
        ),
        page(model, partial=true, [@yield]) <--- this injects the page's content
])
...

and then use the layout in the page definition as @page("/home", "home_ui.jl", layout="layout.jl", model = HOME). That way you don't have to include("layout.jl")and then call page_layoutin every page.

However, for some reason if the layout.jl has a StippleUI.layout component then the resulting page looks weird, as if no styles were applied. I'll need to figure out how to fix this in a new issue.

@PGimenez
Copy link
Collaborator Author

I've opened an issue about this here

GenieFramework/Stipple.jl#281

In the meanwhile, this PR implements a workaround to use layouts with Quasar components.

@PGimenez
Copy link
Collaborator Author

I just realised that when each page is first loaded, the app throws an error about page_layoutnot existing....will have to find another way to do this =(

@pw0908
Copy link
Member

pw0908 commented May 18, 2024

Weirdly enough, it only fails on the first load of the page. If you refresh it, the code works...

@pw0908
Copy link
Member

pw0908 commented May 18, 2024

Adding @eval did the trick for some reason.

@pw0908 pw0908 merged commit a1de96f into main May 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants