Switch to using Bootstrap 4 cards
This commit is contained in:
parent
5ffd7bcd62
commit
4f738891f2
|
@ -1,3 +1,8 @@
|
|||
body {
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
#listBox ul,
|
||||
#listBox ol {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
var curList;
|
||||
|
||||
var bgColors = ["info", "primary", "danger", "success", "warning", "secondary"];
|
||||
var borderColors = ["info", "primary", "danger", "success", "warning", "secondary"];
|
||||
var textColors = ["light", "light", "light", "light", "dark", "dark" ];
|
||||
|
||||
function getUrlListId() {
|
||||
|
@ -38,8 +37,7 @@ function triggerSelect(listId) {
|
|||
console.debug('Switch selection to list ' + listId);
|
||||
if (curList) {
|
||||
$('.nav-link[data-list-id="' + curList.id + '"]').removeClass('active');
|
||||
$('#listBox').removeClass("border-" + borderColors[curList.index])
|
||||
.removeClass("bg-" + bgColors[curList.index])
|
||||
$('#listBox').removeClass("bg-" + bgColors[curList.index])
|
||||
.removeClass("text-" + textColors[curList.index]);
|
||||
}
|
||||
$('.nav-link[data-list-id="' + listId + '"]').addClass('active');
|
||||
|
@ -55,10 +53,9 @@ function triggerSelect(listId) {
|
|||
headers: { 'Accept': 'application/json' }
|
||||
}).done(function(list) {
|
||||
curList = list;
|
||||
$('#listBox').addClass("border-" + borderColors[list.index])
|
||||
.addClass("bg-" + bgColors[list.index])
|
||||
$('#listBox').addClass("bg-" + bgColors[list.index])
|
||||
.addClass("text-" + textColors[list.index]);
|
||||
$('#listName').text('Lijst van ' + list.name)
|
||||
$('#listName').text(list.name);
|
||||
mtime = new Date(list.mtime.secs_since_epoch * 1000);
|
||||
$('#listUpdatedAt').text('Laaste aanpassing op ' +
|
||||
mtime.toLocaleDateString("nl") + ' om ' + mtime.toLocaleTimeString("nl"));
|
||||
|
|
|
@ -29,13 +29,15 @@
|
|||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="panel panel-default border rounded p-2" id="listBox">
|
||||
<div class="panel-heading">
|
||||
<h1 class="panel-title" id="listName"></h1>
|
||||
<div class="card mb-3" id="listBox">
|
||||
<div class="card-header">
|
||||
<h1 class= "mb-0" id="listName"></h1>
|
||||
</div>
|
||||
<div class="panel-body mtb-0" id="listHtml"></div>
|
||||
<div class="panel-footer">
|
||||
<small><i id="listUpdatedAt"></i></small>
|
||||
<div class="card-body">
|
||||
<div class="card-text" id="listHtml"></div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<p class="card-text"><small id="listUpdatedAt"></small></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue