1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-16 14:54:51 +00:00
TiddlyWiki5/core/ui/PageTemplate.tid
Robin Munn bb2973fc29
Make flexbox or grid layouts possible (#7690)
Both flexbox and grid layouts need the container div to be the direct
parent of the children it lays out. To enable that, we need a class that
can select the direct parent of the list widget in PageTemplate.tid so
that that class can have `display: flex` or `display: grid` applied to
it. The `tc-page-container` div is not suitable, because it contains
a `<$dropzone>` inside it, and the dropzone widget creates a div so
tc-page-container is no longer the direct parent of the list. Instead,
a tc-page-container-inner class is added to the dropzone widget in
addition to its existing tc-dropzone class, so that grid or flexbox
layouts can target tc-page-container-inner for setting the appropriate
CSS `display` property.
2023-09-30 16:33:40 +01:00

38 lines
1.4 KiB
Plaintext

title: $:/core/ui/PageTemplate
name: {{$:/language/PageTemplate/Name}}
description: {{$:/language/PageTemplate/Description}}
icon: $:/core/images/layout-button
code-body: yes
\whitespace trim
\import [subfilter{$:/core/config/GlobalImportFilter}]
<$vars
tv-config-toolbar-icons={{$:/config/Toolbar/Icons}}
tv-config-toolbar-text={{$:/config/Toolbar/Text}}
tv-config-toolbar-class={{$:/config/Toolbar/ButtonClass}}
tv-enable-drag-and-drop={{$:/config/DragAndDrop/Enable}}
tv-show-missing-links={{$:/config/MissingLinks}}
storyviewTitle={{$:/view}}
languageTitle={{{ [{$:/language}get[name]] }}}>
<div class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/PageTemplate]!is[draft]] :map:flat[subfilter{!!text}] tc-page-container [[tc-page-view-]addsuffix<storyviewTitle>] [[tc-language-]addsuffix<languageTitle>] :and[unique[]join[ ]] }}} >
<$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
<$dropzone enable=<<tv-enable-drag-and-drop>> class="tc-dropzone tc-page-container-inner">
<$list filter="[all[shadows+tiddlers]tag[$:/tags/PageTemplate]!has[draft.of]]" variable="listItem">
<$transclude tiddler=<<listItem>>/>
</$list>
</$dropzone>
</$navigator>
</div>
</$vars>