Tabular story/result view ?

[Mark S.]

Is there a way, using the tools already in TW, to make the results of a list search form a table, say 4 rows wide?

The idea here is to make compact view of results rather than an extended list or story river.

Thanks!
Mark

[c pa]

Yes with the creative use of the filter operators you can do it

Here's an example using the letters of the alphabet as the input filter expression

<table>
<$list filter="1 5 9 13 17 21 25" variable ="rows">
    <$list filter="a b c d e f g h i j k l m n o p q r s t u v w x y z +[nth<rows>]" variable="cell">
        <tr>
        <td> <<cell>> </td>
        <$list filter="a b c d e f g h i j k l m n o p q r s t u v w x y z +[allafter<cell>limit[3]]" variable="this">
            <td> <<this>> </td>
        </$list>
        </tr>
    </$list>
</$list>
</table>

[Tobias Beer]

Hi c pa,

 

Yes with the creative use of the filter operators you can do it

That's possibly not good enough, as the length of the search results is dynamic.

Best wishes,

Tobias. 

[Ton Gerner]

Hi Mark,

Thinking outside of the box, why not use a simple 4 column style instead of a table?

/* FOUR COLUMN MODE */
.fourcolumns {
   display:block;
   -moz-column-count:4;
   -moz-column-gap:1em;
   -webkit-column-count: 4;
   -webkit-column-gap:1em;
}

Cheers,

Ton

[Mat]

@Ton, could you please show where to actually apply this in the following example?

<$list filter="[tag[Filter Operators]]" variable="foo">

<<foo>>

</$list>

Thanks!

BTW, this is a pretty basic use case so we ought to have a best practice solution in the docs.

<:-)

[Ton Gerner]

Hi Mat, sure.

Create at http://tiddlywiki.com/:

1) Tiddler MyStyle tagged with $:/tags/Stylesheet, containing:

/* FOUR COLUMN MODE */
.fourcolumns {
   display:block;
   -moz-column-count:4;
   -moz-column-gap:1em;
   -webkit-column-count: 4;
   -webkit-column-gap:1em;
}

2) Tiddler MyList containing:

@@.fourcolumns
<$list filter="[tag[Filter Operators]]" variable="foo"><br>
<<foo>>
</$list>
@@

and there you are.

Cheers,

Ton

[Tobias Beer]

Hi Ton,

 

Thinking outside of the box, why not use a simple 4 column style instead of a table?

This would work, except for popup buttons, in case you remember:

https://github.com/Jermolene/TiddlyWiki5/issues/1102

Best wishes,

--tb.

[Ton Gerner]

Hi Tobias,

Yes, I do remember. I reported the tag pill problem in the group [1].
Lateron you found it more "general" for popups.

Cheers,

Ton

[1] https://groups.google.com/d/msg/tiddlywiki/DOlliTOEyCQ/lQxXhzXyzPAJ

[Mark S.]

Sheer genius, c pa !

I had to step through the listing to see how you did it.

I'm thinking this could be useful for creating an Evernote-like listing of tiddlers. Or if each tiddler had a "thumbnail" field, part of a photo-gallery app.

Thanks!
Mark

[Mark S.]

That's super! I can see where this would probably be a default solution. I do sometimes find CSS a little unpredictable. Ok, a lot of the time ;-)

Per Tobias' comment, can I infer that this will be pretty stable as long as I avoid doing fancy things like using Tag-buttons? I was thinking more of tiddler links and/or galleries of thumbnails.

Thanks!
Mark

[Tobias Beer]

Hi Mark,

 

Per Tobias' comment, can I infer that this will be pretty stable as long as I avoid doing fancy things like using Tag-buttons? I was thinking more of tiddler links and/or galleries of thumbnails.

With tobibeer/appear you can also make popups work, using the handle / handler mechanism.

Best wishes,

Tobias.

[Mat]

Here is a CSS solution using flexbox. Feels pretty darn good actually. 

