Switch to using Bootstrap 4 cards

This commit is contained in:
Paul van Tilburg 2017-12-29 20:20:10 +01:00
parent 5ffd7bcd62
commit 4f738891f2
3 changed files with 16 additions and 12 deletions

View File

@ -1,3 +1,8 @@
body {
padding-top: 80px;
}
#listBox ul,
#listBox ol {
padding-left: 12px;
}

View File

@ -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"));

View File

@ -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>