Looking at your challenge again, I stumbled into what I'll refer to as the
FlexBox solution. This may not be quite what you were looking for but you
may find it interesting.
The listing of the tiddlers is a filtered list displaying a link to the
individual tiddlers and a display of the tiddler itself using a template.
What makes it look like a table is the styling. The flex-container sets the
table to the full width allowed in the tiddler area and wraps the listing
to the next line. The flex-item controls the basic dimensions of the
tiddler display while the overflow:hidden limits the tiddler display to a
thumbnail of the tiddler. I threw on the outset border style just to be
cute. The flex-item:hover causes the thumbnail to expand to a larger
version with the overflow set to auto so that the entire tiddler can be
viewed.
<style>
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
background-color: <<colour background>>;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex-item {
width: 150px;
height: 200px;
margin: 10px;
overflow:hidden;
padding: 5px;
border-style: outset;
}
.flex-item:hover{background-color:black;
width: 300px;
height: 300px;
overflow:auto;
}
</style>
<div class="flex-container">
<$list filter="[tag[series]sort[title]limit[50]]">
<div class="flex-item">
<$link>
<h3><$view field="title"}}/></h3>
</$link>
{{||Fields}}
</div>
</$list>
</div>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/dd19cfbf-8b68-4c80-a51e-8cacba76f013%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
