Flex theme and resize columns

[ghinda]

I'm creating the pull-request to keep all discussion in the same place, but let's merge it in only after everything is done.

[ghinda]

Nice! Some great work here! :tada:

I'm not really sure about the "container" property. Using it means more markup versions, and more theme versions (like for the bin theme). So it would be hard to maintain.

I think the better approach would be to only use the CSS theme for it, and not use the container property. Can you try refactoring the flex theme to work with the default markup?

The colexpand plugin looks great so far! I'll take another look at it after you finish it up.

[armoucar]

Yep, maintenance does get complicated with more container types. I knew it from the beginning, it's just that I needed something working quickly to check what's your feedback on it. I'll get some time to work on this refactoring. Thanks!

[armoucar]

Hello @ghinda,

I tried and tried but I found it very hard (or even, not possible) to refactor the template in a way I could display jotted as it is today (default theme) and also allow repositioning of panes through flexbox (custom flexbox themes).

Having the template with ul.jotted-nav turns it's difficult to reposition code panes where I want. Having the template without ul.jotted-nav turns it's difficult to create a selection pane bar - like the default theme has.

My decision then was to have both in the template, so it's the theme's creator responsibility to hide and show the option they want. The default value for the new .jotted-pane-title[display] is none. In case of creating a new flexbox theme, is enough to hide .jotted-nav and show the .jotted-pane-title.

---

I also improved the colexpand plugin to support the console plugin and to use percentage widths on the panes.

---

EDIT: Text was too confusing... Hopefully it is a bit better to understand now.

[ghinda]

Let's approach this a bit differently then.

Since the colexpand plugin requires flex-theme to work, what do you think about merging everything into the plugin?

That would mean:

• When the plugin is constructed, manipulate the DOM to insert the new nodes you need (eg. jotted-title). You're already doing some of that now.
• Instead of src/themes/flex.styl, you would have plugins/colexpand.styl. Also change the class to jotted-plugin-colexpand in the CSS. Jotted automatically adds the class to the container, it does so for every plugin (eg. jotted-plugin-$NAME).

Some advantages:

• We don't need the container property
• We don't need to specify the theme when using the plugin
• No changes required in core
• Easier to maintain

[armoucar]

There you go... I like your suggestions, it is clean to keep everything packaged in the plugin. So there's nothing to do once you set the plugin in. Thanks

[ghinda]

Awesome work! :beers: x 10 :shipit:

I renamed the plugin to pen since it brings a codepen-like layout, and made a couple of tweaks to keep everything in the plugin files and not have to make any changes to core.

A quick tip about the CSS: please use vanilla CSS in the future. I'm using Stylus just for nib and bundling files. So no nesting, semicolonless-ing, variables, etc..

Thanks!

[ghinda]

And released as 1.5.0.