Replace and change CSS

Fix animation bugs
Fix layout issues
Replace custom CSS to bootstrap classes
Remove unused files
Change code to use es6 syntax
Add dropdown styles

Change-Id: Ie2ed31fa2e6763cf30d3b19e4bf9379019cbb0f5
Signed-off-by: Brandon Lo <lobrandon1217@gmail.com>

1 files changed, 35 insertions, 79 deletions

diff --git a/src/templates/dashboard/landing.html b/src/templates/dashboard/landing.html
index e6a235f..d4776cc 100644
--- a/src/templates/dashboard/landing.html
+++ b/src/templates/dashboard/landing.html
@@ -2,7 +2,7 @@
 {% load staticfiles %}
 
 {% block content %}
-<div class="" style="text-align: center;">
+<div class="text-center">
     {% if not request.user.is_anonymous %}
     {% if not request.user.userprofile.ssh_public_key %}
     <div class="alert alert-danger" role="alert">
@@ -15,53 +15,11 @@
 </div>
 {% csrf_token %}
 
-<style>
-    .wf_create {
-        display: inline-block;
-        text-align: center;
-    }
-
-    .wf_create_div {
-        text-align: center;
-    }
-
-    .hidden_form {
-        display: none;
-    }
-
-    .panel {
-        border: none;
-    }
-
-    .panels {
-        display: grid;
-        grid-template-columns: 33% 34% 33%;
-    }
-
-    .landing_container {
-        display: grid;
-        grid-template-columns: 1fr 30px 1fr;
-    }
-
-    .grid_panel {
-        padding: 30px;
-    }
-
-    .btn-primary {
-        margin: 10px;
-    }
-
-    h2 {
-        border-bottom: 1px solid #cccccc;
-    }
-
-    h1 {}
-</style>
 <div class="container-fluid">
     <div class="row">
         <!-- About us -->
         <div class="col-12 col-lg-6 mb-4">
-            <h2>About Us:</h2>
+            <h2 class="border-bottom">About Us:</h2>
             <p>The Lab as a Service (LaaS) project aims to help in the development and testing of LFN projects such as
                 OPNFV
                 by hosting hardware and providing access to the community. Currently, the only participating lab is the
@@ -73,56 +31,54 @@
         </div>
         <!-- Get started -->
         <div class="col-12 col-lg-6 mb-4">
-            <h2>Get Started:</h2>
+            <h2 class="border-bottom">Get Started:</h2>
             {% if request.user.is_anonymous %}
-            <h4 style="text-align:center;">To get started, please log in with your <a href="/accounts/login">Linux
-                    Foundation Jira account</a></h4>
+            <h4 class="text-center">
+                To get started, please log in with your <a href="/accounts/login">Linux Foundation Jira account</a>
+            </h4>
             {% else %}
             <p>To get started, book a server below:</p>
-            <a class="wf_create btn btn-primary"
-                style="display: flex; flex-direction: column; justify-content: center; margin: 20px; height: 100pt; vertical-align: middle; text-align: center; color: #FFF;"
+            <a class="btn btn-primary d-flex flex-column justify-content-center align-content-center border text-white p-4"
                 href="/booking/quick/">
-                <p style="font-size: xx-large">Book a Server</p>
+                <h4>Book a Server</h4>
             </a>
-            <p>PTLs can use our advanced options to book multi-node pods. If you are a PTL, you may use the options
+            <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
                 below:
             </p>
-            <div class='container'>
-                <div class="row">
-                    <div class="col-12 col-xl-4">
-                        <button class="wf_create btn btn-primary w-100" onclick="cwf(0)">Book a Pod</button>
-                    </div>
-                    <div class="col-12 col-xl-4">
-                        <button class="wf_create btn btn-primary w-100" onclick="cwf(1)">Design a Pod</button>
-                    </div>
-                    <div class="col-12 col-xl-4">
-                        <button class="wf_create btn btn-primary w-100" onclick="cwf(2)">Configure a Pod</button>
-                    </div>
+            <div class="row">
+                <div class="col-12 col-xl-4">
+                    <button class="btn btn-primary w-100" onclick="cwf(0)">Book a Pod</button>
+                </div>
+                <div class="col-12 col-xl-4">
+                    <button class="btn btn-primary w-100" onclick="cwf(1)">Design a Pod</button>
+                </div>
+                <div class="col-12 col-xl-4">
+                    <button class="btn btn-primary w-100" onclick="cwf(2)">Configure a Pod</button>
                 </div>
-                {% endif %}
             </div>
+            {% endif %}
         </div>
         <!-- Returning users -->
         {% if not request.user.is_anonymous %}
         <div class="col-12 col-lg-6 offset-lg-6 mb-4 mt-lg-4">
-            <h2 class="ht-4">Returning Users:</h2>
+            <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>
-            <div class="container">
-                <div class="row">
-                    <div class="col-12 col-xl-4">
-                        <button class="wf_create btn btn-primary w-100" onclick="cwf(3)">Snapshot a Host</button>
-                    </div>
-                    <div class="col-12 col-xl-4">
-                        <a class="wf_create btn btn-primary w-100" href="{% url 'account:my-bookings' %}">My
-                            Bookings</a>
-                    </div>
-                    {% if manager == True %}
+            <div class="row">
+                <div class="col-12 col-xl-4">
+                    <button class="btn btn-primary w-100" onclick="cwf(3)">Snapshot a Host</button>
+                </div>
+                <div class="col-12 col-xl-4">
+                    <a class="btn btn-primary w-100" href="{% url 'account:my-bookings' %}">
+                        My Bookings
+                    </a>
+                </div>
+                {% if manager == True %}
                     <div class="col-12 col-xl-4">
-                        <button class="wf_continue btn btn-primary w-100" onclick="continue_wf()">Resume
-                            Workflow</button>
+                        <button class="btn btn-primary w-100" onclick="continue_wf()">
+                            Resume Workflow
+                        </button>
                     </div>
-                    {% endif %}
-                </div>
+                {% endif %}
             </div>
         </div>
         {% endif %}
@@ -155,7 +111,7 @@
     }
 </script>
 
-<div class="hidden_form" id="form_div">
+<div class="hidden_form d-none" id="form_div">
     <form method="post" action="" class="form" id="wf_selection_form">
         {% csrf_token %}