aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates/account/resource_list.html
diff options
context:
space:
mode:
authorBrandon Lo <lobrandon1217@gmail.com>2019-06-27 15:43:55 -0400
committerBrandon Lo <lobrandon1217@gmail.com>2019-06-28 15:28:24 +0000
commit7fec796ae500313ddbbbedf32d4f7581985d41d4 (patch)
treec7c40f8bfc0d0ff682249187b4d68bfdfa8c6493 /src/templates/account/resource_list.html
parente5e07b97e3d797a3a1f90fa33b7ccc41b6bacde3 (diff)
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>
Diffstat (limited to 'src/templates/account/resource_list.html')
-rw-r--r--src/templates/account/resource_list.html72
1 files changed, 38 insertions, 34 deletions
diff --git a/src/templates/account/resource_list.html b/src/templates/account/resource_list.html
index f92f78e..1203534 100644
--- a/src/templates/account/resource_list.html
+++ b/src/templates/account/resource_list.html
@@ -1,25 +1,27 @@
{% extends "base.html" %}
{% block content %}
-<div class="card_container">
+<div class="row">
{% for resource in resources %}
- <div class="card">
- <div class="card-header">
- <h3>Resource {{resource.id}}</h3>
- </div>
- <div class="card-body p-4">
- <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 class="card-footer">
- <button
- class="btn btn-danger w-100"
- onclick='delete_resource({{resource.id}});'
- data-toggle="modal"
- data-target="#resModal"
- >Delete</button>
+ <div class="col-12 col-md-6 col-lg-4 col-xl-3 p-2">
+ <div class="card h-100">
+ <div class="card-header">
+ <h3>Resource {{resource.id}}</h3>
+ </div>
+ <div class="card-body p-4">
+ <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 class="card-footer">
+ <button
+ class="btn btn-danger w-100"
+ onclick='delete_resource({{resource.id}});'
+ data-toggle="modal"
+ data-target="#resModal"
+ >Delete</button>
+ </div>
</div>
</div>
{% endfor %}
@@ -63,7 +65,6 @@
warning_title.appendChild(title);
warning_text.appendChild(text);
- document.getElementById('modal_warning').style['max-height'] = '0px';
}
function list_configs(configs) {
@@ -87,11 +88,11 @@
req.send(formData);
}
</script>
-<div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-labelledby="my_modal" aria-hidden="true">
- <div class="modal-dialog" style="width: 450px;" role="document">
+<div class="modal fade" id="resModal" tabindex="-1" role="dialog" aria-hidden="true">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
- <h4 class="modal-title" id="my_modal" style="display: inline; float: left;">Delete Resource?</h4>
+ <h4 class="modal-title d-inline float-left">Delete Resource?</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
@@ -99,18 +100,21 @@
<form id="res_delete_form">
{% csrf_token %}
</form>
- <div class="modal-footer">
- <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
- <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Delete</button>
- </div>
- <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
- <div style="text-align:center; margin: 5px">
- <h3 id="config_warning">Are You Sure?</h3>
- <p id="warning_subtext">This cannot be undone</p>
- <ul id="config_list"></ul>
- <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
- <button class="btn btn-danger" id="confirm_delete_button" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button>
+ <div class="modal-footer d-flex flex-column">
+ <div class="mb-2">
+ <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
+ <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#warning">Delete</button>
</div>
+ <div class="collapse w-100 text-center border-top" id="warning">
+ <div class="p-4">
+ <h3 id="config_warning">Are You Sure?</h3>
+ <p id="warning_subtext">This cannot be undone</p>
+ <ul id="config_list"></ul>
+ <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
+ <button class="btn btn-danger" id="confirm_delete_button" data-dismiss="modal" onclick="submit_delete_form();">I'm Sure</button>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>