[IDEA] Rearrange elements in PageTemplate.tid to allow creating flexbox-based themes

[rmunn]

Is your feature request related to a problem? Please describe. This all started when I wanted to move the sidebar to the left of the story river instead of the right. I quickly discovered that the sidebar uses position: fixed to position itself on the page, and that fiddling with the CSS to get it looking the way I wanted was tedious. So I decided to use display: flex on the tc-page-container div, set the sidebar to be fixed width, and set flex-grow: 1 to the story river so that it would fill the rest of the screen. It didn't work, at which point I learned the following:

• The display: flex class must be on the direct parent of the elements being laid out
• The tc-page-container div has a navigator widget and a dropzone widget inside it
• The navigator widget doesn't create a div, but the dropzone widget does

I first tried moving just the dropzone widget outside the tc-page-container div, but the dropzone widget needs to be inside the navigator widget in order to work properly. So then I moved the tc-page-container div to be inside the dropzone widget, and that worked: it was now the direct parent of the sidebar and story view divs, so I could assign flex properties to their CSS.

Describe the solution you'd like I'd like to rearrange the order of elements in core/ui/PageTemplate.tid as follows:

Current:

• div class="tc-page-container" (and several other classes)
• navigator widget
• dropzone widget
• list widget transcluding all tiddlers with $:/tags/PageTemplate tag

Proposed rearrangement:

• navigator widget
• dropzone widget
• div class="tc-page-container" (and several other classes)
• list widget transcluding all tiddlers with $:/tags/PageTemplate tag

I've done extensive reading through the TW code and can find nothing in the navigator or dropzone widgets that relies on being inside a div with tc-page-container class, except for one CSS rule that's easily adjusted (see below under "Additonal context"). I've also done a lot of testing of this new arrangement of the page template tiddler and can find nothing that breaks.

By doing this, we would enable any themes that want to use flexbox (or even CSS grid) to simply add display: flex or display: grid to the page container div, and not have to completely rewrite the core page layout. This will allow them to inherit any future changes to PageTemplate.tid that might come along.

Describe alternatives you've considered The alternative is to not touch PageTemplate.tid, and instead make any theme that wants to rearrange it create its own layout. However, this is brittle because if PageTemplate.tid were to change in the future, those themes would not automatically pick up that change.

Additional context This section got large, so I collapsed it for easy reading of the rest of the issue.

Adjustments needed to one CSS rule

The CSS rule I mentioned earlier that needs changing is the fix from commit a360adb that adds the following to ensure the dropzone will fill the whole browser window even when the story river is empty: ```css .tc-page-container > .tc-dropzone { min-height: 100vh; } ``` If the dropzone moves outside the tc-page-container, this will obviously stop working. (The reason for the direct-child selector in CSS there is so that it would not affect any other dropzones created inside a tiddler). With the dropzone outside the tc-page-container div, it becomes a grandchild of the .tc-page-container-wrapper, so the following CSS will work: ```css .tc-page-container-wrapper > * > .tc-dropzone { min-height: 100vh; } ``` Alternately, since that relies perhaps a bit too much on the structure of the resulting HTML, the following CSS could be used to ensure that the minimum height rule is only applied to the outermost dropzone widget: ```css .tc-page-container-wrapper .tc-dropzone { min-height: 100vh; } .tc-page-container .tc-dropzone { min-height: 0; } ``` And one other alternative exists: to change the dropzone widget in PageTemplate to have `class="tc-dropzone tc-root-dropzone"` and then set `min-height` only on the `tc-root-dropzone` class. That might be the most backwards compatible of all.

[Jermolene]

Thanks @rmunn as I commented at #7690, I think we need to seek a solution that does not break backwards compatibility.