Add akraino template for dashboard

Signed-off-by: Adam LeBlanc <aleblanc@iol.unh.edu>
Change-Id: I02242e00779bcae7cd7622c2e891e4199c8d0e71
Signed-off-by: Adam LeBlanc <aleblanc@iol.unh.edu>

10 files changed, 99 insertions, 6 deletions

diff --git a/src/templates/akraino/base.html b/src/templates/akraino/base.html
new file mode 100644
index 0000000..1368476
--- /dev/null
+++ b/src/templates/akraino/base.html
@@ -0,0 +1,24 @@
+{% extends "base/base.html" %}
+{% load staticfiles %}
+{% block bgColor %}
+<style>
+.bgAkr {
+    background: #d9c2f2;
+}
+</style>
+<nav class="navbar navbar-light bgAkr navbar-fixed-top border-bottom py-0 mb-0" role="navigation">
+{% endblock bgColor %}
+
+{% block logo %}
+<div class="col-12 col-sm order-1 order-sm-2 text-center text-lg-left">
+    <a href="https://www.lfedge.org/projects/akraino/" class="navbar-brand">
+        <img src="{% static "img/akraino_logo.logo" %}">
+    </a>
+
+    <a class="navbar-brand d-none d-lg-inline" href={% url 'dashboard:index' %}>
+        Akraino Dashboard
+    </a>
+</div>
+{% endblock logo %}
+{% block dropDown %}
+{% endblock dropDown %}
diff --git a/src/templates/akraino/booking/quick_deploy.html b/src/templates/akraino/booking/quick_deploy.html
new file mode 100644
index 0000000..56a4791
--- /dev/null
+++ b/src/templates/akraino/booking/quick_deploy.html
@@ -0,0 +1,11 @@
+{% extends "base/booking/quick_deploy.html" %}
+{% block opnfv %}
+{% endblock opnfv %}
+{% block collab %}
+<div class="col-12 col-lg-4 my-2">
+    <div class="col border rounded py-2 h-100">
+        <label>Collaborators</label>
+        {{ form.users }}
+    </div>
+</div>
+{% endblock collab %}
diff --git a/src/templates/akraino/dashboard/landing.html b/src/templates/akraino/dashboard/landing.html
new file mode 100644
index 0000000..d7f434b
--- /dev/null
+++ b/src/templates/akraino/dashboard/landing.html
@@ -0,0 +1,22 @@
+{% extends "base/dashboard/landing.html" %}
+{% block about_us %}
+    <p>The Shared Community Lab at the IOL aims to help development and testing of LFN projects by hosting hardware and providing access to the community.</p>
+    <p>To get started, you can request access to a server at the right.</p>
+{% endblock about_us %}
+
+{% block btnGrp %}
+<style>
+.btnAkr {
+    color: #fff;
+    background-color: #39c0c0;
+}
+.btnAkr:hover{
+    color: #fff;
+    background-color: #259a9a;
+}
+</style>
+<p>To get started, book a pod below:</p>
+<a class="btn btnAkr btn-lg d-flex flex-column justify-content-center align-content-center border text-white p-4" href="/booking/quick/">Book a Pod</a>
+{% endblock btnGrp %}
+{% block returningUsers %}
+{% endblock returningUsers %}
diff --git a/src/templates/akraino/layout.html b/src/templates/akraino/layout.html
new file mode 100644
index 0000000..d30ddb6
--- /dev/null
+++ b/src/templates/akraino/layout.html
@@ -0,0 +1,5 @@
+{% extends "base/layout.html" %}
+
+{% block head-title %}
+<title>Akraino Dashboard</title>
+{% endblock head-title %}
diff --git a/src/templates/base/base.html b/src/templates/base/base.html
index 6776f7e..663741a 100644
--- a/src/templates/base/base.html
+++ b/src/templates/base/base.html
@@ -12,17 +12,19 @@
 {% block basecontent %}
 <div id="wrapper" class="d-flex flex-column">
     <!-- Navigation -->
+    {% block bgColor %}
     <nav class="navbar navbar-light bg-light navbar-fixed-top border-bottom py-0 mb-0" role="navigation">
+    {% endblock bgColor %}
         <div class="container-fluid pb-2 pb-sm-0">
             <!-- Logo -->
+            {% block logo %}
             <div class="col-12 col-sm order-1 order-sm-2 text-center text-lg-left">
-                <a href="https://www.opnfv.org/" class="navbar-brand">
-                    <img src="{% static "img/opnfv-logo.png" %}">
-                </a>
+            <h2>Logo Here</h2>
                 <a class="navbar-brand d-none d-lg-inline" href={% url 'dashboard:index' %}>
                     Laas Dashboard
                 </a>
             </div>
+            {% endblock logo %}
             <!-- Sidebar button -->
             <div class="col-6 col-sm-2 d-flex order-1 order-lg-3 d-lg-none">
                 <button class="btn border mx-auto" type="button" data-toggle="collapse" data-target="#sidebar"
@@ -75,6 +77,7 @@
                             <a href="/" class="list-group-item list-group-item-action">
                                 Home
                             </a>
+                            {% block dropDown %}
                             <a class="list-group-item list-group-item-action" data-toggle="collapse"
                                 href="#createList" role="button">
                                 Create <i class="fas fa-angle-down rotate"></i>
@@ -99,6 +102,7 @@
                                     Configure OPNFV
                                 </a>
                             </div>
