diginaut/digimarks
1
0
Fork 0
mirror of https://github.com/aquatix/digimarks.git synced 2025-12-06 22:05:09 +01:00
Code Issues Releases Wiki Activity

Better sort buttons

Browse Source
This commit is contained in:
Michiel Scholten
2025-05-06 15:40:58 +02:00
parent 5943265687
commit 72b131c77f
3 changed files with 60 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/digimarks/static/css/digimarks.css
View File

@@ -46,3 +46,39 @@ header li a {
color: black; color: black;
text-decoration: none; text-decoration: none;
} }
.active {
background-color: #fb8c00;
}
button {
background-color: #fff;
border: 1px solid #d5d9d9;
border-radius: 8px;
box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
box-sizing: border-box;
color: #0f1111;
cursor: pointer;
display: inline-block;
font-size: 13px;
line-height: 29px;
padding: 0 10px 0 11px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
/*width: 100px;*/
}
button:hover {
background-color: #f7fafa;
}
button:focus {
border-color: #008296;
box-shadow: rgba(213, 217, 217, .5) 0 2px 5px 0;
outline: 0;
}

12
src/digimarks/static/js/digimarks.js
View File

@@ -89,16 +89,28 @@ document.addEventListener('alpine:init', () => {
) )
}, },
async sortAlphabetically(order = 'asc') { async sortAlphabetically(order = 'asc') {
this.sort_created_asc = false;
this.sort_created_desc = false;
this.sort_title_asc = false;
this.sort_title_desc = false;
if (order === 'desc') { if (order === 'desc') {
this.sort_title_desc = true;
this.bookmarks.sort((a, b) => b.title.localeCompare(a.title)); this.bookmarks.sort((a, b) => b.title.localeCompare(a.title));
} else { } else {
this.sort_title_asc = true;
this.bookmarks.sort((a, b) => a.title.localeCompare(b.title)); this.bookmarks.sort((a, b) => a.title.localeCompare(b.title));
} }
}, },
async sortCreated(order = 'asc') { async sortCreated(order = 'asc') {
this.sort_created_asc = false;
this.sort_created_desc = false;
this.sort_title_asc = false;
this.sort_title_desc = false;
if (order === 'desc') { if (order === 'desc') {
this.sort_created_desc = true;
this.bookmarks.sort((a, b) => b.created_date.localeCompare(a.created_date)); this.bookmarks.sort((a, b) => b.created_date.localeCompare(a.created_date));
} else { } else {
this.sort_created_asc = true;
this.bookmarks.sort((a, b) => a.created_date.localeCompare(b.created_date)); this.bookmarks.sort((a, b) => a.created_date.localeCompare(b.created_date));
} }
} }

16
src/digimarks/templates/user_index.html
View File

@@ -24,10 +24,18 @@
<div x-show="$store.digimarks.loading">Loading...</div> <div x-show="$store.digimarks.loading">Loading...</div>
<p> <p>
<button @click="$store.digimarks.sortAlphabetically()">sort a-z</button> <button @click="$store.digimarks.sortAlphabetically()"
<button @click="$store.digimarks.sortAlphabetically('desc')">sort z-a</button> :class="$store.digimarks.sort_title_asc === true && 'active'">a-z &darr;
<button @click="$store.digimarks.sortCreated()">sort date asc</button> </button>
<button @click="$store.digimarks.sortCreated('desc')">sort date desc</button> <button @click="$store.digimarks.sortAlphabetically('desc')"
:class="$store.digimarks.sort_title_desc === true && 'active'">z-a &uarr;
</button>
<button @click="$store.digimarks.sortCreated()"
:class="$store.digimarks.sort_created_asc === true && 'active'">date &darr;
</button>
<button @click="$store.digimarks.sortCreated('desc')"
:class="$store.digimarks.sort_created_desc === true && 'active'">date &uarr;
</button>
</p> </p>
<ul x-cloak> <ul x-cloak>