Skip to content

🎨 Palette: Improve accessibility and search UX #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Woschj wants to merge 1 commit into
base: main
Choose a base branch
from
Open

🎨 Palette: Improve accessibility and search UX #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@
<!-- Scanner Animation -->
<div class="absolute w-full h-0.5 bg-primary/50 -top-1 left-0 animate-scanner after:content-[''] after:absolute after:top-0 after:left-0 after:w-full after:h-full after:bg-primary/30"></div>
</div>
</button>
</div>

<!-- Trennlinie -->
<div class="sidebar-divider"></div>
Expand Down
4 changes: 2 additions & 2 deletions app/templates/consumables/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,10 +100,10 @@
</td>
<td class="text-right">
<div class="btn-group">
<a href="{{ url_for('consumables.detail', barcode=consumable.barcode) }}" class="btn btn-sm btn-ghost">
<a href="{{ url_for('consumables.detail', barcode=consumable.barcode) }}" class="btn btn-sm btn-ghost" aria-label="Verbrauchsgut bearbeiten" title="Bearbeiten">
<i class="fas fa-edit"></i>
</a>
<button class="btn btn-sm btn-ghost btn-error" onclick="deleteConsumable('{{ consumable.barcode }}')">
<button class="btn btn-sm btn-ghost btn-error" onclick="deleteConsumable('{{ consumable.barcode }}')" aria-label="Verbrauchsgut löschen" title="Löschen">
<i class="fas fa-trash"></i>
</button>
</div>
Expand Down
33 changes: 30 additions & 3 deletions app/templates/shared/list_base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,20 @@
<div class="flex flex-col md:flex-row gap-4 items-center">
<div class="form-control flex-1">
<label for="searchInput" class="sr-only">Suchen</label>
<div class="input-group">
<div class="input-group relative flex">
<input type="text"
placeholder="Suchen..."
class="input input-bordered w-full"
class="input input-bordered w-full pr-10"
id="searchInput"
aria-label="Suchen">
<button type="button" class="btn btn-square" aria-label="Suche ausführen">
<button type="button"
id="clearSearch"
class="absolute right-14 top-1/2 -translate-y-1/2 btn btn-ghost btn-circle btn-xs z-10 hidden"
aria-label="Suche löschen"
title="Suche löschen">
<i class="fas fa-times opacity-50"></i>
</button>
<button type="button" class="btn btn-square btn-primary" aria-label="Suche ausführen">
<i class="fas fa-search"></i>
</button>
</div>
Expand Down Expand Up @@ -78,14 +85,34 @@ <h3 class="card-title text-lg">
// Basis-Suchfunktion
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('searchInput');
const clearSearch = document.getElementById('clearSearch');

if (searchInput) {
searchInput.addEventListener('input', function(e) {
const searchTerm = e.target.value.toLowerCase();

// Clear-Button anzeigen/ausblenden
if (clearSearch) {
if (searchTerm.length > 0) {
clearSearch.classList.remove('hidden');
} else {
clearSearch.classList.add('hidden');
}
}

document.querySelectorAll('.data-row').forEach(row => {
const searchableContent = row.textContent.toLowerCase();
row.style.display = searchableContent.includes(searchTerm) ? '' : 'none';
});
});

if (clearSearch) {
clearSearch.addEventListener('click', function() {
searchInput.value = '';
searchInput.focus();
searchInput.dispatchEvent(new Event('input'));
});
}
}

// Sortier-Funktionalität
Expand Down
4 changes: 2 additions & 2 deletions app/templates/tools/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,10 +158,10 @@
<td class="text-right">
<div class="btn-group">
{% if tool.barcode %}
<a href="{{ url_for('tools.detail', barcode=tool.barcode) }}" class="btn btn-sm btn-ghost">
<a href="{{ url_for('tools.detail', barcode=tool.barcode) }}" class="btn btn-sm btn-ghost" aria-label="Werkzeug bearbeiten" title="Bearbeiten">
<i class="fas fa-edit"></i>
</a>
<button class="btn btn-sm btn-ghost btn-error" onclick="deleteItem('tool', '{{ tool.barcode }}')">
<button class="btn btn-sm btn-ghost btn-error" onclick="deleteItem('tool', '{{ tool.barcode }}')" aria-label="Werkzeug löschen" title="Löschen">
<i class="fas fa-trash"></i>
</button>
{% else %}
Expand Down
4 changes: 2 additions & 2 deletions app/templates/workers/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,10 +93,10 @@
</td>
<td class="text-right">
<div class="btn-group">
<a href="{{ url_for('workers.details', original_barcode=worker.barcode) }}" class="btn btn-sm btn-ghost">
<a href="{{ url_for('workers.details', original_barcode=worker.barcode) }}" class="btn btn-sm btn-ghost" aria-label="Mitarbeiter bearbeiten" title="Bearbeiten">
<i class="fas fa-edit"></i>
</a>
<button class="btn btn-sm btn-ghost btn-error" onclick="deleteItem('worker', '{{ worker.barcode }}')">
<button class="btn btn-sm btn-ghost btn-error" onclick="deleteItem('worker', '{{ worker.barcode }}')" aria-label="Mitarbeiter löschen" title="Löschen">
<i class="fas fa-trash"></i>
</button>
</div>
Expand Down