feat: add ui placeholders for the districts pages

Author: lalver1

pems/districts/templates/districts/district.html

@@ -1,2 +1,24 @@
-<h1>District {{ district }}</h1>
-<p>URL of route: {% url "districts:district" district %}</p>
+{% extends "districts/index.html" %}
+
+{% block headline %}
+    District {{ url_district }} - {{ district_query.name }}
+{% endblock headline %}
+
+{% block district-content %}
+    <div class="row">
+        <div class="col-lg-4 border">
+            <h2>Form</h2>
+        </div>
+        <div class="col-lg-8 border">
+            <h2>Chart</h2>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-lg-4 border">
+            <h2>Details for {{ district_query.name }}</h2>
+        </div>
+        <div class="col-lg-8 border">
+            <h2>Map</h2>
+        </div>
+    </div>
+{% endblock district-content %}

pems/districts/templates/districts/index.html

@@ -1,7 +1,46 @@
 {% extends "core/base.html" %}
+
 {% block headline %}
     Districts
 {% endblock headline %}
+
 {% block inner-content %}
-    <p>Districts</p>
+    <div class="container p-t-lg">
+        <div class="row">
+            <div class="col-lg-2 pb-lg-5" role="complementary">
+                <!-- Side navigation -->
+                <nav aria-labelledby="navigation-list" class="side-navigation">
+                    <ul class="list-navigation">
+                        {% for district in district_queryset %}
+                            <li>
+                                <a href="{% url 'districts:district' district.number %}">District {{ district.number }}</a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </nav>
+            </div>
+            <div class="col-lg-10 pb-lg-5">
+
+                {% block district-content %}
+                    <div class="row">
+                        <div class="col-lg-4 border">
+                            <h2>Form</h2>
+                        </div>
+                        <div class="col-lg-8 border">
+                            <h2>Chart</h2>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-lg-4 border">
+                            <h2>Details</h2>
+                        </div>
+                        <div class="col-lg-8 border">
+                            <h2>Map</h2>
+                        </div>
+                    </div>
+                {% endblock district-content %}
+
+            </div>
+        </div>
+    </div>
 {% endblock inner-content %}