Sticky editortoolbar

[Jan]

Hi all,
After I discovered that TW5 holds the possibility to make the Titlebar sticky to the top of the browser-window,
I asked myself whether the editortoolbar could be made sticky too. (As shown below: Yes, it can)

My question now is how to shift up the tiddlercontrols by 15px compared to normal in order to prevent it from being hidden by the editortoolbar.
Below you see my attempt which makes the Editortoolbar sticky but does not shift up the Tiddlercontrols...
alternatively it could also be an Idea to show the editortoolbar only when hovering over the title.

Thanks for helping
Jan


Change

$:/themes/tiddlywiki/vanilla/sticky:

to

<$reveal state="$:/themes/tiddlywiki/vanilla/options/stickytitles" type="match" text="yes">
``
.tc-tiddler-title {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0px;
    background: ``<<colour tiddler-background>>``;
    z-index: 500;
}
.tc-tiddler-controls > span > button{
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: -10px;
    background: ``<<colour tiddler-background>>``;
    z-index: 500;
}
.tc-editor-toolbar {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 20px;
    background: ``<<colour tiddler-background>>``;
    z-index: 500;
}
``
</$reveal>

[Ton Gerner]

Hi Jan,

A long time ago I placed the edit control buttons above the title of the tiddler by adding a <div> to $:/core/ui/ViewTemplate/title. For more information see my guide Customization of TW5 > Examples > Place toolbar above title.
Maybe that's a possibility.

Cheers,

Ton

[Ton Gerner]

Hi again,

What I proposed doesn't work.
But what is wrong with increasing `top` in class `.tc-editor-toolbar` from 20 to 30px?

Cheers,

Ton

[Jan Johannpeter]

Hi Ton,
This is a viable solution, it is just the formfactor of a cellphone which makes me mean about each pixel...thanks for your feedback which is correcting this...

Cheers Jan

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/fa352ecd-ab79-458d-b7bd-2660193e47b4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Ton Gerner]

Hi Jan,

Anyhow a sticky edittoolbar is a nice feature.
What about a PR?

Cheers,

Ton

[Jan]

Hi Tom,
thanks...PR=Public Relations???
I made a link to my TW where the two Tiddlers can be dragged from the storyriver...
http://slidesnstories.tiddlyspot.com/#%24%3A%2Fthemes%2Ftiddlywiki%2Fvanilla%2Fsticky:%24%3A%2Fthemes%2Ftiddlywiki%2Fvanilla%2Fsticky%20%24%3A%2Fthemes%2Ftiddlywiki%2Fvanilla%2Foptions%2Fstickytitles

I made some little Tweaks to he stylesheet reducing the extreme z-level of the sticky title, because it interfered with other elements of my TW. Alas the Tiddlercontrols still do not move up, who knows what is nailing them there.

Cheers Jan

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/2f16ce8a-ce3f-456e-866a-c22e908d932e%40googlegroups.com.

[Ton Gerner]

Hi Jan,

thanks...PR=Public Relations???

;-) , I meant a Pull Request to get it into the core.

Cheers,

Ton

[Jan]

Hi Ton,
Okay , you see how little familiar I am with this depth of TW-develoment ;-). I you think a PR would be useful please make it...

Yours Jan

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/a6e0e09e-6f43-4acf-9b82-2f7e6259c2d3%40googlegroups.com.

[Mat]

Jan, what do you actually mean with "the tiddlercontrols". Do you mean the tiddler toolbar, i.e the more-edit-close? or is it the editmode tiddler toolbar, i.e garbage-cancel-save? Or do you perhaps mean the string of the various editor buttons (bold-italic-etc)?

I'm pretty sure I have some quick css-fix for this.

<:-)

[Jan]

Hi Mat,
thanks for this clarification...it is the editmode Tiddler Toolbar I would like to push up by 20px in the sticky view.

Jan

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/59330c37-858d-49ce-a7e8-a56af09332c5%40googlegroups.com.

[Thomas Elmiger]

Hi Jan

Guess you could add something like:

height: 32px;
margin-top: -6px;

to: .tc-tiddler-controls.tc-titlebar

Hint: As always I opened your link quickly on my tiny iPhone SE: When you switch to edit mode there, the stickyness is gone as soon as you activate the edit field (keyboard visible => editortoolbar no longer sticky).

Have a great day!
Thomas

[Mat]

Yes, like Thomas says the key is probably margin-top with negative value.

I note you use the SideEditor which is especially convenient when fiddling with css effects.
So, create a new tiddler tagged $:/tags/Stylesheet...
...then open it in the SideEditor ...
...and put this into it so you can experiment...
...and have some other tiddler open in edit mode so you see the effects IRL...

.tc-tiddler-controls {
  outline:1px solid blue;
  margin-top:-10px;
}
.tc-tiddler-edit-title {
  outline:1px solid red; background:pink;
}

<:-)

[Josiah]

Ciao all,

A general comment on CSS position: sticky. So long as you use it to assist simple keeping of things like top bars or edit bars on screen it works really well in supported browsers. AND it degrades WELL in browsers that don't. I have yet to see it fouling anything up.

Best wishes
Josiah

[Jan]

Hi Thomas,
that is perfect!
Thanks 

Hi all;
below you find the complete replacement for
$:/themes/tiddlywiki/vanilla/sticky
if you want a sticky editbar. I added a border below the edittoolbar that makes you see better, when the top of the text is hidden.

enjoy
Jan

<$reveal state="$:/themes/tiddlywiki/vanilla/options/stickytitles" type="match" text="yes">
``
.tc-tiddler-title {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;
    top: 0px;

        font-size: 0.9em;
        padding-bottom: 1px;
    background: ``<<colour tiddler-background>>``;
    z-index: 10;
}
.tc-tiddler-controls.tc-titlebar{
    height: 33px;
        margin-top: -8px;

}

.tc-editor-toolbar {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -o-sticky;
    position: -ms-sticky;
    position: sticky;

    top: 25px;
    background: ``<<colour tiddler-background>>``;
    z-index: 10;
    border-bottom: 0.55px solid #CCC;
}
``
</$reveal>

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d3c259cc-69f9-4743-9bbd-e1bf3d9243c1%40googlegroups.com.

[Ton Gerner]

Hi Jan,

I see one problem. Switch to preview and the edittoolbar is not sticky anymore!
No idea how to handle that.
Let's say it is a minor flaw.

Cheers,

Ton