[IDEA] Using Menubar with Sticky Tiddlers without Overlap.

[justin-hurd]

Is your feature request related to a problem? Please describe. The Menubar Plugin, when used with Sticky Tiddler Titles, will overlap the stickied tiddler title.

I would also like to add that when all items are removed from the menubar, and all that is left is the sidebar-toggle carot and the Search Input field, the menubar is only tall enough to fully contain the search input.

Describe the solution you'd like Per pMario's response at Talk.Tiddly.com, having the tiddler tagged with .tc-tiddler-title-sticky and the menubar styles have some CSS to add adjustments for it to not overlap would be a good solution.

Per the issue about the height of the menubar, having all selected elements and the sidebar-toggle carot stored within the menubar, and setting the default sidebar-toggle carot to hidden when the plugin is active, could resolve this, or setting the minimum height of the menubar to be the same as the height of the sidebar-toggle carot.

[pmario]

I would also like to add that when all items are removed from the menubar, and all that is left is the sidebar-toggle carot and the Search Input field, the menubar is only tall enough to fully contain the search input.

can you provide a screenshot for this one?

[Jermolene]

Thanks @justin-hurd

The height of the menubar is dynamic, which makes it difficult to compensate for it when using sticky titles. The easy solution would be to add a new option in theme tweaks that allows a vertical offset to be applied to sticky titles. A more complete, automated solution would require a new mechanism to dynamically measure the height of the menu bar and apply the necessary offset automatically.

[pmario]

... .tc-tiddler-title-sticky

Now after thinking about it a bit more, I would go with en tc-sticky because it may be any element, not only tiddler-titles or titles. The rule I suggested was as follows. So the tc-tiddler-title already takes care about the specific element that should be used.

.tc-tiddler-title .tc-title-sticky {
  top: 30px; 
}

tc-sticky is only the "enabler" for the rule itself. So may be it should be the only rule that enables that behaviour

At the moment there is an extra tiddler in the theme: https://github.com/Jermolene/TiddlyWiki5/blob/668f443fc2/themes/tiddlywiki/vanilla/sticky.tid that handles the sticky behaviour.

[pmario]

The easy solution would be to add a new option in theme tweaks that allows a vertical offset to be applied to sticky titles.

I was thinking about that one too as a partial fix.

[Jermolene]

Hi @pmario I'm not sure I understand; are you suggesting a solution?

Also bear in mind that a good solution would work for anchor links too.

[justin-hurd]

The height of the menubar is dynamic, which makes it difficult to compensate for it when using sticky titles. The easy solution would be to add a new option in theme tweaks that allows a vertical offset to be applied to sticky titles. A more complete, automated solution would require a new mechanism to dynamically measure the height of the menu bar and apply the necessary offset automatically.

Would it be possible to create a stylesheet alongside the menubar to do something along the lines of, (and please excuse my usage of pseudo-code.)

title: "$:/plugins/tiddlywiki/menubar/tc-tiddler-title" /* a better name would probably be needed. */
tags: "$:/tags/Stylesheet"
text:  "
<<if-tc-sticky """ 
.tc-tiddler-title .tc-title-sticky {
 top: calc({{$:/plugins/tiddlywiki/menubar/metrics/menubar-height}} + 30px); /* I'm not sure how much added is needed. */
}
""">>
"
with the if-tc-sticky macro working like how the if-sidebar macro does (I don't actually know at this time.)

I would also like to add that when all items are removed from the menubar, and all that is left is the sidebar-toggle carot and the Search Input field, the menubar is only tall enough to fully contain the search input.

can you provide a screenshot for this one?

Sure, I will attach it here.

[Jermolene]

Would it be possible to create a stylesheet alongside the menubar to do something along the lines of, (and please excuse my usage of pseudo-code.)

The problem is that the menubar height is not fixed in a metrics tiddler; it is a dynamic consequence of the CSS layout. With some menu layouts, for example, the height would change as the window gets narrower and the items wrap.

[justin-hurd]

With some menu layouts, for example, the height would change as the window gets narrower and the items wrap.

The only solution I can think of at this moment is to allow a horizontal scroll with the menubar, but I don't believe that would be ideal. The only other idea that came to mind is to set a maximum amount of items. Neither of these are that desirable I'd imagine.

Or, treating the icons the same as the sidebar tabs, where you click on a button to display a dropdown containing the buttons.

Edit: nevermind about the same z-index, I hadn't considered how that would impact multiple tiddler sticky titles. Actually, as the menubar is, it draws overtop of the scrollbar for the sidebar as well.

Could the menubar be moved to before the tc-page-container and still function?