TiddlyWiki / TiddlyWiki5

A self-contained JavaScript wiki for the browser, Node.js, AWS Lambda etc.
https://tiddlywiki.com/
Other
8.04k stars 1.19k forks source link

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

Closed rmunn closed 1 year ago

rmunn commented 1 year ago

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:

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:

Proposed rearrangement:

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 commented 1 year ago

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