Merge "Add bootstrap 4 support"

1 files changed, 99 insertions, 60 deletions

diff --git a/src/templates/dashboard/landing.html b/src/templates/dashboard/landing.html
index fb75d5f..e6a235f 100644
--- a/src/templates/dashboard/landing.html
+++ b/src/templates/dashboard/landing.html
@@ -2,27 +2,30 @@
 {% load staticfiles %}
 
 {% block content %}
-    <div class="" style="text-align: center;">
-        {% if not request.user.is_anonymous %}
-        {% if not request.user.userprofile.ssh_public_key %}
-        <h4 style="display: inline; text-align: center; border: 3px solid red; padding: 10px; border-radius: 10000px; height: 40px;">
-            Warning: you need to upload an ssh key under <a href="/accounts/settings">account settings</a> if you wish to log into the servers you book
-        </h4>
-        {% endif %}
-        {% else %}
-        {% endif %}
+<div class="" style="text-align: center;">
+    {% if not request.user.is_anonymous %}
+    {% if not request.user.userprofile.ssh_public_key %}
+    <div class="alert alert-danger" role="alert">
+        Warning: you need to upload an ssh key under <a href="/accounts/settings">account settings</a> if you wish to
+        log into the servers you book
     </div>
+    {% endif %}
+    {% else %}
+    {% endif %}
+</div>
 {% csrf_token %}
 
 <style>
-    .wf_create{
+    .wf_create {
         display: inline-block;
         text-align: center;
     }
-    .wf_create_div{
+
+    .wf_create_div {
         text-align: center;
     }
-    .hidden_form{
+
+    .hidden_form {
         display: none;
     }
 
@@ -39,81 +42,117 @@
         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="landing_container">
-    <div class="info_panel grid_panel">
-        <h2>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 University of New Hampshire Interoperability Lab (UNH-IOL).</p>
-        <p>To get started, you can request access to a server at the right. PTL's have the ability to design and book a whole block of servers with customized layer2 networks (e.g. a Pharos Pod). Read more here: <a href="https://wiki.opnfv.org/display/INF/Lab+as+a+Service+2.0">LaaS Wiki</a></p>
 
+    h1 {}
+</style>
+<div class="container-fluid">
+    <div class="row">
+        <!-- About us -->
+        <div class="col-12 col-lg-6 mb-4">
+            <h2>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
+                University of New Hampshire Interoperability Lab (UNH-IOL).</p>
+            <p>To get started, you can request access to a server at the right. PTL's have the ability to design and
+                book a
+                whole block of servers with customized layer2 networks (e.g. a Pharos Pod). Read more here: <a
+                    href="https://wiki.opnfv.org/display/INF/Lab+as+a+Service+2.0">LaaS Wiki</a></p>
+        </div>
+        <!-- Get started -->
+        <div class="col-12 col-lg-6 mb-4">
+            <h2>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>
+            {% 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;"
+                href="/booking/quick/">
+                <p style="font-size: xx-large">Book a Server</p>
+            </a>
+            <p>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>
+                {% endif %}
+            </div>
+        </div>
+        <!-- Returning users -->
         {% if not request.user.is_anonymous %}
-        <h2 style="margin-top: 50px;">Returning Users:</h2>
-        <p>If you're a returning user, some of the following options may be of interest:</p>
-        <button class="wf_create btn btn-primary" onclick="cwf(3)">Snapshot a Host</button>
-        <a class="wf_create btn btn-primary" href="{% url 'account:my-bookings' %}">My Bookings</a>
-        {% if manager == True %}
-        <button class="wf_continue btn btn-primary" onclick="continue_wf()">Continue Unfinished Workflow</button>
-        {% endif %}
-        {% endif %}
-    </div>
-    <div class="">
-    </div>
-    <div class="actions_panel grid_panel">
-        <h2>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>
-        {% 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;" href="/booking/quick/"><p style="font-size: xx-large">Book a Server</p></a>
-        <p>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='wf_create_div'>
-
-                <button class="wf_create btn btn-primary" onclick="cwf(0)">Book a Pod</button>
-                <button class="wf_create btn btn-primary" onclick="cwf(1)">Design a Pod</button>
-                <button class="wf_create btn btn-primary" onclick="cwf(2)">Configure a Pod</button>
-        {% endif %}
+        <div class="col-12 col-lg-6 offset-lg-6 mb-4 mt-lg-4">
+            <h2 class="ht-4">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="col-12 col-xl-4">
+                        <button class="wf_continue btn btn-primary w-100" onclick="continue_wf()">Resume
+                            Workflow</button>
+                    </div>
+                    {% endif %}
+                </div>
+            </div>
         </div>
+        {% endif %}
     </div>
 </div>
 
-
-
-
-
 <script type="text/javascript">
-    function cwf(type)
-    {
+    function cwf(type) {
         $.ajax({
             type: "POST",
             url: "/",
-            data: {"create":type},
-            beforeSend: function(request) {
+            data: {
+                "create": type
+            },
+            beforeSend: function (request) {
                 request.setRequestHeader("X-CSRFToken",
-                $('input[name="csrfmiddlewaretoken"]').val()
+                    $('input[name="csrfmiddlewaretoken"]').val()
                 );
             }
 
         }).done(function (data) {
             window.location.replace("/wf/");
-        }).fail(function(jqxHR, textstatus) {
-            alert("Something went wrong...");});
+        }).fail(function (jqxHR, textstatus) {
+            alert("Something went wrong...");
+        });
     }
-    function continue_wf()
-    {
+
+    function continue_wf() {
         window.location.replace("/wf/");
     }
-
 </script>
 
 <div class="hidden_form" id="form_div">
@@ -130,4 +169,4 @@
 
 {% block vport_comm %}
 {% endblock %}
-{% endblock content %}
+{% endblock content %}
\ No newline at end of file