A new Flexbox Layout for TiddlyWiki

,
#6

Okay, let me begin with this…

I love this kind of stuff, but can never seem to adapt it (them) to my way of working. There is an implicit assumption being made that the display, end to end (I’m mostly taking about the X-axis here) is the entirety of the TiddlyWiki story river display, in a conventional 1-screen environment. Understandable, that’s how most users use it, out of the box.

On my setup, my TiddlyWikis occupy 3, sometimes 4, 1920x1080 screens. This usually means I have a ton of work ahead of me to even get started using stuff like this. In actuality, I back out, which is a shame.

So, here’s your demo, the river occupying the entirety of 3 screens:

image
image1425×248 20.8 KB

Here’s my wiki, spread across 4 screens, the river only occupying one screen (far right):

image
image1423×199 45.7 KB

Which leaves me with one question: can you see a way to add a notional “river-width” setting to tame its landgrabbing nature? :slight_smile:

#7

I combine a flexbox based layout with a max-width for columns (which may or may not be story rivers). Without a max-width flexbox based columns get really unwieldy in large windows as you have described.

1 Like
#8

I see, I plan making the width of the sidebar configurable which is obviously important. For the amount of story rivers I plan that you can use as many as you like. I think it’s better not to hardcode just two.
Would that fit your needs better?

I can imagine setting different widths for different rivers. But I believe I don’t understand your idea well enough…

Thanks,
Simon

#9

I’m not sure about different rivers, unless you mean dividing the river to end up with notional sub-rivers.

Regardless, here’s a quick hack. Note, I may not have chosen the most apt or efficacious placement for it, but it’s constraining the current flexbox/river to the (in this case) third screen:

image

image
image1411×255 23.9 KB

#10

Not sure that needs to be addressed. Anyone that has code that already messes with the sidebar would want it to remain as-is (I’d think).

But maybe I’m not understanding what you mean… ?

#11

@CodaCoder

try this:

.tc-flex-second-child {
  display: flex;
  flex-direction: row;
  flex: auto;
  max-height: 100%;
  position: relative;
  overflow-x: hidden;
  margin-left: 50%;
}
#12

Simon, it would be easy to get into the weeds on this, so just focus on this – then you’ll be good, I think:

If that assumption was removed from the code, I’d be very happy. But this is just me – if you want to ignore my requirements, I’ll understand completely. It’s a unique requirement that only I (it seems) require.

#13

Have you considered using CSS Grid instead of Flexbox?

While Flexbox is great for controlling one-dimensional layout, with CSS Grid’s two-dimensional focus, you should be able to provide much more flexibility with TiddlyWiki layout alternatives.

1 Like
#14

Hi @Craig_Cecil and welcome to this Forum :slight_smile:

No I haven’t considered Grid for this… I try not to use Grid, I don’t know why.
I use Grid when there’s no other solution for a layouting problem.

But I would welcome some examples where it would make sense :slight_smile:

Thank you!
Simon

#15

Of relevance, subgrid has now also been implemented!

#16

@CodaCoder there is another approach for multi screen setups. Additional windows spawned from the one wiki.

With recent improvements its possible to build window management tools, Open, close, find and navigate between windows, Advantages include;

  • you can design windows with or without a story of its own.
  • you can pull a window or another app in front/behind on each screen with the others visible.
  • windows can consume only part of the screen they are on or view full-screen.
  • windows can all be layered on one screen.
  • multiple wikis could be similtaniously spread accross multiple windows and screens and the operating systems tools can also be used to navigate between windows including more than one browser.
  • each window could have its own behaviours and be addressed seperatly.

All you need is one or more window templates defined with the content and layout you desire then open the ones you want.

  • perhaps a way could be found to select or emulate a different layout in each window.

This approach remains to be explored in depth but it may be superior to a single wiki visible in one window stretched accross multiple screens.

General Questions about Large / Complex Stylesheets
#17

I love watching these layouts develop, and I keep wondering when I’ll find a need for it in my own work. I never seem to need it… which I find sad, as I really like MCL and this looks like it’ll be great too.

How is that different from the default TW layout, which already has that? (Except that somehow it doesn’t in your demo if you switch to the default page template. Hmm…)

#18

hmm, Interesting.

But on my screen the right sidebar uses way too much space. The screen is 3440 x 1440

grafik
grafik3450×939 230 KB

1 Like
#19

Thanks @Scott_Sauyet
I love tinkering on these layout, learning CSS and wikitext is fun

It MOVES in and out, the default page template jumps. In my demo in the default pagetemplate there’s no sidebar-button :grinning: because it’s removed for a menubar experiment

#20

Hi @pmario

Yes I know, the sidebar width must be configurable… and now it is! :slight_smile:

Thank you,
Simon

1 Like
#21

Now there’s a new invention in link handling

  • links to tiddlers that are open in one of the open columns scroll those tiddlers into view instead of opening the tiddler again in the current column
  • links to tiddlers that aren’t open in any of the open columns open the tiddler in the current column
  • shift-click on a tiddler link always opens the tiddler in the next column to the right

I’ve also fixed some layout problems and made the basic layout for mobile view (it’s not finished)

Best wishes,
Simon

3 Likes
#22

This looks pretty cool. I haven’t really toyed with multicolumn layouts yet. I love the toolbars, headers, footers etc.

For the side bar size have you toyed with plugins like the SideBar Resizer? - Where you can resize it by dragging it wider/narrower?

#23

Thanks @baiguai

In the past I did many experiments with sidebar resizers and things alike and I came to the decision that I don’t need them, but they are a nice thing to have.
If I find one that works very well I could try making it work with this Layout, maybe as an AddOn

Thank you,
Simon

2 Likes
#24

I’m new to Tiddlywiki and going through Grok Tiddlywiki right now to learn. A saw this forum post and thought it was close to what I wanted in layouts compared to standard TW. What I want is a multi column story river which fill the screen (kind of like how email utilizes columns: folders on the left, emails list in the middle, and content on the right). So if I had my tiddlywiki on my computer I could have multiple tiddlers visible and editable if needed, but on my phone where space is limited it would switch to a one column river (default TW). Having learned of MCL and flexbox from this forum post, I tried both out on my computer, but they remain several columns if you shrink the window (meaning you have to scroll horizontally). Would it be possible to have the columns dynamically adjust to windows/screen size? So it has the columns in a full window, but if you tile the window to 1/2 screen it would only display only how many columns would fit in that space without horizontal scrolling. I have a quick drawing of what I mean in case my explanation was lacking.

layouts
layouts794×1123 67.6 KB

1 Like
#25

I think that may depend on how you use it. Have a look at the column count, it may be you have multiple columns open but only a certian number displayed, so it “overflows”, perhaps raise a question, or reply in an existing MCL Focused thread.