[TW5] Proof-of-Concept: (new) Direct drag-to-resize Theme Tweak

[Mat]

Here is a demo for how we can make page elements drag-to-resize, directly at the element.

Note that the slider stems from the tiddler - close the tiddler and you close the slider.

So far I've only designed this for the "storyright: how far the left margin of the sidebar is rom the left of the page" - but I hope to make it for all of the "size settings" in the predefined in Theme Tweaks and, in the longer run, also for other settings. In the demo, it is one slider in one tiddler, but it would be useful to have some tiddlers show multiple such sliders via transclusion. - "Everything that has to do with the sidebar measures (height, width, ...)", "Positioning for every main element", etc. The display of these can be from the controlpanel. (This is also in the demo, but it interferes with a previous demo showing sliders centrally placed in the Size settings table... still, opening it activates the above demo.)

CSS can make it so there is no visible slider track, and the button could be designed in any fashion e.g a label tellin which element it concerns and, if no track, an arrow showing directions.

The goal is to make the UI more intuitive.

<:-)

TWaddle.tiddlyspot

[Eric Shulman]

On Thursday, May 28, 2015 at 11:03:59 AM UTC-7, Mat wrote:

Here is a demo for how we can make page elements drag-to-resize, directly at the element.

very nice!

 

Note that your screenwidth must be more or less matching, or you must set it there, for it to behave properly. (Is there any way to detect screen size? This would be useful in TW for different themes etc)

Use the "vw" (viewport width) and "vh" (viewport height) CSS measures.  They work *similar* to "%", in that you can write "50vw" to mean "half the viewport width". Note that "viewport" isn't always the same as "window".  For example, when content is in an iframe or a scrolling area, etc.

http://caniuse.com/#feat=viewport-units

 

Note also that the slider stems from the tiddler - close the tiddler and you close the slider.

If you add $:/tags/PageTemplate to $:/_TWaddle/SizeSlider/Sidebar then the slider will always appear, without having to keep the tiddler open.

Also, I found that it works well if you place it along the bottom of the window, by using CSS:

   bottom:0; width:100vw;

enjoy,

-e

[Richard Smith]

That's fantastic!

Regards,

Richard

[Mat]

@Eric

 

Use the "vw" (viewport width) and "vh" (viewport height) CSS measures.  

Super!!! That is so much superior to forcing the visitor to set his screen size!!!!! Very valuable, thank you! I've updated the demo.

Note also that the slider stems from the tiddler - close the tiddler and you close the slider.

If you add $:/tags/PageTemplate to $:/_TWaddle/SizeSlider/Sidebar then the slider will always appear, without having to keep the tiddler open.

I can see how this makes sense for the "goss motor" settings (e.g tiddler column right edge + sidebar left edge) and I'll see if I can get it to work decently. 

Thanks for your input.

@Richard - thanks for your kind words.

<:-)