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.
This commit is contained in:
Robin Munn 2023-09-30 22:33:40 +07:00 committed by GitHub
parent bbaa0890b5
commit bb2973fc29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 1 additions and 1 deletions

View File

@ -20,7 +20,7 @@ code-body: yes
<$navigator story="$:/StoryList" history="$:/HistoryList" openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
<$dropzone enable=<<tv-enable-drag-and-drop>>>
<$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">