Tweaking responsive themes' attributes

[Dave]

I'm using this theme http://tobibeer.github.io/tb5/#Responsive%20Theming

Which toggles between 2 themes depending on the width of the window (viewport).  I have it set to toggle between Vanilla and Snow White.

When I go to the theme tweaks to change the distances of things from the left margin, I'd like to have different settings for the two different themes, but any changes I make get set for both themes.

Is there a way to permanently change the "tweakable" settings differently for both themes?

Thanks,

- Dave

[Ton Gerner]

Hi Dave,

First of all the Snow White is based on the Vanilla theme.
The Snow White theme has a field 'dependents' that contains $:/themes/tiddlywiki/vanilla.
And if you look at the styles of Snow White ($:/themes/tiddlywiki/snowwhite/base) you mainly will see 'shadow' additions to the Vanilla theme.
That is the reason that tweaks work for both themes.

It must be possible to make separate 'story left' settings, but if you only want to have more 'margin to the left' it can be done much easier.

Below the sidebar breakpoint (default 960px) the styles in $:/themes/tiddlywiki/vanilla/base will be adjusted.
You can search for `@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) { ...`
and will find

@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
    .tc-tiddler-frame {
        padding: 14px 14px 14px 14px;
    }

    .tc-tiddler-info {
        margin: 0 -14px 0 -14px;
    }
}

and

@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {

    .tc-sidebar-header {
        padding: 14px;
        min-height: 32px;
        margin-top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
    }

    .tc-story-river {
        position: relative;
        padding: 0;
    }
}

Above the breakpoint the 'tiddler frame' padding is 28px 42px 42px 42px and the 'story river' padding is 42px;

Create a stylesheet (tiddler tagged with $:/tags/Stylesheet) which contains:

@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
    .tc-tiddler-frame {
        padding: 28px 42px 42px 42px;
    }
    .tc-story-river {
        padding: 42px;
    }
}

and Vanilla and Snow White behave the same for padding.

Hope that helps.

Cheers,

Ton

[Dave]

Thank you Ton,  I'll give that a try :)

[Dave]

That does look better!  

I assume that "(max-width: 1060px)" part is saying that "this only works  from zero (or whatever the minimum is) up to a max width of 1060px, at which point it switches to the numbers set in the theme tweaks.

Actually I just discovered that with this setup I can have 3 different arrangements depending on window width when I put your stylesheet tweak in plus this in the responsive theme tiddler:

$:/theme/responsive

Tobias Beer 10th February 2019 at 9:20pm

750: $:/themes/tongerner/mobie
more: $:/themes/tiddlywiki/snowwhite

So at full screen width I have tiddlers roughly centered with the snowwhite theme, then at the (sidebarbreakpoint value) on narrowing it jumps to the centered but stacked (menu on top) setting, then once it narrows to 750 it switches to your mobile theme.  Very cool

[Ton Gerner]

Hi Dave,

Glad it works for you.

On Monday, February 11, 2019 at 5:28:23 AM UTC+1, Dave wrote:

That does look better!  

I assume that "(max-width: 1060px)" part is saying that "this only works  from zero (or whatever the minimum is) up to a max width of 1060px, at which point it switches to the numbers set in the theme tweaks.

True, your sidebar breakpoint is here 1060px.

Actually I just discovered that with this setup I can have 3 different arrangements depending on window width when I put your stylesheet tweak in plus this in the responsive theme tiddler:

$:/theme/responsive

Tobias Beer 10th February 2019 at 9:20pm

750: $:/themes/tongerner/mobie
more: $:/themes/tiddlywiki/snowwhite

Someone using my simple Mobie theme ;-)

So at full screen width I have tiddlers roughly centered with the snowwhite theme, then at the (sidebarbreakpoint value) on narrowing it jumps to the centered but stacked (menu on top) setting, then once it narrows to 750 it switches to your mobile theme.  Very cool

Nice.

Cheers,

Ton

[Dave]

Hi Ton,

I'd reply to your post "Experimental Mobile Theme" but Google groups doesn't seem to be loading pages on older posts for me in the last 24 hours...

Anyway I have a question and a feature request for your Mobile Theme:

Q. How would I reverse the color scheme so the main tiddlers are colored like the menu area and vice versa?

R. Would it be possible to have an option to have the menu area automatically toggle off when you tap a menu link? I'm so used to going immediately to the just opened tiddler that it cognitively takes you out of the flow to process "where's my tiddler? Is something wrong? Oh yeah, I have to toggle off the menu"

Thanks!

[Ton Gerner]

Hi Dave,

> Q. How would I reverse the color scheme so the main tiddlers are colored like the menu area and vice versa?

I don't understand. For me there is no color difference between menu area (sidebar) and tiddlers (story river).
Anyway you can choose an other palette.

> R. Would it be possible to have an option to have the menu area automatically toggle off when you tap a menu link?

No, not possible in this setup.

In the Experimental mobile theme thread:  I answered Mohammad about the same issue:

It was a design decision: the Menu button toggles between Story river and Sidebar menu. So you need to click Menu again to get to the story river.
To be honest I don't know if the 'normal' way - with sidebar above story river (when below sidebar breakpoint) is easier. Time will tell.
Up till now (since aTW & Quinoid) I never used my phone for TW. So it is new for me.

Anyhow I learned a lot by implementing the 'if-then' macros in my stylesheet (needed for toggling story river / sidebar menu) ;-)

With that knowledge I could answer your question in this thread. ;-)

I think I will transform my Mobie theme into a mobile toolbar (no theme anymore); then you can swipe to the top to reach the sidebar menu and clicking a link will you bring to the tiddler in the story river.

Cheers,

Ton