Presenting: Columns - for in-tid columns

[Mat]

The TWaddler presents...

...nothing big but still useful for the occasions that you need it:

Columns stylesheet

...is just a small one tiddler tiddler stylesheet that makes it easy to

show tiddler content in multiple columns, like newspaper articles.

It is designed primarily to help split up the typically long lists of tiddler titles

that we get in TW. The layout is responsive, adapting to tiddler width.

<:-)

[Ste Wilson]

Excellent!

Applied to a long list already!

http://stephenteacher.tiddlyspot.com/#Equations

Is it possible to use it with @@columns or does it have to be <div..?

[Scott Kingery]

Thanks for this. Really cool and I'm sure to find lots of uses. Causes and interesting effect if you wrap it around a long TOC.like

<div class="columns">
<div class="tc-table-of-contents">
<<toc-expandable "Contents">>
</div>
</div>

[@TiddlyTweeter]

Ste & Mat

Neat example! Thanks!

IMO CSS columns are a lot easier to use than grid and flex-box methods (which normally require "HTML hierarchy" to function). Its good to see it used so well, quickly, in TW.

They have issues on readability for long texts (a web page is not a newspaper) but for lists like Ste's example are easy and efficient.

Josiah

[@TiddlyTweeter]

Ste

FYI, my  Modulus Of Rigidity is related to my Number Of Moles.

J. 

On Friday, 7 June 2019 18:51:43 UTC+2, Ste Wilson wrote:

[Ste Wilson]

I think you can get some cream for that... :)

[Mat]

Ste Wilson wrote:

Excellent!

Applied to a long list already!

http://stephenteacher.tiddlyspot.com/#Equations

Great use case. It is such a long list that I'd consider categorizing the items, and then display them via nested lists. This is also supported in the columns stylesheet. BTW, I'm also a science teacher :-)

 

Is it possible to use it with @@columns or does it have to be <div..?

Sure.

 <:-)

[Ste Wilson]

It's grown slowly.. Didn't really realise how long it was!

Nested lists you say! Well most should already be tagged with subject...

So how would I do that then?

If any of its any good for your physics class feel free ;)

[Mat]

Ste Wilson wrote:

So how would I do that then?

If any of its any good for your physics class feel free ;)

Appreciated but my pupils are younger :-)

OK, since I'm dabbling with this just now - here, you could probably use something like this:

\define column-item(filter, subfilter)
<$list filter="$filter$" variable=subject>
<span class="column-item">
   <div class="column-item-heading"><<subject>></div>
   <$list filter="""$subfilter$ +[tag<subject>]""">
      <div class="column-item-item">
         {{!!title}}
      </div>
   </$list>
</span>
</$list>
\end

Then you call it all for example like so

@@.columns
<<column-item "[tag[subject]]" "[tag[Equation]]">>
@@

If you put the code in a separate macro, you could reuse it also for each subject, i.e each subject could be it's own tiddler and then put these in every one of them:

@@.columns
<$macrocall $name=column-item filter=<<currentTiddler>> subfilter="[tag[Equation]]" />
@@

...or, if these equations are a big part of your whole site then you could make a conditional viewtemplate stating that any tiddler tagged subject should show that code just above this row. This way you would not manually have to put that code into every subject tiddler and if you add a new subject tiddler, it will automatically show content.

<:-)

[Ste Wilson]

Thanks! I'll have a play with that after the weekend and I have a PC for easy editing :)

[TonyM]

Mat,

Lovely easy to use solution. I suggest it get added to the default stylesheets because it is a "bread and butter" type of requirement in tiddlywiki.

Thanks for sharing soooo much

Tony

[David Gifford]

Great Mat! Just added this to the toolmap.

Dave

[Stephen Wilson]

Hi Mat,

went with: 

<div class="columns">

<<column-item "[tag[Table of Contents]]" "[tag[Equation]]">>

</div>

(@@. didn't do anything)

which gives me http://stephenteacher.tiddlyspot.com/#New%20Tiddler

A couple of problems due to my tagging system in that an equation isn't always tagged with the top level subject, so stress is tagged under 'stress and strain' but not the top level 'Statics'.

The linkability seems to have gone too!

Stephen

[Mat]

Stephen Wilson wrote:

A couple of problems due to my tagging system in that an equation isn't always tagged with the top level subject, so stress is tagged under 'stress and strain' but not the top level 'Statics'.

The linkability seems to have gone too!

Yeah, I guess you must stick to a pretty rigid tagging structure when automating. But you can add items manually first or last to the list as long as it is within the columns style and styled with column-item.

Below is the code using @@.columns and with links instead of titles. I was kind of assuming you'd experiment a bit yourself ;-)

Apropos that long code-harangue below to get the link, this will be much simplified in the next release so you'll just write <$link/> instead!

<:-)

\define column-item(filter, subfilter)

<$list filter="$filter$" variable=subject>

<span class="column-item">

   <div class="column-item-heading"><<subject>></div>

   <$list filter="""$subfilter$ +[tag<subject>]""">

      <div class="column-item-item">

         <$link to=<<currentTiddler>>><$view field="title"/></$link>

      </div>

   </$list>

</span>

</$list>

\end

@@.columns

<<column-item "[tag[Table of Contents]]" "[tag[Equation]]">>

@@