first commit

TiddlyFlex/config/navigation/edit-missing-tiddlers.tid

@@ -0,0 +1,3 @@
+title: $:/config/tiddlyflex/navigation/edit-missing-tiddlers
+
+no

TiddlyFlex/config/sidebar/width.tid

@@ -0,0 +1,3 @@
+title: $:/config/tiddlyflex/sidebar/width
+
+30%

TiddlyFlex/config/story-river/padding.tid

@@ -0,0 +1,3 @@
+title: $:/config/tiddlyflex/story-river/padding
+
+42px

TiddlyFlex/config/story-river/tiddler/margin-bottom.tid

@@ -0,0 +1,3 @@
+title: $:/config/tiddlyflex/story-river/tiddler/margin-bottom
+
+28px

TiddlyFlex/css/base.tid

@@ -0,0 +1,269 @@
+title: $:/plugins/BTC/TiddlyFlex/styles/base
+tags: $:/tags/Stylesheet
+
+.tc-tiddlyflex-container {
+	display: flex;
+	flex-flow: column;
+	justify-content: flex-start;
+	align-items: stretch;
+	height: 100vh;
+	max-height: 100vh;
+	width: 100vw;
+	max-width: 100vw;
+	outline: none;
+	overflow: clip;
+}
+
+.tc-tiddlyflex-main {
+	display: flex;
+	flex-direction: row;
+	flex-grow; 0;
+	flex-shrink: 1;
+	flex-basis: 100%;
+	max-height: 100%;
+	position: relative;
+}
+
+@media (min-width: 800px) {
+
+	.tc-flex-main {
+		overflow-x: clip;
+	}
+
+}
+
+.tc-tiddlyflex-header {
+	flex-grow: 0;
+	flex-shrink: 0;
+	box-shadow: 0 1px 5px -1px <<colour tiddlyflex-box-shadow>>;
+	z-index: 999;
+	background-color: <<colour page-background>>;
+}
+
+.tc-flex-footer {
+	flex-grow: 0;
+	flex-shrink: 0;
+	box-shadow: 0 -1px 5px -1px <<colour tiddlyflex-box-shadow>>;
+	z-index: 999;
+	background-color: <<colour page-background>>;
+}
+
+/***************/
+/* STORY RIVER */
+/***************/
+
+.tc-tiddlyflex-story-river-container {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	flex-grow: 1;
+	flex-shrink: 0;
+	flex-basis: calc(100% - {{$:/config/tiddlyflex/sidebar/width}});
+	transition: flex-basis {{$:/config/AnimationDuration}}ms;
+	overflow: hidden;
+	max-height: 100%;
+}
+
+<% if [{$:/state/sidebar}match[no]] %>
+
+.tc-tiddlyflex-story-river-container {
+	flex-basis: 100%;
+}
+
+<% endif %>
+
+.tc-tiddlyflex-story-river-container-inner {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: stretch;
+	max-height: 100%;
+	flex-grow: 1;
+	flex-shrink: 0;
+}
+
+@media (min-width: 800px) {
+
+	.tc-tiddlyflex-story-river-container-inner {
+		overflow: hidden;
+		flex-basis: 0;
+	}
+
+}
+
+.tc-flex-story-river-inner-inner {
+	flex-grow: 1;
+	flex-shrink: 1;
+	overflow-y: scroll;
+	scroll-behavior: smooth;
+}
+
+@media (min-width: 800px) {
+
+	.tc-flex-story-river-inner-inner {
+		flex-basis: 0;
+	}
+
+}
+
+.tc-tiddlyflex-story-river-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex-shrink: 0;
+	flex-grow: 1;
+	overflow: hidden;
+}
+
+@media (min-width: 800px) {
+
+	.tc-tiddlyflex-story-river-wrapper {
+		flex-basis: 0;
+	}
+
+}
+
+.tc-tiddlyflex-story-river-wrapper-inner {
+	flex-grow: 1;
+	flex-shrink: 1;
+	overflow-y: scroll;
+	scroll-behavior: smooth;
+}
+
+@media (min-width: 800px) {
+
+	.tc-tiddlyflex-story-river-wrapper-inner {
+		flex-basis: 0;
+	}
+
+}
+
+.tc-tiddlyflex-story-river-wrapper .tc-tiddler-frame {
+	width: 100%;
+}
+
+.tc-tiddlyflex-story-river-wrapper-inner .tc-tiddlyflex-story-river {
+	padding: {{$:/config/tiddlyflex/story-river/padding}};
+	min-height: 100%;
+}
+
+.tc-tiddlyflex-story-river-inner > .tc-tiddler-frame, .tc-tiddlyflex-story-river-inner > .tc-tiddler-view-frame {
+	margin-bottom: {{$:/config/tiddlyflex/story-river/tiddler/margin-bottom}};
+}
+
+.tc-tiddlyflex-story-river .tc-navigating {
+	border: 2px dashed <<colour primary>>;
+}
+
+/***********/
+/* SIDEBAR */
+/***********/
+
+.tc-tiddlyflex-sidebar {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	flex-grow: 0;
+	flex-shrink: 0;
+	max-height: 100%;
+}
+
+@media (min-width: 800px) {
+
+	.tc-tiddlyflex-sidebar {
+		width: {{$:/config/tiddlyflex/sidebar/width}};
+	}
+
+}
+
+.tc-tiddlyflex-sidebar-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: stretch;
+	max-height: 100%;
+	flex-grow: 1;
+	flex-shrink: 0;
+}
+
+.tc-tiddlyflex-sidebar-container-inner {
+	display: flex;
+	flex-grow: 1;
+	flex-shrink: 0;
+	overflow-y: auto;
+	scroll-behavior: smooth;
+	flex-basis: 0;
+	flex-direction: row;
+}
+
+.tc-tiddlyflex-sidebar-scrollable {
+	padding-top: 42px;
+	padding-left: 42px;
+}
+
+.tc-tiddlyflex-sidebar-hide {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	width: 100vw;
+	height: 100vh;
+	background: 0 0;
+	visibility: hidden;
+	z-index: 1000;
+	cursor: pointer;
+	-webkit-transition: background {{$:/config/AnimationDuration}}ms {{$:/config/AnimationDuration}}ms, visibility 0s calc(2 * {{$:/config/AnimationDuration}}ms);
+	transition: background {{$:/config/AnimationDuration}}ms {{$:/config/AnimationDuration}}ms, visibility 0s calc(2 * {{$:/config/AnimationDuration}}ms);
+}
+
+/******************/
+/* ACTIVE COLUMNS */
+/******************/
+
+.tc-tiddlyflex-story-river-active {
+	background: repeating-linear-gradient(
+		to right,
+		<<colour page-background>>,
+		<<colour page-background>> 10px,
+		<<colour tiddler-background>> 10px,
+		<<colour tiddler-background>> 20px
+	);
+}
+
+.tc-tiddlyflex-activate-column {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 100%;
+	cursor: default;
+	background-color: transparent;
+	-webkit-tap-highlight-color: transparent;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+/*************/
+/* DROPZONES */
+/*************/
+
+div[class^="tc-tiddlyflex-dropzone-"] {
+	min-height: 100%;
+	position: relative;
+}
+
+div[class^="tc-tiddlyflex-dropzone-"].tc-dragover:before {
+	z-index: 999;
+	display: block;
+	position: sticky;
+	top: 0;
+	left: 0;
+	right: 0;
+	background: <<colour dropzone-background>>;
+	text-align: center;
+	content: "<<lingo DropMessage>>";
+}

TiddlyFlex/css/narrow.tid

@@ -0,0 +1,51 @@
+title: $:/plugins/BTC/TiddlyFlex/styles/narrow
+tags: $:/tags/Stylesheet
+
+@media (max-width: 800px) {
+
+	.tc-tiddlyflex-main {
+		overflow-x: hidden;
+	}
+
+	.tc-tiddlyflex-sidebar {
+		position: fixed;
+		top:0;
+		right: 0;
+		bottom: 0;
+		width: 90%;
+		z-index: 1001;
+		background-color: <<colour page-background>>;
+		transform: translate3d(0,0,0);
+		transition: transform {{$:/config/AnimationDuration}}ms;
+	}
+
+	<%if [{$:/state/sidebar}match[no]] %>
+
+		.tc-tiddlyflex-sidebar {
+			transform: translate3d(100%,0,0);
+		}
+
+	<% endif %>
+
+	.tc-tiddlyflex-story-river-container-inner {
+		overflow-x: scroll;
+		width: 100vw;
+		scroll-behavior: smooth;
+		scroll-snap-type: x mandatory;
+	}
+
+	.tc-tiddlyflex-story-river-wrapper {
+		width: 100vw;
+		flex-basis: 100vw;
+		scroll-snap-align: start;
+		overflow: hidden;
+	}
+
+	.tc-tiddlyflex-sidebar-hide.tc-tiddlyflex-sidebar-shown {
+		visibility: visible;
+		background: rgba(0,0,0,.6);
+		-webkit-transition: background {{$:/config/AnimationDuration}}ms 0s;
+		transition: background {{$:/config/AnimationDuration}}ms 0s;
+	}
+
+}

TiddlyFlex/css/scroll-margins.tid

@@ -0,0 +1,50 @@
+title: $:/plugins/BTC/TiddlyFlex/styles/scroll-margins
+tags: $:/tags/Stylesheet
+
+\define tiddlyflex-scroll-margin-top-story-river-padding()
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
+
+.tc-tiddlyflex-story-river-$(column)$ .tc-tiddlyflex-story-river-inner > [data-tiddler-title="$(cssEscapedTitle)$"].tc-tiddler-view-frame, .tc-tiddlyflex-story-river-$(column)$ .tc-tiddlyflex-story-river-inner > [data-tiddler-title="$(cssEscapedTitle)$"].tc-tiddler-edit-frame {
+	scroll-margin-top: {{$:/config/tiddlyflex/story-river/padding}};
+	scroll-margin-left: {{$:/config/tiddlyflex/story-river/padding}};
+}
+
+\end
+
+\define tiddlyflex-scroll-margin-top()
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
+
+.tc-tiddlyflex-story-river-$(column)$ .tc-tiddlyflex-story-river-inner > [data-tiddler-title="$(cssEscapedTitle)$"].tc-tiddler-view-frame, .tc-tiddlyflex-story-river-$(column)$ .tc-tiddlyflex-story-river-inner > [data-tiddler-title="$(cssEscapedTitle)$"].tc-tiddler-edit-frame {
+	scroll-margin-top: {{{ [{$:/config/tiddlyflex/story-river/tiddler/margin-bottom}compare:number:lteq{$:/config/tiddlyflex/story-river/padding}] ~[{$:/config/tiddlyflex/story-river/padding}] }}};
+	scroll-margin-left: {{$:/config/tiddlyflex/story-river/padding}};
+}
+
+\end
+
+<$list filter="[list[$:/columns]] ~1" variable="column">
+
+<$set name="storyList" value={{{ [[$:/StoryList-]addsuffix<column>] }}}>
+
+<$list filter="[list<storyList>nth[1]]" variable="tiddler">
+
+<$set name="cssEscapedTitle" value={{{ [<tiddler>escapecss[]] }}}>
+
+<<tiddlyflex-scroll-margin-top-story-river-padding>>
+
+</$set>
+
+</$list>
+
+<$list filter="[list<storyList>] -[list<storyList>nth[1]]" variable="tiddler">
+
+<$set name="cssEscapedTitle" value={{{ [<tiddler>escapecss[]] }}}>
+
+<<tiddlyflex-scroll-margin-top>>
+
+</$set>
+
+</$list>
+
+</$set>
+
+</$list>