Explore 'vaadin-split-layout'

[anoblet]

Work can be seen here: https://github.com/anoblet/aybolit/tree/vaadin-split-layout

[lkraav]

@anoblet post a sneak peek screenshot or a short screencap?

[anoblet]

@lkraav https://www.youtube.com/watch?v=StJZ4HwzKOc&feature=youtu.be

[anoblet]

@lkraav I'm writing it in Typescript as that is what I'm familiar with. Trying to resolve two issues with one PR :) Storybook/Typescript/Babel is proving to be a little bit difficult though.

[lkraav]

My original idea was to try to refactor <cxl-app-layout> directly, which provides ability to verify result in existing stories much easier.

But it may be hard to grasp all the details there, we could do a introductory screenshare session.

I just pushed a RC to https://github.com/conversionxl/aybolit/tree/leho-cxl-app-layout definitely rebase to this.

[anoblet]

I intend on bringing in the site specific content (header, navigation, main, footer) soon. My intent is to isolate the functionality of vaadin-split-layout.

I'm open to a screen share session :)

[lkraav]

I intend on bringing in the site specific content (header, navigation, main, footer) soon. My intent is to isolate the functionality of vaadin-split-layout.

Yes, but this creates a relatively large re-implementation of everything 1-column.

Instead, you could patch cxl-app-layout's current template to use vaadin-split-layout, instead of fully custom drawer build, maybe drop most "2c" css, and start from that point.

You'd have a significant head start towards meeting end result expectations.

[anoblet]

The current iteration relies on position. If position is not defined it defers to one column. position="left" uses vaadin-split-layout with the aside column to the left. position="right" places the aside column to the right. If wide is false or the user is on mobile, the aside is placed before the content and the orientation is set to vertical.

[anoblet]

I updated the branch to be refactored based on cxl-app-layout. Looks like a lot of it works apart from some styling of the side bar. Screen capture can be seen here: https://youtu.be/9TQxl7LYo44