Cecily updates

core/modules/macros/list/listviews/cecily.js

@@ -56,29 +56,30 @@ CecilyListView.prototype.lookupTiddlerInMap = function(title,domNode) {
 			newPosition = {
 				x: this.newTiddlerPosition.x,
 				y: this.newTiddlerPosition.y,
-				w: 300,
+				w: 100,
-				h: 300
+				h: 100
 			};
-			this.newTiddlerPosition.x += 320;
+			this.newTiddlerPosition.x += newPosition.w * 1.2;
 			break;
 	}
 	// Return the position
 	return newPosition || {
 		x: 0,
 		y: 0,
-		w: 300,
+		w: 100,
-		h: 300
+		h: 100
 	};
 };
 
 CecilyListView.prototype.positionTiddler = function(title,domNode) {
 	var pos = this.lookupTiddlerInMap(title,domNode),
 		scale = pos.w/domNode.offsetWidth;
+console.log("positioning",title,"domNode.offsetWidth",domNode.offsetWidth);
 	domNode.style.position = "absolute";
 	$tw.utils.setStyle(domNode,[
 		{transition: $tw.utils.roundTripPropertyName("transform") + " " + $tw.config.preferences.animationDurationMs + " ease-in-out"},
 		{transformOrigin: "0% 0%"},
-		{transform: "scale(" + scale + ") translateX(" + pos.x + "px) translateY(" + pos.y + "px)"}
+		{transform: "translateX(" + pos.x + "px) translateY(" + pos.y + "px) scale(" + scale + ")"}
 	]);
 };
 

core/styles/tiddlywiki.css

@@ -5832,10 +5832,6 @@ html:full-screen {
 Tiddler styles
 */
 
-.tw-story-element {
-  position: relative;
-}
-
 @media (min-width: 767px) {
   .tw-tiddler-frame {
     padding: 30px 30px 30px 30px;
@@ -5922,6 +5918,33 @@ a.tw-tiddlylink-missing {
   font-style: inherit;
 }
 
+/*
+Cecily views
+*/
+
+.mediumCecily {
+  overflow-x: scroll;
+  white-space: nowrap;
+  background: #ccc;
+  -webkit-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
+     -moz-box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
+          box-shadow: inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15);
+}
+
+.mediumCecily * {
+  overflow-x: auto;
+}
+
+.mediumCecily .tw-cecily-tiddler-frame {
+  width: 300px;
+  padding: 30px 30px 30px 30px;
+  margin: 30px 5px 30px 5px;
+  background-color: #fff;
+  -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
+     -moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
+          box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
+}
+
 /*
 Dropdown menus
 */

cssbuild/tiddlywiki.less

@@ -55,10 +55,6 @@ html:full-screen			{ width: 100%; height: 100%; }
 Tiddler styles
 */
 
-.tw-story-element {
-	position: relative;
-}
-
 @media (min-width: 767px) {
 
 .tw-tiddler-frame {
@@ -146,6 +142,29 @@ a.tw-tiddlylink-missing {
 	font-style: inherit;
 }
 
+/*
+Cecily views
+*/
+
+.mediumCecily {
+	overflow-x: scroll;
+	white-space: nowrap;
+	.box-shadow(inset 1px 1px 4px 1px rgba(0, 0, 0, 0.15));
+	background: #ccc;
+}
+
+.mediumCecily * {
+	overflow-x: auto;
+}
+
+.mediumCecily .tw-cecily-tiddler-frame {
+	padding: 30px 30px 30px 30px;
+	margin: 30px 5px 30px 5px;
+	.box-shadow(1px 1px 6px rgba(0,0,0,0.4));
+	background-color: #fff;
+	width: 300px;
+}
+
 /*
 Dropdown menus
 */

tw5.com/tiddlers/samples/CecilyTemplate.tid

@@ -0,0 +1,15 @@
+title: CecilyTemplate
+
+<div class="title">
+	<span><<view title>></span>
+	<<button close class:"btn-invisible pull-right"><[img[$:/core/images/close-button.svg]]>>
+</div>
+<div class="small">
+	<<view modifier link>> <<view modified date>>
+</div>
+{{tw-tags-wrapper{
+((([is[current]tags[]]))($:/templates/TagTemplate))
+}}}
+<div class="body">
+	<<view text wikified>>
+</div>

tw5.com/tiddlers/samples/CecilyView.tid

@@ -2,4 +2,6 @@ title: CecilyView
 
 "Cecily" provides a customisable ZoomableUserInterface to your tiddlers.
 
-<<list filter:"[tag[introduction]]" template:"$:/templates/ViewTemplate" listview:cecily>>
+{{mediumCecily{
+<<list filter:"[list[$:/StoryList]]" template:"CecilyTemplate" listview:cecily itemClass:"tw-cecily-tiddler-frame">>
+}}}