From 605da6b9e12cd5a12ddf3235fda78c2577b962a9 Mon Sep 17 00:00:00 2001
From: Struan Donald <struan@exo.org.uk>
Date: Thu, 28 Oct 2021 13:01:32 +0100
Subject: [PATCH 1/2] WIP to bring api page design in line

---
 caps/static/scss/api.scss         | 13 +++++++++++++
 caps/static/scss/main.scss        |  7 ++++---
 templates/rest_framework/api.html | 24 +++++++++++++++++++++---
 3 files changed, 38 insertions(+), 6 deletions(-)
 create mode 100644 caps/static/scss/api.scss

diff --git a/caps/static/scss/api.scss b/caps/static/scss/api.scss
new file mode 100644
index 000000000..02282a8e6
--- /dev/null
+++ b/caps/static/scss/api.scss
@@ -0,0 +1,13 @@
+ul.breadcrumb {
+  li + li {
+    ::before {
+      padding: 0 5px;
+      color: #ccc;
+      content: "/\00a0";
+    }
+  }
+}
+
+.pull-right {
+  float: right !important;
+}
diff --git a/caps/static/scss/main.scss b/caps/static/scss/main.scss
index 8197bea8c..d46620374 100644
--- a/caps/static/scss/main.scss
+++ b/caps/static/scss/main.scss
@@ -32,14 +32,14 @@
 @import "../bootstrap/forms";
 @import "../bootstrap/buttons";
 @import "../bootstrap/transitions";
-// @import "../bootstrap/dropdown";
-// @import "../bootstrap/button-group";
+@import "../bootstrap/dropdown";
+@import "../bootstrap/button-group";
 // @import "../bootstrap/input-group";
 // @import "../bootstrap/custom-forms";
 @import "../bootstrap/nav";
 @import "../bootstrap/navbar";
 @import "../bootstrap/card";
-// @import "../bootstrap/breadcrumb";
+@import "../bootstrap/breadcrumb";
 // @import "../bootstrap/pagination";
 @import "../bootstrap/badge";
 // @import "../bootstrap/jumbotron";
@@ -83,3 +83,4 @@
 @import "homepage";
 @import "council-powers";
 @import "net-zero-local-hero";
+@import "api";
diff --git a/templates/rest_framework/api.html b/templates/rest_framework/api.html
index 254ce1012..155b26aa1 100644
--- a/templates/rest_framework/api.html
+++ b/templates/rest_framework/api.html
@@ -3,8 +3,26 @@
 {% load static %}
 {% load pipeline %}
 
-{% block title %}CAPS API{% endblock %}
+{% block bootstrap_theme %}
+    {% stylesheet 'main' %}
+{% endblock %}
+
+{% block title %}Climate Action Plan Explorer API{% endblock %}
 
-{% block branding %}
-<a class="navbar-brand" rel="nofollow" href="/">DATA</a> <span class="navbar-brand">&raquo;</span> <a class="navbar-brand" href="{% url 'api-root' %}">API</a>
+{% block navbar %}
+    {% include 'includes/site-header.html' %}
+    <div class="site-subheader">
+        <nav class="navbar navbar-expand-md navbar-dark">
+            <a class="navbar-brand" href="{% url 'home' %}">Climate Action Plan Explorer</a>
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#secondaryNav" aria-controls="secondaryNav" aria-expanded="false" aria-label="Toggle secondary navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="secondaryNav">
+                <div class="navbar-nav">
+                    <a class="nav-link" href="{% url 'council_list' %}">All councils</a>
+                    <a class="nav-link" href="{% url 'about' %}">About</a>
+                </div>
+            </div>
+        </nav>
+    </div>
 {% endblock %}

From d1d942b4daafd8de49fa595940eec7fcb6ce53d6 Mon Sep 17 00:00:00 2001
From: Struan Donald <struan@exo.org.uk>
Date: Thu, 11 Nov 2021 18:24:02 +0000
Subject: [PATCH 2/2] use bootstrap 4 JS instead of rest frameworks own version

---
 templates/rest_framework/api.html | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/templates/rest_framework/api.html b/templates/rest_framework/api.html
index 155b26aa1..675ed70a4 100644
--- a/templates/rest_framework/api.html
+++ b/templates/rest_framework/api.html
@@ -2,11 +2,16 @@
 
 {% load static %}
 {% load pipeline %}
+{% load bootstrap4 %}
 
 {% block bootstrap_theme %}
     {% stylesheet 'main' %}
 {% endblock %}
 
+{% block script %}
+{% bootstrap_javascript jquery='full' %}
+{% endblock %}
+
 {% block title %}Climate Action Plan Explorer API{% endblock %}
 
 {% block navbar %}