Docs: tutorial view made responsive

Author: simzer

docs/script/tutorial/tutorial.js

@@ -15,6 +15,10 @@ export default class tutorial
 		this.discover();
 
 		this.setupVizzu(snippetRegistry);
+
+		window.onresize = () => {
+			this.setVizzuPosition(this.activeSnippet, false);
+		}
 	}
 
 	scrolled(event)
@@ -46,7 +50,10 @@ export default class tutorial
 		let element = document.getElementById(elementId);
 
 		if (element === null) this.setInitialSnippet(defaultId);
-		else element.focus({ preventScroll: true });
+		else {
+			this.activeSnippet = element;
+			element.focus({ preventScroll: true });
+		}
 	}
 
 	setupVizzu(snippetRegistry)
@@ -95,6 +102,16 @@ export default class tutorial
 
 	activateSnippet(snippet)
 	{
+		this.activeSnippet = snippet;
+		this.setVizzuPosition(snippet, true);
+		const id = DomHelper.parseId(snippet).id;
+		this.vizzuView.step(id);
+	}
+
+	setVizzuPosition(snippet, transition)
+	{
+		if (this.activeSnippet == undefined) return;
+
 		let canvas = document.getElementById('vizzu-canvas');
 
 		let targetTop = snippet.offsetTop 
@@ -103,11 +120,10 @@ export default class tutorial
 
 		let view = document.getElementById('vizzu-view');
 
-		view.style.top = targetTop + 'px';
-		view.style.transition = 'top .2s';
-
-		const id = DomHelper.parseId(snippet).id;
-		this.vizzuView.step(id);
+		let left = parseInt(window.getComputedStyle(view).left, 10);
+		view.style.top = (left > 0 ? targetTop : 0)+ 'px';
+		
+		view.style.transition = `top ${transition ? .2 : 0}s`;
 	}
 
 	firstVisibleSubtitle()

docs/style/main.css

@@ -45,11 +45,6 @@ h3 {
 	font-size: 20px;
 }
 
-#content {
-	padding: 0px 1px 50px 1px;
-	width: 650px;
-}
-
 #content-view {
 	outline: none !important;
 	overflow: hidden;

docs/style/tutorial.css

@@ -23,6 +23,46 @@ th {
 	overflow-x: hidden;
 }
 
+#content {
+	padding: 0px 1px 50px 1px;
+	max-width: 650px;
+	width: calc(100% - 500px);
+}
+
+#vizzu-view {
+	width: 500px;
+	height: 0px;
+	overflow: none;
+	display: block;
+	position: relative;
+	left: min(660px, 100% - 500px + 10px);
+}
+
+@media screen and (max-width: 1200px) {
+
+#content {
+	width: 100%;
+}
+	
+#vizzu-view {
+	width: 100%;
+	height: 260px;
+	overflow: none;
+	display: block;
+	position: sticky;
+	top: 0px;
+	left: 0px;
+	z-index: 100;
+	background-color: #fff;
+	filter: drop-shadow(0 2px 4px #e0dcda);
+}
+
+#vizzu-canvas {
+	filter: none !important;
+}
+
+}
+
 .snippet {
 	line-height: 1.35em;
 	color: #666;
@@ -32,6 +72,7 @@ th {
 	padding-bottom: 5px;
 	padding-left: 3em;
 	padding-right: 1em;
+	overflow-x: auto;
 }
 
 .runable {
@@ -79,15 +120,6 @@ th {
 	padding-right: 1em;
 }
 
-#vizzu-view {
-	width: 0px;
-	height: 0px;
-	overflow: none;
-	display: block;
-	position: relative;
-	left: 660px;
-}
-
 #vizzu-canvas {
 	width: 480px;
 	height: 260px;