Oh two people one thought, although Saq definitely explained it better.
If scale is not important and it is just about sizing I played around a
little and found this solution using flexbox:
\define preview(filter)
<style>
.preview-container{
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
}
.preview {
width: 24%;
max-height: 400px;
border:1px solid blue;
padding: 10px 10px 10px 10px;
overflow: hidden;
margin-right: 10px;
margin-bottom: 10px;
}
</style>
<$set name=filter value="$filter$" emptyValue="[[$(currentTiddler)$]]" >
<div class="preview-container">
<$list filter=<<filter>> >
<$button to=<<currentTiddler>> tooltip={{{ [all[current]addprefix[Open: ]]
}}} class="preview" tag="div">
<$link/>
<$transclude mode=block/>
</$button>
</$list>
</div>
</$set>
\end
<<preview "[tag[TableOfContents]]">>
I tested it on tiddlywiki.com in Firefox, Chrome and Edge, and on my own
wiki on TiddlyDesktop and AndTidWiki. The only thing I noticed is that on
mobile - probably due to the smaller screen size - there are only three
previews in a row.
Also should you use this and want to have 400px in gerneral just change out
max-height to height. I just found it worked better in an universal way
seeing how for instance my tableofcontent tiddlers are often not very large
and mostly used for sorting other tiddlers so the 400 was mostly empty
space. In the same vein a min-height could be added depending on what you
need.
On Monday, 6 July 2020 10:34:48 UTC+2, TW Tones wrote:
>
> Folks,
>
> If you place the following in a tiddler on tiddlywiki.com, you will see
> it generates a preview of tiddlers with The TableOfContents tag.
>
> To get here I have begged, borrowed and stolen code.
>
> The problem is I do not know how to remove the empty space between each
> preview.
>
> Any advice and I would be grateful.
>
> \define preview(filter)
> <style>
> .preview {
> width:600px;
> min-height:400px; max-height:400px;
> -webkit-transform:scale(.25);
> -ms-transform:scale(.5);
> transform:scale(.5,.5);
> -webkit-transform-origin:0 0;
> -ms-transform-origin:0 0;
> transform-origin:0 0;
> border:1px solid blue;
> margin:0 0 0 0;
> padding: 10px 10px 10px 10px;
> overflow: hidden;
> }
> </style>
>
> <$set name=filter value="$filter$" emptyValue="[[$(currentTiddler)$]]" >
> <div style=" column-count: 4;">
> <$list filter=<<filter>> >
> <$button to=<<currentTiddler>> tooltip={{{ [all[current]addprefix[Open: ]]
> }}} class="preview" tag="div">
> <$link/>
> <$transclude mode=block/>
> </$button>
> </$list>
> </div>
> </$set>
> \end
>
>
> <<preview "[tag[TableOfContents]]">>
>
>
> Of course when working I would move the styles to a stylesheet and macro
> to a tiddler tagged macro.
>
> Regards
> TW Tones
>
--
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 view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/ab8d173f-c70d-4ff8-878f-a23ce764b978o%40googlegroups.com.
