Add "vertical layout" template #3

cavasinf · 2021-12-03T09:54:41Z

Description

Add the "vertical" Tabler layout to the bundle.

Tabler demo link : https://preview.tabler.io/layout-vertical.html

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)

Checklist

I updated the documentation (see here)
I agree that this code will be published under the MIT license

cavasinf · 2021-12-03T09:59:21Z

As I can see, <head>, .navbar-nav and .page-wrapper are the same between horizontal layout and vertical layout.

If you think this template is correct,
I can't try to make a _base-layout template instead of duplicates parts in common in vertical and horizontal layout.

kevinpapst · 2021-12-03T10:01:49Z

Can you share a screenshot - what is a vertical layout?

cavasinf · 2021-12-03T10:10:26Z

@kevinpapst Demo links from tabler.io and screnshot from your bundle.

Vertical menu

Demo link: https://preview.tabler.io/layout-vertical.html
How it looks with your bundle: (navbar_condensed : true)

Vertical menu with navbar

Demo link: https://preview.tabler.io/layout-combo.html
How it looks with your bundle: (navbar_condensed : false && user_menu_condensed : false)

Here's a responsive menu:

kevinpapst · 2021-12-03T10:13:50Z

Aha, understand. Yeah, let's try to make it one file. Otherwise changes need to be carried over, what will be forgotten at some point...

cavasinf · 2021-12-03T10:15:13Z

There is a transparent theme too: https://preview.tabler.io/layout-vertical-transparent.html

But there's no variable in tabler.yaml to configure that mode (true/false).
I don't want to break everything right now OR make it complicated.

cavasinf · 2021-12-03T10:17:24Z

Aha, understand. Yeah, let's try to make it one file. Otherwise changes need to be carried over, what will be forgotten at some point...

OK, I'll make it into one file.
I'll commit in the same branch, so same merge request

cavasinf · 2021-12-03T11:06:28Z

tabler.yaml Added new required [enum] option layout
- horizontal (default)
- vertical
Pooling "horizontal" and "vertical" layout into layout.html.twig
Didn't touch at RuntimeExtensionTest.php

cavasinf · 2021-12-03T11:12:19Z

❔ Questions ❔

Layouts are into templates/includes/layout/, did you prefer in another folder/location?

kevinpapst · 2021-12-03T11:14:35Z

I don't think we will end up with dozens of includes, so templates/includes/layout_horizontal.html.twig would be enough for me.

kevinpapst · 2021-12-03T11:16:28Z

General feedback: I know the wording is based on Tabler demo, but I'd prefer horizontal vs vertical "navigation" and not "layout". As that kind of interferes with boxed and fluid layout.

src/Helper/ContextHelper.php

templates/includes/menu.html.twig

Co-authored-by: Kevin Papst <kevinpapst@users.noreply.github.com>

src/Helper/ContextHelper.php

templates/layout.html.twig

cavasinf · 2021-12-10T12:18:54Z

❗ Note/Warning ❗
Do not add xxx_before or xxx_after twig blocks to header , nav-bar, aside, ...

The CSS from Tabler.io uses tilde ~ to define styles.
See: https://github.com/tabler/tabler/blob/02c45fc09d020dd424f526384163ab01ddb58b8f/dist/css/tabler.css#L8009

When adding HTML elements, we can brake those selectors.

kevinpapst · 2022-03-08T16:32:22Z

I would say: that is up to the developer to configure properly: so README is enough.

Can you please create a branch in the demo application so I can test this ... I failed miserably last time I tried 😞

cavasinf · 2022-03-08T17:06:06Z

Demo application doesn't works on my side (Docker environment).
And I'm not the administrator of my PC (Remote desktop), can't install symfony CLI, composer, PHP binaries, ...

I've no privilege to open a discussion in that repo, do you want me to open issue about it ?

kevinpapst · 2022-03-08T17:25:59Z

Wow, sounds as if your company makes the developer life real fun ^^

Jokes aide, I think it is best to keep the demo app in sync with PRs here, so we

have a living documentation and
can test the changes directly in an environment that has no influences from our apps

I am not a docker user, so I cannot provide a docker file, but I assume it shouldn't be to complicated

And I activated discussions for the demo repo.

kevinpapst · 2022-03-08T22:05:17Z

