feat: show ID short on TODO cards

yondemon · yondemon · commit 9660797e227d · 2025-01-08T23:28:23.000+01:00
diff --git a/web/css/style.css b/web/css/style.css
@@ -221,10 +221,20 @@ ul#list-backlogs input[type="checkbox"] {
   background-color: #e4d57f;
   border-color: #e4d57f;
 }
-
 .card-header {
-  display: block;
+  display: flex;
   font-size: 0.8rem;
+  justify-content: flex-start;
+  align-items: center;
+  min-height: 1rem;
+  padding: 0.2rem;
+}
+
+.card-header .id {
+  display: inline-block;
+  margin-left:auto;
+  padding: 1px 2px;
+  text-decoration: none;
 }
 .card-header .board {
   display: inline-block;
diff --git a/web/js/todo.js b/web/js/todo.js
@@ -172,6 +172,7 @@ var loadCards = function (strMsg) {
           "<div class='card-header'>" +
           `  <span class="board board-${board.id}"><a href="http://trello.com/b/${board.id}/">${board.name}</a></span>` +
           `  <span class="badge list list-${item.idList} ${listNameSlug}">${listName}</span>` +
+          `  <span class="id">${item.idShort}</span>` +
           "</div>" +
           `<div class="card-body ${itemClass}">` +
           `  <h2><a href="http://trello.com/c/${item.id}" target="_blank">${item.name}</a></h2>` +
