How can I get the layout to change depending upon the mode

[joearms]

My Blog has two modes (with the righthand sidebar expanded or not)

It's here: https://joearms.github.io/tw/share/output/index.html

and the source is at:https://github.com/joearms/joearms.github.io/tree/master/tw

When I click on the "show sidebar" chevron the sidebar is shown

but the width is wrong.

I want the layout to change in these two modes

In view mode I want the story bit to take

up say 65% of the screen on my mac

or 95% on a mobile phone.

In toolbar visible mode I want the "standard"

layout.

Any ideas how to do this?

Cheers

/Joe

[Jeremy Ruston]

Hi Joe

We can use wikitext primitives within stylesheets to make conditional rules.

Tiny bit of background about stylesheets: TiddlyWiki in the browser renders all tiddlers tagged $:/tags/Stylesheet into a <style> element. Tiddlers of content type text/css will be processed as raw CSS, but tiddlers with the content type text/vnd.tiddlywiki (the default) are processed by first wikifying them, and then extracting the plain text portion. (So, for example, if a text/vnd.tiddlywiki stylesheet were to contain the text "<p>23</p>", the plain text content would be the string “23”).

There’s a danger of inadvertent wikification of stylesheet text, and so we usually use a /rules pragma to restrict the wikitext rules that will be observed within the stylesheet to just transclusion and macro invocations:

\rules only filteredtranscludeinline transcludeinline macrocallinline macrocallblock

Putting the pieces together, here’s a stylesheet that sets the page background colour to red whenever the sidebar is hidden:

\define if-sidebar-visible(text)

<$reveal state="$:/state/sidebar" type="nomatch" text="yes" default="yes">

$text$

</$reveal>

\end

\define if-sidebar-not-visible(text)

<$reveal state="$:/state/sidebar" type="nomatch" text="no" default="yes">

$text$

</$reveal>

\end

\rules only filteredtranscludeinline transcludeinline macrocallinline macrocallblock

html body.tc-body {

background: <<if-sidebar-visible "green">><<if-sidebar-not-visible "blue">>;

}

We define a couple of macros before the \rules pragma that encapsulate the conditional logic, and then invoke those macros within the body of the stylesheet.

Your example of changing the story river width when using the centralised theme is a bit more complicated but something like this should do the trick:

\define if-sidebar-visible(text)

<$reveal state="$:/state/sidebar" type="nomatch" text="yes" default="yes">

$text$

</$reveal>

\end

\define if-sidebar-not-visible(text)

<$reveal state="$:/state/sidebar" type="nomatch" text="no" default="yes">

$text$

</$reveal>

\end

\rules only filteredtranscludeinline transcludeinline macrocallinline macrocallblock

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

html .tc-story-river {

width: <<if-sidebar-visible "770px">><<if-sidebar-not-visible "970px">>;

}

html .tc-sidebar-scrollable {

margin-left: <<if-sidebar-visible "343px">><<if-sidebar-not-visible "443px">>;

}

}

Best wishes

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywikidev.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/807eed3e-c186-42a2-a036-42cdd4d5f9e2%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.