TiddlyFlex - a new Flexbox Layout for TiddlyWiki

Plugins
, ,
#26

Hi @JanJo ,

now by default each tiddler gets a class that represents the amount of shown columns:

.tc-tiddlyflex-column-1 if one column is shown, .tc-tiddlyflex-column-2 if two are shown and so on.

That enables you to style tiddlers by the amount of shown columns:

.tc-tiddlyflex-column-5 .tc-tiddler-frame {
padding: 10px;
}

for example

1 Like
#27

That should allow me to approximate;

#28

This is very smart…how would you organize to have different tiddler controls when eg showing more than one column?

#29

Hi @JanJo ,

one could create a hamburger menu with the tag $:/tags/ViewToolbar that shows all tiddler controls in a popup and is wrapped in a div with the class tc-tiddlyflex-shown-when-narrow

then you hide the page control buttons above a certain amount of columns:

.tc-tiddler-controls .tc-tiddlyflex-shown-when-narrow {
display: none;
}

<$list filter="[subfilter<tdff.tiddlyflex-enlist-columns>count[]compare:number:gteq[3]]" variable="column">

.tc-tiddlyflex-column-<<column>> .tc-tiddler-controls:not(.tc-tiddlyflex-shown-when-narrow) {
display: none;
}

.tc-tiddlyflex-column-<<column>> .tc-tiddler-controls .tc-tiddlyflex-shown-when-narrow {
display: block;
}

</$list>

I haven’t tested this though

#30

I will add such a button tonight, it really makes sense. I’ve got a working prototype now and it’s nice

1 Like
#31

…will be used if there are exactly two columns, or two or more columns?

I checked that pixels work as well in your layout-options, so it would be possible to use it with the sidebar-resizer I made a quick test combining the two…so far the line to controlbar does not appear on the right…but on the left interestingly, where it of course cannot anything anything with the current code. But I guess @oeyoews would be willing to cooperate on this if a stable state is reached.

New TiddlyWiki Sidebar Resizer
#32

Hi all,

the Hamburger menu is now added in version 0.0.64
It can be configured when the hamburger is shown (4 columns is standard) when the sidebar is hidden and when the sidebar is shown (3 columns)

#33

I hope we can implement a hamburger menu on tiddlers viewtoolbar in a similar way.

#34

if there are exactly 2 columns…

Yes, I’ve seen that pixels work for the width of the sidebar.
I’m about to implement my own sidebar resizer using eventcatcher widgets.
No need for additional Javascript, just wikitext and css

1 Like
#35

This would be really cool! Could you build it to be adaptable to work with other layouts as well?

#36

@JanJo no that’s impossible for me. It will be really custom-made for the TiddlyFlex layout.

#37

I guess here it would be usefull to have a 2+ columns css. Styles you implement to save sapce will remain usefull with more columns

#38

That would be a pity! Could you try to make it work with the standart-layout? Sorry for insisting…

#39

Therefor I would need to change the standard layout :grinning:

#40

Hi @JanJo

I have now added a sidebar resizer.
It needs testing though.
It can be enabled, it’s disabled by default

Best wishes,
Simon

1 Like
#41

Thank you! It works fine…but I am not convinced of the optical concept. I would prefer a more minimalist design: a thin (invisible) line that turns blue if you hover.
If it was less visible, there would be no need to turn it on and off at all

#42

Re Sidebar Resizer

Actually “I really like” what @BurningTreeC did here :clap:, no carful fine mouse control needed (as has a big target) and the mechanism itself can be turned on and off with a click.

  • Perhaps a Page Control Button for this would be better than only a checkbox in a tiddler.
  • I wanted to make the sidebar smaller than it is allowing me, I found I just need to set this lower $:/config/tiddlyflex/sidebar/width you could call it “the minimum sidebar width” (excluding zero when closed).
#43

Once more very cool multi-columness!. My one thought is ensembles.
hides

On your previously awesome multicolumn layouts of tiddlers and columns could be saved.
This was a good thing!

#44

I did test is with Ubuntu FireFox and it worked.

But I found a different issue.

  • 2 columns are active.
  • I did select the right one
  • I did remove 1 column
  • It did remove the selected one instead the “unselected”

I did expect, that the “active” column would be the one visible. – Just some thoughts

#45

Hi @pmario ,

thanks for testing!
How did you remove column 1?
By manipulating the $:/columns list or by using the remove-column button?

Thank you!