+                            {% endblock dropDown %}
                             <a href="{% url 'resource:hosts' %}" class="list-group-item list-group-item-action">
                                 Hosts
                             </a>
diff --git a/src/templates/base/booking/quick_deploy.html b/src/templates/base/booking/quick_deploy.html
index 8570f25..42148c8 100644
--- a/src/templates/base/booking/quick_deploy.html
+++ b/src/templates/base/booking/quick_deploy.html
@@ -12,7 +12,7 @@
                 {% bootstrap_field form.filter_field show_label=False %}
             </div>
         </div>
-        <div class="row">
+        <div class="row justify-content-center">
             <div class="col-12 col-lg-3 my-2">
                 <div class="col border rounded py-2 h-100">
                     {% bootstrap_field form.purpose %}
@@ -25,18 +25,21 @@
                     </script>
                 </div>
             </div>
+            {% block collab %}
             <div class="col-12 col-lg-3 my-2">
                 <div class="col border rounded py-2 h-100">
                     <label>Collaborators</label>
                     {{ form.users }}
                 </div>
             </div>
+            {% endblock collab %}
             <div class="col-12 col-lg-3 my-2">
                 <div class="col border rounded py-2 h-100">
                     {% bootstrap_field form.hostname %}
                     {% bootstrap_field form.image %}
                 </div>
             </div>
+            {% block opnfv %}
             <div class="col-12 col-lg-3 my-2">
                 <div class="col border rounded py-2 h-100">
                     <strong>OPNFV: (Optional)</strong>
@@ -44,6 +47,7 @@
                     {% bootstrap_field form.scenario %}
                 </div>
             </div>
+            {% endblock opnfv %}
             <div class="col-12 d-flex mt-2 justify-content-end">
                 <button id="quick_booking_confirm" onclick="submit_form();" type="button" class="btn btn-success">Confirm</button>
             </div>
diff --git a/src/templates/base/dashboard/landing.html b/src/templates/base/dashboard/landing.html
index 9e45b09..dd09dc4 100644
--- a/src/templates/base/dashboard/landing.html
+++ b/src/templates/base/dashboard/landing.html
@@ -32,9 +32,9 @@
             To get started, please log in with your <a href="/accounts/login">Linux Foundation Jira account</a>
         </h4>
         {% else %}
+        {% block btnGrp %}
         <p>To get started, book a server below:</p>
-        <a class="btn btn-primary btn-lg d-flex flex-column justify-content-center align-content-center border text-white p-4"
-            href="/booking/quick/">
+        <a class="btn btn-primary btn-lg d-flex flex-column justify-content-center align-content-center border text-white p-4" href="/booking/quick/">
             Book a Server
         </a>
         <p class="mt-4">PTLs can use our advanced options to book multi-node pods. If you are a PTL, you may use the options
@@ -45,11 +45,13 @@
             <button class="btn btn-primary" onclick="create_workflow(1)">Design a Pod</button>
             <button class="btn btn-primary" onclick="create_workflow(2)">Configure a Pod</button>
         </div>
+        {% endblock btnGrp %}
         {% endif %}
     </div>
 
     <!-- Returning users -->
     {% if not request.user.is_anonymous %}
+    {% block returningUsers %}
     <div class="col-12 col-lg-6 offset-lg-6 mb-4 mt-lg-4">
         <h2 class="ht-4 border-bottom">Returning Users</h2>
         <p>If you're a returning user, some of the following options may be of interest:</p>
@@ -65,6 +67,7 @@
             {% endif %}
         </div>
     </div>
+    {% endblock returningUsers %}
     {% endif %}
 </div>
 
diff --git a/src/templates/base/layout.html b/src/templates/base/layout.html
index f35f1a7..edf9b6b 100644
--- a/src/templates/base/layout.html
+++ b/src/templates/base/layout.html
@@ -10,7 +10,9 @@
     <meta name="description" content="">
     <meta name="author" content="">
 
+    {% block head-title %}
     <title>OPNFV Laas {{ title }}</title>
+    {% endblock head-title %}
 
     <!-- Bootstrap Core CSS -->
     <link href="{% static "node_modules/bootstrap/dist/css/bootstrap.min.css" %}"
diff --git a/src/templates/laas/base.html b/src/templates/laas/base.html
new file mode 100644
index 0000000..5e9e9db
--- /dev/null
+++ b/src/templates/laas/base.html
@@ -0,0 +1,13 @@
+{% extends "base/base.html" %}
+{% load staticfiles %}
+{% block logo %}
+<div class="col-12 col-sm order-1 order-sm-2 text-center text-lg-left">
+    <a href="https://www.opnfv.org/" class="navbar-brand">
+        <img src="{% static "img/opnfv-logo.png" %}">
+    </a>
+    <a class="navbar-brand d-none d-lg-inline" href={% url 'dashboard:index' %}>
+        Laas Dashboard
+    </a>
+</div>
+{% endblock logo %}
+
diff --git a/src/templates/laas/layout.html b/src/templates/laas/layout.html
new file mode 100644
index 0000000..f9b1d99
--- /dev/null
+++ b/src/templates/laas/layout.html
@@ -0,0 +1,5 @@
+{% extends "base/layout.html" %}
+
+{% block head-title %}
+<title>LaaS Dashboard</title>
+{% endblock head-title %}