Abstract Out Inline CSS for Account Views

Change-Id: I2da02fa7865b618c583d15cca9ef256c62f19286
Signed-off-by: Sawyer Bergeron <sawyerbergeron@gmail.com>

7 files changed, 36 insertions, 18 deletions

diff --git a/dashboard/src/static/css/detail_view.css b/dashboard/src/static/css/detail_view.css
new file mode 100644
index 0000000..b0e271d
--- /dev/null
+++ b/dashboard/src/static/css/detail_view.css
@@ -0,0 +1,13 @@
+.detail_card {
+        border: 2px;
+        border-color: black;
+        border-radius: 5px;
+        margin: 5px;
+        box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.75);
+}
+
+.detail_btn_group {
+        margin: 3px;
+        padding: 3px;
+        padding-bottom: 5px;
+}
diff --git a/dashboard/src/templates/account/booking_list.html b/dashboard/src/templates/account/booking_list.html
index ef4df3a..4cd1408 100644
--- a/dashboard/src/templates/account/booking_list.html
+++ b/dashboard/src/templates/account/booking_list.html
@@ -17,7 +17,7 @@ function edit_booking(pk){
 </script>
 <h2>Bookings I Own</h2>
     {% for booking in bookings %}
-        <div style="border:2px;border-style:solid;border-color:grey;margin:5px">
+        <div class="detail_card">
             <ul>
             <li>id: {{booking.id}}</li>
             <li>lab: {{booking.resource.template.lab.lab_user.username}}</li>
@@ -26,15 +26,15 @@ function edit_booking(pk){
             <li>end: {{booking.end}}</li>
             <li>purpose: {{booking.purpose}}</li>
             </ul>
-            <div style="display:inline;margin:3px;padding:3px">
-                <button onclick="edit_booking({{booking.id}});">Edit</button>
-                <button onclick="location.href='/booking/detail/{{booking.id}}/';">Details</button>
+            <div class="detail_btn_group">
+                <button class="btn" onclick="edit_booking({{booking.id}});">Edit</button>
+                <button class="btn" onclick="location.href='/booking/detail/{{booking.id}}/';">Details</button>
             </div>
         </div>
     {% endfor %}
 <h2>Bookings I Collaborate On</h2>
     {% for booking in collab_bookings %}
-        <div style="border:2px;border-style:solid;border-color:grey;margin:5px">
+        <div class="detail_card">
             <ul>
             <li>id: {{booking.id}}</li>
             <li>lab: {{booking.lab}}</li>
@@ -43,9 +43,9 @@ function edit_booking(pk){
             <li>end: {{booking.end}}</li>
             <li>purpose: {{booking.purpose}}</li>
             </ul>
-            <div style="display:inline;margin:3px;padding:3px">
-                <button disabled=true onclick="edit_booking({{booking.id}});">Edit</button>
-                <button onclick="location.href='/booking/detail/{{booking.id}}/';">Details</button>
+            <div class="detail_btn_group">
+                <button class="btn" disabled=true onclick="edit_booking({{booking.id}});">Edit</button>
+                <button class="btn" onclick="location.href='/booking/detail/{{booking.id}}/';">Details</button>
             </div>
         </div>
     {% endfor %}
diff --git a/dashboard/src/templates/account/configuration_list.html b/dashboard/src/templates/account/configuration_list.html
index ee61e97..f4b174b 100644
--- a/dashboard/src/templates/account/configuration_list.html
+++ b/dashboard/src/templates/account/configuration_list.html
@@ -16,13 +16,15 @@ function edit_configuration(pk){
 }
 </script>
     {% for config in configurations %}
-        <div style="border:2px;border-style:solid;border-color:grey;margin:5px">
+        <div class="detail_card">
             <ul>
                 <li>id: {{config.id}}</li>
                 <li>name: {{config.name}}</li>
                 <li>description: {{config.description}}</li>
             </ul>
-            <button onclick="edit_configuration({{config.id}});">Edit</button>
+            <div class="detail_btn_group">
+                <button class="btn" onclick="edit_configuration({{config.id}});">Edit</button>
+            </div>
         </div>
     {% endfor %}
 {% endblock %}
diff --git a/dashboard/src/templates/account/details.html b/dashboard/src/templates/account/details.html
index 5641064..740dce6 100644
--- a/dashboard/src/templates/account/details.html
+++ b/dashboard/src/templates/account/details.html
@@ -2,8 +2,8 @@
 {% load staticfiles %}
 {% block content %}
 <h1>Account Details</h1>
-<button onclick="location.href = '{% url 'account:my-resources' %}'">My Resources</button>
-<button onclick="location.href = '{% url 'account:my-bookings' %}'">My Bookings</button>
-<button onclick="location.href = '{% url 'account:my-configurations' %}'">My Configurations</button>
-<button onclick="location.href = '{% url 'account:my-images' %}'">My Snapshots</button>
+<button class="btn" onclick="location.href = '{% url 'account:my-resources' %}'">My Resources</button>
+<button class="btn" onclick="location.href = '{% url 'account:my-bookings' %}'">My Bookings</button>
+<button class="btn" onclick="location.href = '{% url 'account:my-configurations' %}'">My Configurations</button>
+<button class="btn" onclick="location.href = '{% url 'account:my-images' %}'">My Snapshots</button>
 {% endblock content %}
diff --git a/dashboard/src/templates/account/image_list.html b/dashboard/src/templates/account/image_list.html
index fb436df..72ea1f5 100644
--- a/dashboard/src/templates/account/image_list.html
+++ b/dashboard/src/templates/account/image_list.html
@@ -2,7 +2,7 @@
 {% block content %}
 <h2>Images I Own</h2>
     {% for image in images %}
-        <div style="border:2px;border-style:solid;border-color:grey;margin:5px">
+        <div class="detail_card">
             <ul>
             <li>id: {{image.id}}</li>
             <li>lab: {{image.from_lab.name}}</li>
@@ -14,7 +14,7 @@
     {% endfor %}
 <h2>Public Images</h2>
     {% for image in public_images %}
-        <div style="border:2px;border-style:solid;border-color:grey;margin:5px">
+        <div class="detail_card">
             <ul>
             <li>id: {{image.id}}</li>
             <li>lab: {{image.from_lab.name}}</li>
diff --git a/dashboard/src/templates/account/resource_list.html b/dashboard/src/templates/account/resource_list.html
index 482a000..e70cca7 100644
--- a/dashboard/src/templates/account/resource_list.html
+++ b/dashboard/src/templates/account/resource_list.html
@@ -16,13 +16,15 @@ function edit_resource(pk){
 }
 </script>
     {% for resource in resources %}
-        <div style="border:2px;border-style:solid;border-color:grey;margin:5px">
+        <div class="detail_card">
             <ul>
                 <li>id: {{resource.id}}</li>
                 <li>name: {{resource.name}}</li>
                 <li>description: {{resource.description}}</li>
             </ul>
-            <button onclick="edit_resource({{resource.id}});">Edit</button>
+            <div class="detail_btn_group">
+                <button class="btn" onclick="edit_resource({{resource.id}});">Edit</button>
+            </div>
         </div>
     {% endfor %}
 {% endblock %}
diff --git a/dashboard/src/templates/base.html b/dashboard/src/templates/base.html
index c63db8c..067c3e6 100644
--- a/dashboard/src/templates/base.html
+++ b/dashboard/src/templates/base.html
@@ -8,6 +8,7 @@
     <link href="{% static "bower_components/startbootstrap-sb-admin-2-blackrockdigital/dist/css/sb-admin-2.min.css" %}"
           rel="stylesheet">
     <link href="{% static "css/theme.css" %}" rel="stylesheet">
+    <link href="{% static "css/detail_view.css" %}" rel="stylesheet">
 
 <script type="text/javascript">
     function cwf(type)