CSS float elements as a tiddler dashboard - help wanted

#1

Folks,

I was looking for new User Interface elements and came up with an idea, must my CSS in tiddlywiki skills is not strong enough to solve this. So I am putting it out to the community. I am sure to some CSS gurus this is like a walk in the park.

Over here Question: possible / desirable to move the editor toolbar to the bottom of the editing area? - #17 by DaveGifford was discussed a Floating editor toolbar.

I was wondering it we could have a “tiddler dashboard” (Like in a car) that sits at the bottom of the tiddler (view and/or edit) template and longer tiddlers scroll underneath this., with the dashboard staying in place until you scroll to the next tiddler.

Here is a poor mans mockup

Snag_6759c871
Snag_6759c8711410×744 198 KB

  • Imagin also the use of Sticky titles

My idea is I could make an additional accompanying toolbar for which buttons to go in this tiddler dashboard. It would then make sense using this space for buttons that affect the current tiddler (other than navigation) perhaps the tags could be displayed in the tiddler dashboard as well.

Where the standard toolbar is about the tiddlers existence in the story (the big view or tiddler Meta).

In a similar design method we could also have a wiki-dashboard or “floating” footer, similar to how the draft tiddlers appear along the bottom.

If you think you know how we may achieve this please help.

#2

There are already sticky titles.

For something like your idea you need to add to viewtemplate a footer that have the following properties.

position: sticky;
bottom: 0;

But then there will be a issue while you are scrolling with the footer (of the next tiddler) will be hidding the first part of content of next tiddler until you have done more scroll. In Sticky titles is less annoying, IMO.

You can see it with a tiddler with tag $:/tags/ViewTemplate and this text.

<style>
.sticky-footer{
position: sticky;
bottom: 0;

padding: 1em;
background: lightblue;
}
</style>
<div class="sticky-footer">
My sticky footer
</div>

But it is a very basic example. Maybe it is easy to solve or to avoid.

1 Like
#3

Thanks for that;

I expect to also to use the Sticky Titles, adjusted if needed for the Menu bar.

I placed ;

.sticky-footer{
position: sticky;
bottom: 0;

padding: 1em;
background: lightblue;
}

In a stylesheet tiddler

Then

<div class="sticky-footer">
My sticky footer
</div>

In a tiddler tagged view template

It seems to be working well (no buttons yet) and I can’t see the problem to which you refer.

@Alvaro since you are such a wizz at this perhaps I can ask on a related matter; I would be interested in the following;

  • Where the buttons always sit at the same place on the screen
  • I would also be inclined to add additional buttons between the pairs demonstrated.

Red = Top of tiddler and bottom of current tiddler buttons
Green = Top of Story and bottom of story tiddler buttons

Snag_67caf8e2
Snag_67caf8e21182×816 196 KB

I plan to add all these with additional toolbars and buttons to support this functionality along with other screen elements in a package so we can “turbo charge” the user interface.

#4

Oh, and a left hand side one for the tiddler as well.

#5

I see also value adding the following elements (these I can already do); * What do you think?

  • Red arrow - Place ratings tool and other indicator style items
  • Green Arrows - Tiddler action items eg set, type, or mode
  • Orange/yellow - an overflow for the standard tool bar after a number of buttons is exceeded or they interfere with the display of the title.

Snag_67d26381

And above the search field what I call “advanced search indicators” that respond to the content in the search temp. This is a package of tiddlers.
Snag_67d7c947

And what I call “indicators” above the sidebar tabs to display various wiki or active tiddler status info. And smaller indicator icons just above the tabs;

Snag_67de94a8

#6

Maybe it is better show it with this image, I used my example but I expect the same behavior how you are using it. See in the botton, the title GettingStarted is partialy hidden by the footer, but with less scroll is fully hidden, as date and tag are hidden in the image.

Screenshot TiddlyWiki
Screenshot TiddlyWiki1903×908 79.3 KB

You are wrong. I know enough to manage sometimes.

I can’t help you much. It is part of UI/UX, I don’t have idea about it. I can think that is useful, but it can be add noise to UI and then it result confusing to the users. I don’t know…

#7

ahh I see,

I imagine it can be fixed with a little tunning.

Some peoples noise is another’s music.

#8

Try adding padding top to the tiddler div to compensate for the height of the footer, and corresponding negative margin to the tiddler title div.

2 Likes