refactor template hierarchy

hjwp · May 1, 2016 · 6459ca3 · 6459ca3
1 parent 0fc4874
commit 6459ca3
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 44 deletions.
diff --git a/lists/templates/base.html b/lists/templates/base.html
@@ -1,57 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head>
+  <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>To-Do lists</title>
     <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
     <link href="/static/base.css" rel="stylesheet">
-</head>
+  </head>
 
-<body>
-<div class="container">
+  <body>
+    <div class="container">
 
-    <div class="navbar">
+      <div class="navbar">
         {% if user.email %}
-            <p>Logged in as {{ user.email}}</p>
-            <p><a id="id_logout" href="{% url 'logout' %}">Log out</a></p>
+        <p>Logged in as {{ user.email}}</p>
+        <p><a id="id_logout" href="{% url 'logout' %}">Log out</a></p>
         {% else %}
-          <form method="POST" action ="{% url 'send_login_email' %}">
-            Enter email to log in: <input name="email" type="text" />
-            {% csrf_token %}
-          </form>
+        <form method="POST" action ="{% url 'send_login_email' %}">
+          Enter email to log in: <input name="email" type="text" />
+          {% csrf_token %}
+        </form>
         {% endif %}
-    </div>
+      </div>
 
-    <div class="row">
-        <div class="col-md-6 col-md-offset-3 jumbotron">
-            <div class="text-center">
-                <h1>{% block header_text %}{% endblock %}</h1>
-                <form method="POST" action="{% block form_action %}{% endblock %}">
-                    {{ form.text }}
-                    {% csrf_token %}
-                    {% if form.errors %}
-                        <div class="form-group has-error">
-                            <div class="help-block">{{ form.text.errors }}</div>
-                        </div>
-                    {% endif %}
-                </form>
-            </div>
-        </div>
-    </div>
+      {% block content %}
+      {% endblock content %}
 
-    <div class="row">
-        <div class="col-md-6 col-md-offset-3">
-            {% block table %}
-            {% endblock %}
-        </div>
     </div>
 
-</div>
-<script src="http://code.jquery.com/jquery.min.js"></script>
-<script src="/static/list.js"></script>
-</body>
+    {% block scripts %}
+      <script src="http://code.jquery.com/jquery.min.js"></script>
+    {% endblock scripts %}
+  </body>
 
 </html>
diff --git a/lists/templates/home.html b/lists/templates/home.html
@@ -1,4 +1,4 @@
-{% extends 'base.html' %}
+{% extends 'list_base.html' %}
 
 {% block header_text %}Start a new To-Do list{% endblock %}
 

diff --git a/lists/templates/list.html b/lists/templates/list.html
@@ -1,13 +1,14 @@
-{% extends 'base.html' %}
+{% extends 'list_base.html' %}
 
 {% block header_text %}Your To-Do list{% endblock %}
 
 {% block form_action %}{% url 'view_list' list.id %}{% endblock %}
 
 {% block table %}
-    <table id="id_list_table" class="table">
-        {% for item in list.item_set.all %}
-            <tr><td>{{ forloop.counter }}: {{ item.text }}</td></tr>
-        {% endfor %}
-    </table>
+<table id="id_list_table" class="table">
+  {% for item in list.item_set.all %}
+  <tr><td>{{ forloop.counter }}: {{ item.text }}</td></tr>
+  {% endfor %}
+</table>
 {% endblock %}
+
diff --git a/lists/templates/list_base.html b/lists/templates/list_base.html
@@ -0,0 +1,34 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <div class="row">
+        <div class="col-md-6 col-md-offset-3 jumbotron">
+            <div class="text-center">
+                <h1>{% block header_text %}{% endblock %}</h1>
+                <form method="POST" action="{% block form_action %}{% endblock %}">
+                    {{ form.text }}
+                    {% csrf_token %}
+                    {% if form.errors %}
+                        <div class="form-group has-error">
+                            <div class="help-block">{{ form.text.errors }}</div>
+                        </div>
+                    {% endif %}
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-6 col-md-offset-3">
+            {% block table %}
+            {% endblock %}
+        </div>
+    </div>
+{% endblock content %}
+
+
+{% block scripts %}
+  {{ block.super }}
+  <script src="/static/list.js"></script>
+{% endblock %}
+