Start adding templates and layout

dmptrluke · dmptrluke · commit cfc6cf6b144b · 2015-04-03T01:48:48.000+13:00
diff --git a/cloudbot/web/main.py b/cloudbot/web/main.py
@@ -1,7 +1,5 @@
-import asyncio
-
 from tornado import gen
-from tornado.web import RequestHandler, Application, StaticFileHandler, url
+from tornado.web import Application, RequestHandler, StaticFileHandler
 from tornado.platform.asyncio import AsyncIOMainLoop
 
 from jinja2 import Environment, PackageLoader
@@ -25,8 +23,13 @@ def get_application():
 class TestHandler(RequestHandler):
     @gen.coroutine
     def get(self):
-        template = wi.env.get_template('layout.html')
-        self.write(template.render())
+        template = wi.env.get_template('basic.html')
+        args = {
+            'main_title': 'CloudBot',
+            'heading': 'Placeholder Page',
+            'text': 'Lorem ipsum!'
+        }
+        self.write(template.render(**args))
 
 
 class WebInterface():
diff --git a/cloudbot/web/templates/basic.html b/cloudbot/web/templates/basic.html
@@ -0,0 +1,8 @@
+{% extends "layout.html" %}
+{% block title %}{{ heading }} - {{ super() }}{% endblock %}
+{% block content %}
+<div class="placeholder">
+    <h1>{{ heading }}</h1>
+    <p class="lead">{{ text }}</p>
+</div>
+{% endblock %}
diff --git a/cloudbot/web/templates/layout.html b/cloudbot/web/templates/layout.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+    {% block head %}
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -9,7 +10,7 @@
     <meta name="author" content="">
     <link rel="icon" href="../../favicon.ico">
 
-    <title>Starter Template for Bootstrap</title>
+    <title>{% block title %}{{ main_title }}{% endblock %}</title>
 
     <!-- Bootstrap core CSS -->
     <link href="./s/css/bootstrap.min.css" rel="stylesheet">
@@ -20,6 +21,7 @@
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
     <![endif]-->
+    {% endblock %}
 </head>
 
 <body>
@@ -34,7 +36,7 @@
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
-            <a class="navbar-brand" href="#">Project name</a>
+            <a class="navbar-brand" href="#">{{ main_title }}</a>
         </div>
         <div id="navbar" class="collapse navbar-collapse">
             <ul class="nav navbar-nav">
@@ -48,14 +50,7 @@
 </nav>
 
 <div class="container">
-
-    <div class="placeholder">
-        <h1>Placeholder Text</h1>
-
-        <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a
-            mostly barebones HTML document.</p>
-    </div>
-
+    {% block content %}{% endblock %}
 </div>
 <!-- /.container -->
 
