zmiany ux

static/css/style.css

@@ -83,3 +83,45 @@ input[type="file"]::file-selector-button {
     background-color: #181a1b !important; /* bardzo ciemny */
     color: #f8f9fa !important;
 }
+
+input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 1.5em;
+  height: 1.5em;
+  margin: 0;
+  padding: 0;
+  outline: none;
+  background: none;
+  cursor: pointer;
+  position: relative;
+  vertical-align: middle;
+}
+
+input[type="checkbox"]::before {
+  content: '✗';
+  color: #dc3545; /* Bootstrap danger */
+  font-size: 1.5em;
+  font-weight: bold;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+input[type="checkbox"]:checked::before {
+  content: '✓';
+  color: #ffc107; /* Bootstrap warning */
+}
+
+input[type="checkbox"]:disabled::before {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+input[type="checkbox"]:disabled {
+  cursor: not-allowed;
+}
+

static/js/live.js

@@ -45,7 +45,7 @@ function setupList(listId, username) {
     setTimeout(() => { suggestionsBox.innerHTML = ''; }, 200);
   });
 
-  //newItemInput.focus();
+  // newItemInput.focus();
   newItemInput.addEventListener('keypress', function (e) {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -124,11 +124,15 @@ function setupList(listId, username) {
         <span id="name-${data.id}" class="text-white">${data.name} ${quantityBadge}</span>
       </div>
       <div class="mt-2 mt-md-0">
-        <button class="btn btn-sm btn-outline-warning me-1" onclick="editItem(${data.id}, '${data.name}', ${data.quantity || 1})">✏️ Edytuj</button>
-        <button class="btn btn-sm btn-outline-danger" onclick="deleteItem(${data.id})">🗑️ Usuń</button>
+        <button class="btn btn-sm btn-outline-warning me-1" onclick="editItem(${data.id}, '${data.name}', ${data.quantity || 1})">✏️</button>
+        <button class="btn btn-sm btn-outline-danger" onclick="deleteItem(${data.id})">🗑️</button>
       </div>
     `;
 
+//        #### WERSJA Z NAPISAMI ####
+//        <button class="btn btn-sm btn-outline-warning me-1" onclick="editItem(${data.id}, '${data.name}', ${data.quantity || 1})">✏️ Edytuj</button>
+//        <button class="btn btn-sm btn-outline-danger" onclick="deleteItem(${data.id})">🗑️ Usuń</button>
+
     document.getElementById('items').appendChild(li);
     updateProgressBar();
   });
@@ -161,11 +165,13 @@ function setupList(listId, username) {
     if (itemEl) {
       let noteEl = itemEl.querySelector('small');
       if (noteEl) {
-        noteEl.innerHTML = `[ Notatka: <b>${data.note}</b> ]`;
+        //noteEl.innerHTML = `[ Notatka: <b>${data.note}</b> ]`;
+        noteEl.innerHTML = `[ <b>${data.note}</b> ]`;
       } else {
         const newNote = document.createElement('small');
         newNote.className = 'text-danger ms-4';
-        newNote.innerHTML = `[ Notatka: <b>${data.note}</b> ]`;
+        //newNote.innerHTML = `[ Notatka: <b>${data.note}</b> ]`;
+        newNote.innerHTML = `[ <b>${data.note}</b> ]`;
 
         const flexColumn = itemEl.querySelector('.d-flex.flex-column');
         if (flexColumn) {