design and authors

exquisite_branch/display.py

@@ -12,7 +12,7 @@ def display():
     db = get_db()
 
     branches = db.execute(
-        "SELECT content, branch, parent FROM branches"
+        "SELECT content, branch, parent, username FROM branches"
     ).fetchall()
 
     streams = []

exquisite_branch/draw.py

@@ -16,15 +16,16 @@ def draw(parent=None):
     if request.method == 'POST':
         content = request.form.get('content')
         branch = request.form.get('branch')
+        username = request.form.get('username')
         if request.is_json:
             data = request.get_json()
             content = data['content']
             branch = data['branch']
-
+            username = data['username']
 
         db.execute(
-            'INSERT INTO branches (content, parent, branch) VALUES (?, ?, ?)',
-            (content, parent, branch,)
+            'INSERT INTO branches (content, parent, branch, username) VALUES (?, ?, ?, ?)',
+            (content, parent, branch, username)
         )
         db.commit()
         print(url_for('share.share', branch=f"{branch}"))
@@ -58,10 +59,11 @@ def last():
     if request.method == 'POST':
         content = request.form['content']
         branch = request.form['branch']
+        username = request.form['username']
 
         db.execute(
-            'INSERT INTO branches (content, parent, branch) VALUES (?, ?, ?)',
-            (content, parent, branch,)
+            'INSERT INTO branches (content, parent, branch, username) VALUES (?, ?, ?, ?)',
+            (content, parent, branch, username)
         )
         db.commit()
         print(url_for('share.share', branch=f"{branch}"))
@@ -80,9 +82,11 @@ def new():
         content = request.form['content']
         branch = request.form['branch']
 
+        username = request.form['username']
+
         db.execute(
-            'INSERT INTO branches (content, parent, branch) VALUES (?, ?, ?)',
-            (content, parent, branch,)
+            'INSERT INTO branches (content, parent, branch, username) VALUES (?, ?, ?, ?)',
+            (content, parent, branch, username)
         )
         db.commit()
         return redirect(url_for('share.share', branch=branch))

exquisite_branch/schema.sql

@@ -4,5 +4,6 @@ CREATE TABLE branches (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     branch TEXT NOT NULL,
     content TEXT NOT NULL,
-    parent TEXT NOT NULL
+    parent TEXT NOT NULL,
+    username TEXT
 );

exquisite_branch/static/css/display.css

@@ -10,6 +10,21 @@
 	position: absolute;
 }
 