Could you please summarize BC breaks / necessary changes in the initial post?
I just added your branch to the demo app and some parts of the navbar disappeared (haven't checked further yet).

EDIT: the blocks in {% embed '@Tabler/embeds/navbar.html.twig' %}{% endembed %} cannot be overwritten anymore.

cavasinf · 2022-03-09T09:30:14Z

EDIT: the blocks in {% embed '@Tabler/embeds/navbar.html.twig' %}{% endembed %} cannot be overwritten anymore.

Ah.. yes ...
Same problem as here : #3 (comment)

Do we remove the include file and duplicate the code to allows override ?

kevinpapst · 2022-03-09T15:16:10Z

Yeah, if there is no other way we have to duplicate it.

tacman · 2022-03-26T12:18:00Z

My branch of the demo uses calvin's vertical layout:

https://github.com/tacman/TablerBundle-Demo/tree/tac

What's missing/broken that prevents this from being merged? And is this the right place for the discussion?

cavasinf · 2022-03-26T13:22:34Z

@tacman Only override of blocks in '@Tabler/embeds/navbar.html.twig' is missing.

I need to try this PR in the Tabler demo.
From memories, I don't think there's any BC breaks or other missing functionalities.

tacman · 2022-03-26T13:51:58Z

OK, so if I wanted to help out on this, I should fork cavisin's fork, make changes, and submit them there? Wouldn't it be easier if kevin created a new branch on his repo and merged the vertical layout, instead of merging it into main? Sorry for the simple github questions, I think the code is almost functional. The next question is how it should be implemented, a "layout" key in the config, with the ability to override it (and store the layout in the session?)

…

On Sat, Mar 26, 2022 at 9:22 AM CavasinF ***@***.***> wrote: @tacman <https://github.com/tacman> Only override of blocks in ***@***.***/embeds/navbar.html.twig' is missing. I need to try this PR in the Tabler demo. From memories, I don't think there's any BC breaks or other missing functionalities. — Reply to this email directly, view it on GitHub <#3 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEXIQP442WGWO4Y2GOQNQLVB4FSLANCNFSM5JJI57CA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

…rom extend)

cavasinf · 2022-03-26T14:34:26Z

@tacman

I should fork cavisin's fork, make changes, and submit them there?

Depend of what changes you want to make, tell me.

The next question is how it should be implemented, a "layout"
key in the config, with the ability to override it

We have already discuss that functionality with kevinpapst.
There's a big problem with twig, twig doesn't allow block override in embedded from extend.
See research here : #3 (comment)

ATE, your views should extend from the provided layouts

{% extends '@Tabler/layout-horizontal.html.twig' %}

OR

{% extends '@Tabler/layout-vertical.html.twig' %}

See : https://github.com/kevinpapst/TablerBundle/blob/efaf141278845dabceba6b37bde9567785be9292/docs/layout.md

Just push what is missing in that PR,
I've tested in the TablerBundle-Demo and everythings looks fine.

Waiting on @kevinpapst to approve.

templates/layout-vertical.html.twig

# Conflicts: # templates/layout.html.twig

cavasinf · 2022-05-13T12:12:18Z

Hey @kevinpapst, long time not see.

I'm starting a new Client project with TablerBundle, and I want that vertical layout in it.
What is missing/not working to merge it ?

kevinpapst · 2022-05-16T10:27:17Z

@cavasinf I do not know, sorry 😄 too long ago and too many other projects in between, since my last review.
I want to have it as well in my project and will look into it this week.

cavasinf · 2022-05-16T13:43:11Z

Yeah it would be nice, because I still have my personal GitHub link in the composer.json project.
Production environment for my client will come soon, and I'm starting two other projects.

Since I'm not alone to work on it, personal token will not be the solution any longer (for devs or servers)

Friendly reminder, last time I've tested in the Demo project, everything looks clean:
kevinpapst/TablerBundle-Demo#8

…enu, remove excessive whitespaces

kevinpapst

Added some minor changes:

remove global variable layout_type
don't show badge on first level in vertical menu

Awesome stuff, thanks @cavasinf 👍

I will release once I could test it in my app. Demo has no issues anymore!

kevinpapst · 2022-05-17T12:16:41Z

Wohoo 🎉 🚀

Add "vertical layout" template

626fd12

Pooling of "horizontal" and "vertical" layout

b4d91a7