It is responsive, i.e re-positioning to display fewer columns if the window is too small.

It works also for tag popups, as shown in the code below, i.e the tag-popup displays in front of everything, just as it should. 

You don't directly specify a fixed number of columns but instead specify the max-width for the list (could be a transclusion of the tiddler width) and the width for each item. It lists from left to right, then wrap to new row.

If you don't use the tagpill template but instead show tiddler titles, these show fully by wrapping at the item width. making each row adapt as needed. If you want cropped titles I thing this, i.e fixed cell/row height, would be simple by styling the item class.

If you want it to appear like a traditional table you can simply add a border to the item css. For headers I guess you must fiddle a bit more ;-)

I am uncertain if my css attributes are fully correct. Anyone CSS skilled - you're more than welcome to correct it here.

BTW, here is a very nice guide on flexbox.

<:-)

<div class="dynamic-table">
  <$list filter="[has[tags]tags[]sort[title]first[110]]">
    <span class="item">
      <$transclude tiddler="$:/core/ui/TagTemplate"/>
    </span>
  </$list>
</div>

<style>
.dynamic-table {
  max-width:700px; /* could transclude tiddler width instead */
  -ms-box-orient: vertical; /* this should probably not be here */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: inline-flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-direction: row;
}

.item {
  max-width:160px; min-width:160px;
  flex: 0 0 2em; /* -grow, -shrink, -basis */
}
</style>

[Mark S.]

Hi Mat,

You certainly seem skilled in CSS to me!

Looks like a very versatile solution. I notice that some of the tags overlap into the next column. Appears you have to tweak the max/min pixels to suit your particular data set, right?

Thanks!
Mark

[Mat]

Mark,

 

Looks like a very versatile solution. I notice that some of the tags overlap into the next column. Appears you have to tweak the max/min pixels to suit your particular data set, right?

Tagpills seem to be blocks (I'd guess inline-blocks in TWs native stylesheets). This makes tagpills in a row overlap if they are wider than what you set the cell max/min width to be. Listed titles instead wrap, obeying the max/min width and expanding the cell height (and thereby also the row height). If you want tagpills to behave like titles, I think this should all be css controllable.

You could see if adding "overflow-x:hidden; border-left:3px solid white;" to the item is more to your liking. This should prevent two overlapping tagpills of the same color from appearing like one. You could also go fancy and add a gradient or image to the right in each cell so any too-long-pill fades before it reaches the end.

The difficulty, I find, is to decide where to compromise when one wants to squeeze in unpredictably sized data into a fixed layout ...overlap or truncate or expand... :-)

<:-)

[Mark S.]

Hi Mat,

I would like to submit this great solution to TiddlyWiki github. Hopefully that is OK?

I am curious about your note on this item:

  -ms-box-orient: vertical; /* this should probably not be here */


Er, can it be removed?

Thanks!
Mark

On Sunday, September 11, 2016 at 3:34:04 AM UTC-7, Mat wrote:

[Mat]

Mark S. wrote:

Hi Mat,

I would like to submit this great solution to TiddlyWiki github. Hopefully that is OK?

Sure! Flattering!

I am curious about your note on this item:

  -ms-box-orient: vertical; /* this should probably not be here */

Er, can it be removed?

Well, it does seem to work without it. I most likely included that from finding some solution for something else as I was flexbox experimenting so I cannot give a definitive answer why that specific bit would be justified. My general reasoning is that CSS errors usually are harmless - so I typically use whatever seems to produce the desired results while hoping to get better understanding as time passes.

<:-)

[Mark S.]

Oh, that's great! I've submitted a PR. Actually, 3 of the techniques here have been posted for various approaches to this problem.

Thanks!
Mark

[Dmitry Sokolov]

Mark, sorry, what are those 3 techniques you are talking above?
Where may I see them?
Cheers,
Dmitry

[Mark S.]

If you follow this thread on google groups, then you will see that there are solutions provided by C Pa, Mat, and Ton Gerner.

HTH
Mark