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) {

templates/base.html

@@ -15,13 +15,13 @@
 <nav class="navbar navbar-dark bg-dark mb-3">
   <div class="container-fluid">
     <a class="navbar-brand fw-bold fs-4 text-success" href="/">
-      🛒 Live <span class="text-warning">Lista</span> Zakupów
+      🛒 <span class="text-warning">Lista</span> Zakupów
     </a>
 
     {% if has_authorized_cookie %}
       {% if current_user.is_authenticated %}
         <span class="mx-auto text-white">
-          Zalogowany jako:
+          Zalogowany:
           <span class="badge bg-success">{{ current_user.username }}</span>
         </span>
       {% else %}
@@ -39,7 +39,7 @@
       {% if current_user.is_authenticated %}
         <a href="{{ url_for('logout') }}" class="btn btn-outline-light btn-sm">🚪 Wyloguj</a>
       {% else %}
-        <a href="{{ url_for('login') }}" class="btn btn-outline-light btn-sm">🔑 Zaloguj się</a>
+        <a href="{{ url_for('login') }}" class="btn btn-outline-light btn-sm">🔑 Zaloguj</a>
       {% endif %}
     </div>
   </div>
@@ -70,9 +70,9 @@
 <script src="{{ url_for('static_bp.serve_js_lib', filename='bootstrap.bundle.min.js') }}"></script>
 <script src="{{ url_for('static_bp.serve_js_lib', filename='socket.io.min.js') }}"></script>
 {% if request.endpoint != 'system_auth' %}
-  <script src="{{ url_for('static_bp.serve_js', filename='live.js') }}"></script>
-  <script src="{{ url_for('static_bp.serve_js', filename='hide_list.js') }}"></script>
-  <script src="{{ url_for('static_bp.serve_js', filename='socket_reconnect.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='live.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='hide_list.js') }}"></script>
+<script src="{{ url_for('static_bp.serve_js', filename='socket_reconnect.js') }}"></script>
 {% endif %}
 <script src="{{ url_for('static_bp.serve_js', filename='toasts.js') }}"></script>
 {% block scripts %}{% endblock %}

templates/list.html

@@ -84,17 +84,17 @@ Lista: <strong>{{ list.title }}</strong>
     {% endif %}
   </span>
     {% if item.note %}
-      <small class="text-danger">[ Notatka: <b>{{ item.note }}</b> ] </small>
+        <small class="text-danger ms-4">[ <b>{{ item.note }}</b> ]</small>
     {% endif %}
   </div>
   <div class="mt-2 mt-md-0 d-flex gap-1">
     <button class="btn btn-sm btn-outline-warning"
       {% if list.is_archived %}disabled{% else %}onclick="editItem({{ item.id }}, '{{ item.name }}', {{ item.quantity or 1 }})"{% endif %}>
-      ✏️ Edytuj
+      ✏️
     </button>
     <button class="btn btn-sm btn-outline-danger"
       {% if list.is_archived %}disabled{% else %}onclick="deleteItem({{ item.id }})"{% endif %}>
-      🗑️ Usuń
+      🗑️
     </button>
   </div>
 </li>
@@ -105,7 +105,7 @@ Lista: <strong>{{ list.title }}</strong>
 <div class="input-group mb-3">
   <input type="text" id="newItem" name="name" class="form-control" placeholder="Dodaj produkt" required>
   <input type="number" id="newQuantity" name="quantity" class="form-control" placeholder="Ilość" min="1" value="1" style="max-width: 80px;">
-  <button type="button" class="btn btn-success" onclick="addItem({{ list.id }})">➕ Dodaj</button>
+  <button type="button" class="btn btn-success rounded" onclick="addItem({{ list.id }})">➕ Dodaj</button>
 </div>
 
 {% endif %}

templates/list_guest.html

@@ -21,7 +21,7 @@
 <ul id="items" class="list-group mb-3">
   {% for item in items %}
 <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap clickable-item {% if item.purchased %}bg-success text-white{% else %}item-not-checked{% endif %}" id="item-{{ item.id }}">    <div class="d-flex align-items-center gap-3 flex-grow-1">
-      <input type="checkbox" class="form-check-input large-checkbox" {% if item.purchased %}checked{% endif %} {% if list.is_archived %}disabled{% endif %}>
+  <input type="checkbox" {% if item.purchased %}checked{% endif %} {% if list.is_archived %}disabled{% endif %}>
       <span id="name-{{ item.id }}" class="{% if item.purchased %}text-white{% else %}text-white{% endif %}">
         {{ item.name }}
         {% if item.quantity and item.quantity > 1 %}
@@ -30,7 +30,7 @@
       </span>
 
       {% if item.note %}
-        <small class="text-danger ms-4">[ Notatka: <b>{{ item.note }}</b> ]</small>
+        <small class="text-danger ms-4">[ <b>{{ item.note }}</b> ]</small>
       {% endif %}
     </div>
     <button type="button" class="btn btn-sm btn-outline-info"
@@ -43,9 +43,9 @@
 
 {% if not list.is_archived %}
   <div class="input-group mb-2">
-    <input id="newItem" class="form-control" placeholder="Dodaj produkt">
+    <input id="newItem" class="form-control" placeholder="Dodaj produkt i ilość">
     <input id="newQuantity" type="number" class="form-control" placeholder="Ilość" min="1" value="1" style="max-width: 90px;">
-    <button onclick="addItem({{ list.id }})" class="btn btn-success">➕ Dodaj</button>
+    <button onclick="addItem({{ list.id }})" class="btn btn-success rounded">➕ Dodaj</button>
   </div>
 {% endif %}
 
@@ -54,7 +54,7 @@
   <h5>💰 Dodaj wydatek</h5>
   <div class="input-group mb-2">
     <input id="expenseAmount" type="number" step="0.01" min="0" class="form-control" placeholder="Kwota (PLN)">
-    <button onclick="submitExpense({{ list.id }})" class="btn btn-success">💾 Zapisz</button>
+    <button onclick="submitExpense({{ list.id }})" class="btn btn-success rounded">💾 Zapisz</button>
   </div>
 {% endif %}
    <p id="total-expense2"><b>💸 Łącznie wydano:</b> {{ '%.2f'|format(total_expense) }} PLN</p>
@@ -83,7 +83,7 @@
   <form action="{{ url_for('upload_receipt', list_id=list.id) }}" method="post" enctype="multipart/form-data">
     <div class="input-group mb-2">
       <input type="file" name="receipt" accept="image/*" capture="environment" class="form-control custom-file-input" id="receiptInput">
-      <button type="submit" class="btn btn-success">➕ Wgraj</button>
+      <button type="submit" class="btn btn-success rounded">➕ Wgraj</button>
     </div>
   </form>
 {% endif %}