Low-tech "multi-column" layout for larger displays

Tips & Tricks
#1

I have a small stylesheet tweak I’ve been using in my wikis to get multiple tiddlers visible at once horizontally on a large display. It’s not a full layout (nor do the columns have identity) like the Multi-Column Layout.

Folks may find it useful, so here’s $:/phajas/stylesheets/multicolumn. When the sidebar collapses, it’ll turn into a “focused” mode to just show one tiddler horizontally.

@media (min-width: 960px) {
.tc-story-river {
  display: flex;
  flex-wrap: wrap;
}
.tc-tiddler-view-frame, .tc-tiddler-edit-frame {
  min-width: 600px;
}
}

.tc-tiddler-view-frame, .tc-tiddler-edit-frame {
  margin: 1px;
  padding: 6px;
<$list filter="[[$:/state/sidebar]get[text]search[yes]]">
  flex: 1 1 0;
</$list>
}
1 Like
#2

I am interested, but in Windows / Google Chrome at tiddlywiki.com/empty, it just compacts the space between the tiddlers. There is no multi-column.

#3

Whoops - I forgot a few setup pieces:

  • You need to flip “Fluid story, fixed sidebar” on in Control Panel → Appearance → Theme Tweaks.
  • You need to toggle the sidebar to populate the state that I read out in the filter.

Doing this gets this functional inside the empty TiddlyWiki.

#4

This is pretty nice, sometimes a simpler solution is more practical than a complex one, so I’m a fan :grinning_face_with_smiling_eyes:

1 Like
#5

I found I needed to fiddle with max width to get two columns. Maybe because my screen isn’t all that wide. Also, wrap everything in the media tag, since at lower res you probably want default. After this it didn’t matter what the fluid sidebar setting was. Here’s what I have:

@media (min-width: 960px) {
.tc-story-river {
  display: flex;
  flex-wrap: wrap;
}

.tc-tiddler-view-frame, .tc-tiddler-edit-frame {
  margin: 1px;
  padding: 6px;
<$list filter="[[$:/state/sidebar]get[text]search[yes]]"
   emptyMessage="max-width: 48%" >
  min-width: 600px ;
  flex: 1 1 0;
</$list>
}
}
3 Likes
#6

@Peter Exceptionally simple and direct. Love it. :heart: I’ve been trying to think of a simple way to trigger this kind of layout and be able to control it from wikitext. This looks perfect for the job. Thanks!

2 Likes
#7

Very nice, but it doesn’t works when the storyview is set to “zoomin”. It works in “classic” mode and " in “pop” mode.

#8

Zoomin mode is a bit finicky. Just a few days ago, there was a report of a problem when using zoomin with some added styles for “centering” the story column. After some investigation, I found a workaround that involves overriding a few very old zoomin-related styles that are defined in the “Vanilla” shadow stylesheet.

It’s possible that these same changes might fix this current problem as well.

See Centering the River - #9 by EricShulman for details.

Let me know how it goes…

enjoy,
-e

1 Like
#9

That workaround works for Centering the River, but it doesn’t fix the current problem.

#10

?? What would multi-column mean in the context of “zoomin” ? Zoomin only shows one tiddler at a time.

2 Likes
#11

I have a large display and “zoomin” showing two tiddlers would be perfect.

Since I’m not an native english speaker, I had to look for the meaning of multi…

At least in British English…

  1. much or many
  2. more than one. ← So… multi-columns can be «two columns».

Source: https://www.collinsdictionary.com/dictionary/english/multi

#12

Great! That worked, after Mark’s tweak. Thank you!

FYI margin: 5px; separates the tiddlers just enough.

I also reduced the tiddler title size .tc-titlebar {font-size:150%;}

I also added my “thin frames” CSS

.tc-tiddler-frame.tc-tiddler-view-frame.tc-tiddler-exists {padding-top:5px;padding-bottom:10px;padding-left:15px;padding-right:15px;}

.tc-tiddler-frame.tc-tiddler-edit-frame.tc-tiddler-exists {padding-top:5px;padding-bottom:0px;padding-left:15px;padding-right:15px;}
1 Like