test linked display

exquisite_branch/display.py

@@ -34,3 +34,14 @@ def display():
 
 def flatten(t):
     return [item for sublist in t for item in sublist]
+
+
+@bp.route('/linked')
+def linked():
+    db = get_db()
+
+    branches = db.execute(
+        "SELECT content, branch, parent, username FROM branches"
+    ).fetchall()
+
+    return render_template('display_linked_mako.html', branches=branches)

exquisite_branch/static/css/display_mako.css

@@ -1,3 +1,8 @@
+
+.container{ 
+	display: block;
+	padding: 1000px;
+}
 .streams {
 	overflow-x: auto;
 	overflow-y: hidden;
@@ -9,13 +14,11 @@
 
 .stream {
 	white-space: nowrap;
-	position: absolute;
+	position: relative;
 	display: inline-block;
 	width: 500px;
 	height: 500px;
 	position: relative;
-	top: 5000px;
-	left: 5000px;
 }
 
 .svg-container {

exquisite_branch/templates/display_linked_mako.html

@@ -0,0 +1,46 @@
+
+
+
+
+<%inherit file="base_mako.html" />
+
+
+<%block name="head">
+<link rel="stylesheet" href="${url_for('static', filename='css/display_mako.css')}">
+</%block>
+
+
+<main class="container">
+	
+
+	<% from random import random %>
+	<% from collections import defaultdict %>
+	<% transform = {'NEW': ''}  %> 
+	<% visited = defaultdict(int) %>
+	
+	<div class="stream">
+
+	% for branch in branches:
+		
+
+	<% visited[branch['parent']] += 1 %>
+
+
+	% if visited[branch['parent']] > 1: 
+		<% steer = (random() - 0.5) * 0.5 %>
+	% else:
+		<% steer = 0 %>
+	% endif
+
+
+		<% transform[branch['branch']] = f'{transform[branch["parent"]]} rotate({random() * 0.04 + steer}turn) translateX(100%)' %>
+		
+		<div class="svg-container" style="transform: ${transform[branch['parent']]}">
+			<a href="/draw/${branch['branch']}" target="__blank">
+				${branch['content']}
+			</a>
+		</div>
+		
+	% endfor
+	</div>
+</main>