[TW5] PanFlex Layout

[BurningTreeC]

Hello folks,

I'm tweaking on a Layout concept called PanFlex on http://panflex.tiddlyspot.com - it still has some quirks -
But I'll show it off anyway ;)

This concept uses my pan widget to create 4 draggable bars around the story river that let you show and hide a left- top- right- and bottom panel
Each panel can hold the content you like by tagging tiddlers with: $:/tags/LeftBar $:/tags/TopBar $:/tags/BottomBar ... the right bar is the sidebar and remains untouched 'cause it's a holy cow

If you like to take a look and test, I'd appreciate if you let me know if you find it useful and especially if you discover some errors and quirks

The stylesheet and calculations a pretty complex and I hope I can fix the remaining bugs soon

On startup, some people get the red error message of disaster but it was reported that after a reload it doesn't appear anymore
To debug this, if you got the error please consider leaving a message here and which browser and operating system you were using, that'd be great :)!

All the best,

BurningTreeC

[@TiddlyTweeter]

You might want to advise that on first open you can get a JavaScript error. Its goes away on subsequent reload. (This is a known quirk. Its something to do with getting JS in place? Often not encountered by the developer as they don't open for the first time more than once :-)

Lovely stuff.

J.

On Thursday, 1 March 2018 21:02:46 UTC+1, BurningTreeC wrote:

Hello folks,

I'm tweaking on a Layout concept called PanFlex on http://panflex.tiddlyspot.com - it still has some quirks -
But I'll show it off anyway ;)

This concept uses my pan widget to create 4 draggable bars around the story river that let you show and hide a left- top- right- and bottom panel
Each panel can hold the content you like by tagging tiddlers with: $:/tags/LeftBar $:/tags/TopBar $:/tags/BottomBar ... the right bar is the sidebar and remains untouched 'cause it's a holy cow

If you like to take a look and test, I'd appreciate if you let me know if you find it useful and especially if you discover some errors and quirks

The stylesheet and calculations a pretty complex and I hope I can fix the remaining bugs soon

All the best,

BurningTreeC

[BurningTreeC]

You might want to advise that on first open you can get a JavaScript error. Its goes away on subsequent reload. (This is a known quirk. Its something to do with getting JS in place? Often not encountered by the developer as they don't open for the first time more than once :-)

Thanks! I'll take a better look at the pan widget, maybe I can prevent that error...

I've opened the page on Beaker Browser now for the first time, there's no such error, on chromium neither. I haven't accessed it on those browsers before

Could this error in general be related to safari?

BTC

[@TiddlyTweeter]

I get it on FF 52 (after clearing cache). I'll try other browsers now....

Google chrome latest, no problem. TiddlyDesktop (chrome again) no problem. Opera latest, fine.

Maybe its not an issue to worry about, though I can replicate it in FF. Maybe its just an older FF issue?

Best wishes
Josiah

[TonyM]

Love it,

This would be a great option on tiddlywikis where it could be toggled. Especially if it were possible to select

tttttttttttttttt

l      m     r 

bbbbbbbb

or even better 

tttttttttttttttR

l      m      R

lbbbbbbbbb

etc

Thus except for columns within tiddlers this covers the vast majority of layouts we could ask for.

Great Work.

Tony

On Friday, March 2, 2018 at 7:02:46 AM UTC+11, BurningTreeC wrote:

Hello folks,

I'm tweaking on a Layout concept called PanFlex on http://panflex.tiddlyspot.com - it still has some quirks -
But I'll show it off anyway ;)

This concept uses my pan widget to create 4 draggable bars around the story river that let you show and hide a left- top- right- and bottom panel
Each panel can hold the content you like by tagging tiddlers with: $:/tags/LeftBar $:/tags/TopBar $:/tags/BottomBar ... the right bar is the sidebar and remains untouched 'cause it's a holy cow

If you like to take a look and test, I'd appreciate if you let me know if you find it useful and especially if you discover some errors and quirks

The stylesheet and calculations a pretty complex and I hope I can fix the remaining bugs soon

All the best,

BurningTreeC

[BurningTreeC]

Love it,

This would be a great option on tiddlywikis where it could be toggled. Especially if it were possible to select

tttttttttttttttt

l      m     r 

bbbbbbbb

or even better 

tttttttttttttttR

l      m      R

lbbbbbbbbb

etc

Thanks Tony,
That's a very good idea, but also very very complicated to do the way I'm doing it (which is anarcho-freestyle)
I've come to a point where the stylesheet is that complicated that I fear to change it
It needs to be restructured into logically connected blocks, then it could be possible to make more layout variants happen

Thus except for columns within tiddlers this covers the vast majority of layouts we could ask for.

I could add a viewtemplate for tiddlers that looks the same as the page layout, how about that?

Great Work.

Tony

 

 BTC

[David Gifford]

Yet another very cool TiddlyWiki feature!

Might I suggest some kind of small icon to indicate dragging - like this one:

 https://www.google.com.mx/search?q=drag+icon&client=firefox-b-1-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj63LDi2c3ZAhVl5YMKHev7C-AQ_AUICigB&biw=1708&bih=789#imgrc=1jQp7oitIf9XiM:

instead of black bands? I imagine most TiddlyWikis published by users would not use your opening screen with instructions, so it needs to be more obvious for THEIR users where they can find this hidden stuff.

On Thursday, March 1, 2018 at 2:02:46 PM UTC-6, BurningTreeC wrote:

Hello folks,

I'm tweaking on a Layout concept called PanFlex on http://panflex.tiddlyspot.com - it still has some quirks -
But I'll show it off anyway ;)

This concept uses my pan widget to create 4 draggable bars around the story river that let you show and hide a left- top- right- and bottom panel
Each panel can hold the content you like by tagging tiddlers with: $:/tags/LeftBar $:/tags/TopBar $:/tags/BottomBar ... the right bar is the sidebar and remains untouched 'cause it's a holy cow

If you like to take a look and test, I'd appreciate if you let me know if you find it useful and especially if you discover some errors and quirks

The stylesheet and calculations a pretty complex and I hope I can fix the remaining bugs soon

All the best,

BurningTreeC

[David Gifford]

Or even better, the simple white boxes used by image editing programs to indicate that you can drag to expand a layer or element.

[BurningTreeC]

Yet another very cool TiddlyWiki feature!

Might I suggest some kind of small icon to indicate dragging - like this one:

 https://www.google.com.mx/search?q=drag+icon&client=firefox-b-1-ab&dcr=0&source=lnms&tbm=isch&sa=X&ved=0ahUKEwj63LDi2c3ZAhVl5YMKHev7C-AQ_AUICigB&biw=1708&bih=789#imgrc=1jQp7oitIf9XiM:

instead of black bands? I imagine most TiddlyWikis published by users would not use your opening screen with instructions, so it needs to be more obvious for THEIR users where they can find this hidden stuff.

Thanks David!

Yes, this is a work-in-progress demo and I want to change the black bars, thanks for the idea!
The width of the bars will be configurable soon, especially useful for mobile devices
I was thinking about a thin svg line centered inside those bars, with something in the center of the line that indicates that it's draggable
That could be done with css and needs some googling

I'll post here if I have updates on this

Simon

[BurningTreeC]

I accept good ideas for the bars, there are ways to configure how they get styled

If there's interest, I'll make that configurable, if not, I'll try finding a solution I find suitable