Style Account pages

Adds some prettiness to the account pages that list bookings, etc

Change-Id: I90508cfafba00380d67965a038dc54d1fac43f60
Signed-off-by: Parker Berberian <pberberian@iol.unh.edu>

6 files changed, 95 insertions, 111 deletions

diff --git a/src/static/css/detail_view.css b/src/static/css/detail_view.css
index 89d0867..69a2643 100644
--- a/src/static/css/detail_view.css
+++ b/src/static/css/detail_view.css
@@ -1,14 +1,25 @@
-.detail_card {
-        border: 2px;
-        border-color: black;
-        border-radius: 5px;
-        margin: 5px;
-        padding: 5px;
-        box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
+.card_container {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-gap: 25px 25px;
+    justify-items: stretch;
+}
+
+.card_container ul > li {
+    padding: 7px !important;
+    font-size: 16px;
 }
 
-.detail_btn_group {
-        margin: 3px;
-        padding: 3px;
-        padding-bottom: 5px;
+.detail_card {
+    border: 2px;
+    border-color: black;
+    border-radius: 5px;
+    margin: 5px;
+    padding-left: 25px;
+    padding-right: 25px;
+    padding-bottom: 15px;
+    box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
 }
diff --git a/src/templates/account/booking_list.html b/src/templates/account/booking_list.html
index c7c5e00..9c6f3db 100644
--- a/src/templates/account/booking_list.html
+++ b/src/templates/account/booking_list.html
@@ -1,52 +1,41 @@
 {% extends "base.html" %}
 {% block content %}
-<script>
-function edit_booking(pk){
-    var csrf = $('input[name="csrfmiddlewaretoken"]').val();
-    $.ajax({
-        type: "POST",
-        url: "/",
-        data: { "target": pk, "create": 0, "csrfmiddlewaretoken": csrf},
-        beforeSend: function(request) {
-            request.setRequestHeader("X-CSFRToken", csrf);
-        }
-    }).done(function(){
-        window.location.replace("/wf/");
-    }).fail(function(){})
-}
-</script>
 <h2>Bookings I Own</h2>
+    <div class="card_container">
     {% for booking in bookings %}
         <div class="detail_card">
-            <ul>
-            <li>id: {{booking.id}}</li>
-            <li>lab: {{booking.resource.template.lab.lab_user.username}}</li>
-            <li>resource: {{booking.resource.template.name}}</li>
-            <li>start: {{booking.start}}</li>
-            <li>end: {{booking.end}}</li>
-            <li>purpose: {{booking.purpose}}</li>
-            </ul>
-            <div class="detail_btn_group">
-                <button style="display:none" class="btn btn-primary" onclick="edit_booking({{booking.id}});">Edit</button>
-                <button class="btn btn-primary" onclick="location.href='/booking/detail/{{booking.id}}/';">Details</button>
+            <div>
+                <h3>Booking {{booking.id}}</h3>
+                <ul class="list-group">
+                    <li class="list-group-item">id: {{booking.id}}</li>
+                    <li class="list-group-item">lab: {{booking.resource.template.lab.lab_user.username}}</li>
+                    <li class="list-group-item">resource: {{booking.resource.template.name}}</li>
+                    <li class="list-group-item">start: {{booking.start}}</li>
+                    <li class="list-group-item">end: {{booking.end}}</li>
+                    <li class="list-group-item">purpose: {{booking.purpose}}</li>
+                </ul>
             </div>
+            <a class="btn btn-primary" href="/booking/detail/{{booking.id}}/">Details</a>
         </div>
     {% endfor %}
+    </div>
 <h2>Bookings I Collaborate On</h2>
+    <div class="card_container">
     {% for booking in collab_bookings %}
         <div class="detail_card">
-            <ul>
-            <li>id: {{booking.id}}</li>
-            <li>lab: {{booking.lab}}</li>
-            <li>resource: {{booking.resource_name}}</li>
-            <li>start: {{booking.start}}</li>
-            <li>end: {{booking.end}}</li>
-            <li>purpose: {{booking.purpose}}</li>
-            </ul>
-            <div class="detail_btn_group">
-                <button style="display: none" class="btn btn-primary" disabled=true onclick="edit_booking({{booking.id}});">Edit</button>
-                <button class="btn btn-primary" onclick="location.href='/booking/detail/{{booking.id}}/';">Details</button>
+            <div>
+                <h3>Booking {{booking.id}}</h3>
+                <ul class="list-group">
+                    <li class="list-group-item">id: {{booking.id}}</li>
+                    <li class="list-group-item">lab: {{booking.lab}}</li>
+                    <li class="list-group-item">resource: {{booking.resource_name}}</li>
+                    <li class="list-group-item">start: {{booking.start}}</li>
+                    <li class="list-group-item">end: {{booking.end}}</li>
+                    <li class="list-group-item">purpose: {{booking.purpose}}</li>
+                </ul>
             </div>
+            <a class="btn btn-primary" href="/booking/detail/{{booking.id}}/">Details</a>
         </div>
     {% endfor %}
+    </div>
 {% endblock %}
diff --git a/src/templates/account/configuration_list.html b/src/templates/account/configuration_list.html
index 9dcec07..14d0472 100644
--- a/src/templates/account/configuration_list.html
+++ b/src/templates/account/configuration_list.html
@@ -1,31 +1,18 @@
 {% extends "base.html" %}
 {% block content %}
-<script>
-function edit_configuration(pk){
-    var csrf = $('input[name="csrfmiddlewaretoken"]').val();
-    $.ajax({
-        type: "POST",
-        url: "/",
-        data: { "target": pk, "create": 2, "csrfmiddlewaretoken": csrf},
-        beforeSend: function(request) {
-            request.setRequestHeader("X-CSFRToken", csrf);
-            }
-        }).done(function(){
-            window.location.replace("/wf/");
-        }).fail(function(){});
-}
-</script>
+    <div class="card_container">
     {% for config in configurations %}
         <div class="detail_card">
-            <ul>
-                <li>id: {{config.id}}</li>
-                <li>name: {{config.name}}</li>
-                <li>description: {{config.description}}</li>
-                <li>resource: {{config.bundle}}</li>
-            </ul>
-            <div class="detail_btn_group">
-                <button style="display: none" class="btn btn-primary" onclick="edit_configuration({{config.id}});">Edit</button>
+            <div>
+                <h3>Configuration {{config.id}}</h3>
+                <ul class="list-group">
+                    <li class="list-group-item">id: {{config.id}}</li>
+                    <li class="list-group-item">name: {{config.name}}</li>
+                    <li class="list-group-item">description: {{config.description}}</li>
+                    <li class="list-group-item">resource: {{config.bundle}}</li>
+                </ul>
             </div>
         </div>
     {% endfor %}
+    </div>
 {% endblock %}
diff --git a/src/templates/account/details.html b/src/templates/account/details.html
index acf3eb1..3092ad0 100644
--- a/src/templates/account/details.html
+++ b/src/templates/account/details.html
@@ -2,8 +2,8 @@
 {% load staticfiles %}
 {% block content %}
 <h1>Account Details</h1>
-<a class="btn btn-primary" onclick="location.href = '{% url 'account:my-resources' %}'">My Resources</a>
-<a class="btn btn-primary" onclick="location.href = '{% url 'account:my-bookings' %}'">My Bookings</a>
-<a class="btn btn-primary" onclick="location.href = '{% url 'account:my-configurations' %}'">My Configurations</a>
-<a class="btn btn-primary" onclick="location.href = '{% url 'account:my-images' %}'">My Snapshots</a>
+<a class="btn btn-primary" href="{% url 'account:my-resources' %}">My Resources</a>
+<a class="btn btn-primary" href="{% url 'account:my-bookings' %}">My Bookings</a>
+<a class="btn btn-primary" href="{% url 'account:my-configurations' %}">My Configurations</a>
+<a class="btn btn-primary" href="{% url 'account:my-images' %}">My Snapshots</a>
 {% endblock content %}
diff --git a/src/templates/account/image_list.html b/src/templates/account/image_list.html
index 72ea1f5..7566a9c 100644
--- a/src/templates/account/image_list.html
+++ b/src/templates/account/image_list.html
@@ -1,27 +1,37 @@
 {% extends "base.html" %}
 {% block content %}
 <h2>Images I Own</h2>
+<div class="card_container">
     {% for image in images %}
         <div class="detail_card">
-            <ul>
-            <li>id: {{image.id}}</li>
-            <li>lab: {{image.from_lab.name}}</li>
-            <li>name: {{image.name}}</li>
-            <li>description: {{image.description}}</li>
-            <li>host profile: {{image.host_type.name}}</li>
-            </ul>
+            <div>
+                <h3>Image {{image.id}}</h3>
+                <ul class="list-group">
+                    <li class="list-group-item">id: {{image.id}}</li>
+                    <li class="list-group-item">lab: {{image.from_lab.name}}</li>
+                    <li class="list-group-item">name: {{image.name}}</li>
+                    <li class="list-group-item">description: {{image.description}}</li>
+                    <li class="list-group-item">host profile: {{image.host_type.name}}</li>
+                </ul>
+            </div>
         </div>
     {% endfor %}
+</div>
 <h2>Public Images</h2>
+<div class="card_container">
     {% for image in public_images %}
         <div class="detail_card">
-            <ul>
-            <li>id: {{image.id}}</li>
-            <li>lab: {{image.from_lab.name}}</li>
-            <li>name: {{image.name}}</li>
-            <li>description: {{image.description}}</li>
-            <li>host profile: {{image.host_type.name}}</li>
-            </ul>
+            <div>
+                <h3>Image {{image.id}}</h3>
+                <ul class="list-group">
+                    <li class="list-group-item">id: {{image.id}}</li>
+                    <li class="list-group-item">lab: {{image.from_lab.name}}</li>
+                    <li class="list-group-item">name: {{image.name}}</li>
+                    <li class="list-group-item">description: {{image.description}}</li>
+                    <li class="list-group-item">host profile: {{image.host_type.name}}</li>
+                </ul>
+            </div>
         </div>
     {% endfor %}
+</div>
 {% endblock %}
diff --git a/src/templates/account/resource_list.html b/src/templates/account/resource_list.html
index 7e4194b..cdacdd6 100644
--- a/src/templates/account/resource_list.html
+++ b/src/templates/account/resource_list.html
@@ -1,30 +1,17 @@
 {% extends "base.html" %}
 {% block content %}
-<script>
-function edit_resource(pk){
-    var csrf = $('input[name="csrfmiddlewaretoken"]').val();
-    $.ajax({
-        type: "POST",
-        url: "/",
-        data: { "target": pk, "create": 1, "csrfmiddlewaretoken": csrf},
-        beforeSend: function(request) {
-            request.setRequestHeader("X-CSFRToken", csrf);
-            }
-        }).done(function(){
-            window.location.replace("/wf/");
-        }).fail(function(){});
-}
-</script>
+    <div class="card_container">
     {% for resource in resources %}
         <div class="detail_card">
-            <ul>
-                <li>id: {{resource.id}}</li>
-                <li>name: {{resource.name}}</li>
-                <li>description: {{resource.description}}</li>
-            </ul>
-            <div class="detail_btn_group">
-                <button style="display: none" class="btn btn-primary" onclick="edit_resource({{resource.id}});">Edit</button>
+            <div>
+                <h3>Resource {{resource.id}}</h3>
+                <ul class="list-group">
+                    <li class="list-group-item">id: {{resource.id}}</li>
+                    <li class="list-group-item">name: {{resource.name}}</li>
+                    <li class="list-group-item">description: {{resource.description}}</li>
+                </ul>
             </div>
         </div>
     {% endfor %}
+    </div>
 {% endblock %}