Introduce fluid story/fixed sidebar mode

A new mode where the sidebar width is fixed and the story river expands
to fill the remaining space.

editions/prerelease/tiddlers/system/TiddlyWiki Pre-release.tid

@@ -11,6 +11,18 @@ It is provided for testing purposes. Please don't try to use it for anything imp
 
 ! Features for 5.1.9
 
+!! New "Fluid story, fixed sidebar" mode
+
+In response to popular demand, it is now possible to arrange the main window so that the sidebar has a fixed width and the story river expands to fill the remaining space.
+
+To switch it on, visit ''Theme Tweaks'' in the $:/ControlPanel ''Appearance'' tab and use the following options:
+
+* Sidebar layout:
+** ''Fixed story, fluid sidebar'' (default) - the story river has a fixed width and the sidebar fills the remaining space
+** ''Fluid story, fixed sidebar'' - the story river expands to fill horizontal space remaining after the fixed width sidebar
+* Sidebar width:
+** The width of the sidebar. Can be specified in pixels (eg ''350px''), a percentage (eg ''25%'') or other [[CSS unit|https://developer.mozilla.org/en/docs/Web/CSS/length]]
+
 !! New Tiddler Toolbar Button: "Open in new window"
 
 An experimental new tiddler toolbar button opens a single tiddler in a separate pop-up browser window. The tiddler will be dynamically updated just as in the main window. There are several uses:

themes/tiddlywiki/vanilla/ThemeTweaks.tid

@@ -42,6 +42,7 @@ You can tweak certain aspects of the ''Vanilla'' theme.
 
 ! Options
 
+|[[Sidebar layout|$:/themes/tiddlywiki/vanilla/options/sidebarlayout]] |<$select tiddler="$:/themes/tiddlywiki/vanilla/options/sidebarlayout"><option value="fixed-fluid">Fixed story, fluid sidebar</option><option value="fluid-fixed">Fluid story, fixed sidebar</option></$select> |
 |[[Sticky titles|$:/themes/tiddlywiki/vanilla/options/stickytitles]]<br>//Causes tiddler titles to "stick" to the top of the browser window. Caution: Does not work at all with Chrome, and causes some layout issues in Firefox// |<$select tiddler="$:/themes/tiddlywiki/vanilla/options/stickytitles"><option value="no">No</option><option value="yes">Yes</option></$select> |
 
 ! Settings
@@ -64,3 +65,4 @@ You can tweak certain aspects of the ''Vanilla'' theme.
 |[[Story width|$:/themes/tiddlywiki/vanilla/metrics/storywidth]]<br>//the overall width of the story river// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" default="" tag="input"/> |
 |[[Tiddler width|$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth]]<br>//within the story river//<br> |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth" default="" tag="input"/> |
 |[[Sidebar breakpoint|$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint]]<br>//the minimum page width at which the story<br>river and sidebar will appear side by side// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint" default="" tag="input"/> |
+|[[Sidebar width|$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth]]<br>//the width of the sidebar in fluid-fixed layout// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth" default="" tag="input"/> |

themes/tiddlywiki/vanilla/base.tid

@@ -21,7 +21,16 @@ background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`
 </$set>
 \end
 
-\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
+\define if-fluid-fixed(text,hiddenSidebarText)
+<$reveal state="$:/themes/tiddlywiki/vanilla/options/sidebarlayout" type="match" text="fluid-fixed">
+$text$
+<$reveal state="$:/state/sidebar" type="nomatch" text="yes" default="yes">
+$hiddenSidebarText$
+</$reveal>
+</$reveal>
+\end
+
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
 
 /*
 ** Start with the normalize CSS reset, and then belay some of its effects
@@ -823,6 +832,43 @@ html body.tc-body.tc-single-tiddler-window {
 	background: <<colour tiddler-background>>;
 }
 
+/*
+** Adjustments for fluid-fixed mode
+*/
+
+@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+
+<<if-fluid-fixed text:"""
+
+	.tc-story-river {
+		position: relative;
+		width: auto;
+		left: 0;
+		margin-right: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
+	}
+
+	.tc-tiddler-frame {
+		width: 100%;
+	}
+
+	.tc-sidebar-scrollable {
+		padding-left: 0;
+		left: auto;
+		bottom: 0;
+		right: 0;
+		width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
+	}
+
+""" hiddenSidebarText:"""
+
+	.tc-story-river {
+		margin-right: 0;
+	}
+
+""">>
+
+}
+
 /*
 ** Toolbar buttons
 */

themes/tiddlywiki/vanilla/metrics.multids

@@ -10,3 +10,4 @@ storyright: 770px
 storywidth: 770px
 tiddlerwidth: 686px
 sidebarbreakpoint: 960px
+sidebarwidth: 350px

themes/tiddlywiki/vanilla/options.multids

@@ -1,3 +1,4 @@
 title: $:/themes/tiddlywiki/vanilla/options/
 
 stickytitles: no
+sidebarlayout: fixed-fluid