diff --git a/exquisite_branch/__init__.py b/exquisite_branch/__init__.py index cacbd6c..2482920 100644 --- a/exquisite_branch/__init__.py +++ b/exquisite_branch/__init__.py @@ -1,6 +1,7 @@ import os from flask import Flask, send_from_directory from . import prefix +from flask_mako import MakoTemplates def create_app(test_config=None): @@ -27,6 +28,8 @@ def create_app(test_config=None): from . import db db.init_app(app) + mako = MakoTemplates(app) + @app.route("/favicon.ico") def favicon(): return send_from_directory( diff --git a/exquisite_branch/display.py b/exquisite_branch/display.py index 538c67a..ba6e120 100644 --- a/exquisite_branch/display.py +++ b/exquisite_branch/display.py @@ -1,5 +1,6 @@ from flask import (Blueprint, flash, g, redirect, - render_template, request, session, url_for) + request, session, url_for) +from flask_mako import render_template from exquisite_branch.db import get_db @@ -28,7 +29,7 @@ def display(): streams.append(stream[::-1]) - return render_template('display.html', branches=branches, streams=streams) + return render_template('display_mako.html', branches=branches, streams=streams) def flatten(t): diff --git a/exquisite_branch/static/css/display_mako.css b/exquisite_branch/static/css/display_mako.css new file mode 100644 index 0000000..b163836 --- /dev/null +++ b/exquisite_branch/static/css/display_mako.css @@ -0,0 +1,49 @@ +.streams { + overflow-x: auto; + overflow-y: hidden; + position: relative; + width: 500px; + height: 500px; + display: inline-block; +} + +.stream { + white-space: nowrap; + position: absolute; + display: inline-block; + width: 500px; + height: 500px; + position: relative; + top: 5000px; + left: 0px; +} + +.svg-container { + position: absolute; + top: 0; + left: 0; + display: inline-block; + + +} + +.author { + position: absolute; + left: 50%; + bottom: 50px; + font-size: 1rem; + background-color: white; +} + +.branches { + overflow-x: auto; + overflow-y: hidden; +} + +.branch { + white-space: nowrap; +} + +.branch svg { + border-top: 1px solid currentColor; +} diff --git a/exquisite_branch/templates/base_mako.html b/exquisite_branch/templates/base_mako.html new file mode 100644 index 0000000..d158eae --- /dev/null +++ b/exquisite_branch/templates/base_mako.html @@ -0,0 +1,22 @@ + + + + + + + Exquisite Branch + + + + <%block name='head' %> + + + + ${self.body()} + + diff --git a/exquisite_branch/templates/display_mako.html b/exquisite_branch/templates/display_mako.html new file mode 100644 index 0000000..3dbb365 --- /dev/null +++ b/exquisite_branch/templates/display_mako.html @@ -0,0 +1,20 @@ + + + + +<%inherit file="base_mako.html" /> + +<%block name="head"> + + + +<% from random import random %> +% for stream in streams: +
+ <% transform = '' %> + % for branch in stream: + <% transform = transform + ' rotate(' + str(random() * 0.1) + 'turn) translateX(100%)'%> +
${branch['content']}
+ % endfor +
+% endfor \ No newline at end of file diff --git a/requirements.txt b/requirements.txt new file mode 100644 index 0000000..e69de29