+.svg-container {
+	display: inline-block;
+	margin: 0;
+	padding: 0;
+	position: relative;
+}
+
+.author {
+	position: absolute;
+	left: 50%;
+	bottom: 50px;
+	font-size: 1rem;
+	background-color: white;
+}
+
 .branches {
 	overflow-x: auto;
 	overflow-y: hidden;

exquisite_branch/static/css/global.css

@@ -2,9 +2,27 @@ html,
 body {
 	margin: 0;
 	background-color: var(--background);
+	color: var(--color);
 	font-size: 1.25rem;
 }
 
 * {
 	box-sizing: border-box;
 }
+
+a {
+	color: currentColor;
+	text-decoration: none;
+}
+
+a:hover {
+	color: tomato;
+}
+
+nav {
+	text-align: center;
+}
+
+nav > * + * {
+	margin-left: 1ch;
+}

exquisite_branch/static/css/home.css

@@ -0,0 +1,43 @@
+header {
+	text-align: center;
+	padding: 1rem;
+}
+
+header object {
+	width: 100vmin;
+	height: auto;
+	margin: 0 auto;
+}
+
+object svg {
+	width: 100%;
+}
+
+header h1 {
+	font-size: 2rem;
+	font-weight: normal;
+	margin: 0;
+}
+
+main {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	margin-top: 100px;
+}
+
+main > * + * {
+	margin-top: 1rem;
+}
+
+@media (max-width: 767.98px) {
+	header object {
+		width: 75vw;
+	}
+
+	header h1 {
+		font-size: 1rem;
+	}
+}

exquisite_branch/static/css/share.css

@@ -24,5 +24,5 @@ button.clipboard {
 }
 
 button.clipboard:hover {
-	color: dodgerblue;
+	color: tomato;
 }

exquisite_branch/static/css/variables.css

@@ -1,3 +1,4 @@
 :root {
-	--background: #ddd;
+	--background: #edd;
+	--color: black;
 }

exquisite_branch/templates/base.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Exquisite Branch</title>
+		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
+		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
+
+		{%block head %}{%endblock%}
+	</head>
+	<body>
+		<nav>
+			{%block nav %}
+			<a href="{{url_for('home.home')}}">Home</a>
+			<a href="{{url_for('display.display')}}">Results</a>
+			{% endblock %}
+		</nav>
+		{%block contents %} {%endblock%}
+	</body>
+</html>

exquisite_branch/templates/display.html

@@ -1,15 +1,13 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Display</title>
-		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
-		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
+{%extends 'base.html' %} {%block head %}
+
 <link rel="stylesheet" href="{{url_for('static', filename='css/display.css')}}" />
-	</head>
-	<body>
+<title>Display</title>
+{%endblock%} {%block nav%}
+<a href="{{url_for('home.home')}}">Home</a>
+<a href="{{url_for('draw.last')}}">Draw</a>
+
+{%endblock%} {%block contents%}
+
 <h1>Exquisite Branch</h1>
 
 <div class="streams">
@@ -18,7 +16,17 @@
 		class="stream"
 		style="color: rgb({{ range(0, 255) | random }},{{ range(0, 255) | random }},{{ range(0, 255) | random }}); transform: translate({{ range(-5, 5) | random }}px, {{ range(-5, 5) | random }}px)"
 	>
-				{% for branch in stream %} {{branch['content'] | safe}} {%endfor%}
+		{% for branch in stream %}
+		<div class="svg-container">
+			{{branch['content'] | safe}}
+			<span
+				class="author"
+				style="transform: translate({{ range(-50, 50) | random }}px, {{ range(-10, 10) | random }}px"
+			>
+				{{ branch['username']}}
+			</span>
+		</div>
+		{%endfor%}
 	</div>
 	{%endfor%}
 </div>
@@ -29,9 +37,13 @@
 <div class="branches">
 	{% for stream in streams %}
 	<div class="branch">
-				{% for branch in stream %} {{branch['content'] | safe}} {%endfor%}
+		{% for branch in stream %}
+		<div class="svg-container">
+			{{branch['content'] | safe}}
+			<span class="author"> {{ branch['username']}} </span>
+		</div>
+		{%endfor%}
 	</div>
 	{%endfor%}
 </div>
-	</body>
-</html>
+{%endblock%}

exquisite_branch/templates/draw.html

@@ -1,21 +1,18 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+{%extends 'base.html' %} {%block head %}
 <title>Draw</title>
-
+<link rel="stylesheet" href="{{url_for('static', filename='css/draw.css')}}" />
 <script src="{{url_for('static', filename='js/draw.js')}}" defer></script>
 
-		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
-		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
-		<link rel="stylesheet" href="{{url_for('static', filename='css/draw.css')}}" />
-	</head>
-	<body>
+{%endblock%} {%block nav%}
+<a href="{{url_for('home.home')}}">Home</a>
+<a href="{{url_for('display.display')}}">Results</a>
+
+{%endblock%} {%block contents%}
+
 <h1>Draw</h1>
+
 <div id="divSmoothingFactor">
-			<label for="cmbBufferSize">Buffer size:</label>
+	<label for="cmbBufferSize">Smoothing</label>
 	<select id="cmbBufferSize">
 		<option value="1">1 - No smoothing</option>
 		<option value="4">4 - Sharp curves</option>
@@ -48,7 +45,7 @@
 <form method="POST">
 	<input type="hidden" name="branch" value="{{branch}}" />
 	<input type="hidden" name="content" />
+	<input type="text" name="username" placeholder="Name" />
 	<input type="submit" />
 </form>
-	</body>
-</html>
+{%endblock%}

exquisite_branch/templates/home.html

@@ -7,11 +7,21 @@
 		<title>Exquisite Branch</title>
 		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
 		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
+		<link rel="stylesheet" href="{{url_for('static', filename='css/home.css')}}" />
 	</head>
 	<body>
-		<h1>Exquisite Branch</h1>
+		<header class="title">
+			<object
+				data="{{url_for('static', filename='img/logo.svg')}}"
+				type="image/svg+xml"
+			></object>
+
+			<h1>really exquisite indeed</h1>
+		</header>
+		<main>
 			<a href="{{url_for('draw.new')}}">Start new</a> <br />
 			<a href="{{url_for('draw.last')}}">Continue from last</a> <br />
 			<a href="{{url_for('display.display')}}">Display results</a>
+		</main>
 	</body>
 </html>

exquisite_branch/templates/share.html

@@ -1,17 +1,13 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+{%extends 'base.html' %} {%block head %}
 <title>Share</title>
-		<link rel="stylesheet" href="{{url_for('static', filename='css/variables.css')}}" />
-		<link rel="stylesheet" href="{{url_for('static', filename='css/global.css')}}" />
 <link rel="stylesheet" href="{{url_for('static', filename='css/share.css')}}" />
-
 <script src="{{url_for('static', filename='js/copy.js')}}" defer></script>
-	</head>
-	<body>
+
+{%endblock%} {%block nav %}
+<a href="{{url_for('home.home')}}">Home</a>
+<a href="{{url_for('display.display')}}">Results</a>
+{% endblock %} {%block contents %}
+
 <div class="share">
 	Send this link to your friends:
 	<a
@@ -20,5 +16,5 @@
 		>{{ url_for('draw.draw', parent=branch, _external=True, _scheme='https')}}</a
 	>
 </div>
-	</body>
-</html>
+
+{%endblock%}