paul
/
rocket-pinboard
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Use a button toolbar and button group for easy hiding/showing

This commit is contained in:
Paul van Tilburg 2017-12-30 17:14:20 +01:00
parent 995bd82036
commit 673b58bdec
2 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/js/wishlists.js
View File

@ -105,10 +105,8 @@ function disableListEditMode(listElem) {
$('.list-data', listElem).hide()
.popover('hide');
$('.list-html', listElem).show();
$('.list-cancel-button', listElem).hide();
$('.list-edit-button', listElem).show();
$('.list-edit-help', listElem).hide();
$('.list-save-button', listElem).hide();
$('.list-edit-buttons', listElem).hide();
$('.list-edit-mode-buttons', listElem).show();
$('.list-edit-help', listElem).removeClass('active')
.popover('hide');
}
@ -116,10 +114,8 @@ function disableListEditMode(listElem) {
function enableListEditMode(listElem) {
$('.list-data', listElem).show();
$('.list-html', listElem).hide();
$('.list-cancel-button', listElem).show();
$('.list-edit-button', listElem).hide();
$('.list-edit-help', listElem).show();
$('.list-save-button', listElem).show();
$('.list-edit-mode-buttons', listElem).hide();
$('.list-edit-buttons', listElem).show();
}
$(function() {

32
templates/index.html.tera
View File

@ -22,20 +22,26 @@
<div class="card-header">
<h1 class= "mb-0">
<span id="list-name">{{ list.name }}</span>
<button class="btn btn-dark btn-sm float-right mt-2 list-edit-button">
<i class="fas fa-edit"></i>
</button>
<div class="btn-group mt-2 float-right" role="group" aria-label="Edit buttons">
<button class="btn btn-light btn-sm list-cancel-button">
<i class="fas fa-ban"></i>
</button>
<button class="btn btn-dark btn-sm list-save-button">
<i class="fas fa-save"></i>
</button>
<div class="btn-toolbar float-right mt-2" role="toolbar" aria-label="List buttons">
<div class="btn-group btn-group-sm list-edit-mode-buttons"
role="group" aria-label="Edit mode buttons">
<button class="btn btn-dark list-edit-button" title="Bewerken">
<i class="fas fa-edit"></i>
</button>
</div>
<div class="btn-group btn-group-sm list-edit-buttons" role="group"
aria-label="Edit list buttons">
<button class="btn btn-light list-edit-help" title="Opmaakhulp">
<i class="fas fa-question-circle"></i>
</button>
<button class="btn btn-light list-cancel-button" title="Annuleren">
<i class="fas fa-ban"></i>
</button>
<button class="btn btn-dark list-save-button" title="Opslaan">
<i class="fas fa-save"></i>
</button>
</div>
</div>
<button class="btn btn-light btn-sm float-right mr-2 mt-2 list-edit-help">
<i class="fas fa-question-circle"></i>
</button>
</h1>
</div>
<div class="card-body">