Filterbereich entfernt, Suche + Aktionen als Toolbar zusammengefasst
- Monat/Jahr-Filter geloescht (Server-Filter bleibt via URL nutzbar) - Suchfeld und die Buttons 'PDF Export' und 'Bewerbung hinzufuegen' in einer gemeinsamen Toolbar zusammengefasst, als Pill-Buttons - Tote filterForm-CSS und -JS entfernt Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude
@@ -414,23 +414,6 @@ button.loading::after {
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
/* Make filter section stack on mobile */
|
||||
#filterForm {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
#filterForm > div {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Adjust buttons on mobile */
|
||||
#filterForm .flex.space-x-2,
|
||||
#filterForm .ml-auto,
|
||||
#filterForm > div:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Make table scroll horizontally on mobile */
|
||||
.overflow-hidden {
|
||||
overflow-x: auto;
|
||||
|
||||
@@ -13,7 +13,6 @@ const pdfExportModal = document.getElementById('pdfExportModal');
|
||||
// Form Elements
|
||||
const applicationForm = document.getElementById('applicationForm');
|
||||
const pdfExportForm = document.getElementById('pdfExportForm');
|
||||
const filterForm = document.getElementById('filterForm');
|
||||
|
||||
// Button Elements
|
||||
const addApplicationBtn = document.getElementById('addApplicationBtn');
|
||||
@@ -657,20 +656,6 @@ closePdfModal.addEventListener('click', () => hideModal(pdfExportModal));
|
||||
cancelPdfExport.addEventListener('click', () => hideModal(pdfExportModal));
|
||||
pdfExportForm.addEventListener('submit', generatePDF);
|
||||
|
||||
// Filter Form
|
||||
document.getElementById('filterForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const month = document.getElementById('filterMonth').value;
|
||||
const year = document.getElementById('filterYear').value;
|
||||
let url = '/';
|
||||
if (month || year) {
|
||||
url += '?';
|
||||
if (month) url += `month=${month}&`;
|
||||
if (year) url += `year=${year}&`;
|
||||
}
|
||||
window.location.href = url;
|
||||
});
|
||||
|
||||
// Delete buttons (event delegation). Editing opens its own page (/bewerbung/:id).
|
||||
document.addEventListener('click', (e) => {
|
||||
if (e.target.closest('.delete-btn')) {
|
||||
|
||||
+23
-76
@@ -7,9 +7,9 @@
|
||||
<%- include('partials/header') %>
|
||||
|
||||
<main class="flex-1 container mx-auto px-4 py-8">
|
||||
<!-- Search -->
|
||||
<div class="flex justify-center mb-8">
|
||||
<div class="relative w-full max-w-xl">
|
||||
<!-- Toolbar: search + actions -->
|
||||
<div class="flex flex-col gap-3 mb-8 sm:flex-row sm:items-center">
|
||||
<div class="relative flex-1">
|
||||
<svg class="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400 dark:text-gray-500 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
@@ -20,80 +20,27 @@
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filter Section -->
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
|
||||
<h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Filter</h2>
|
||||
<form id="filterForm" class="flex flex-wrap gap-4 items-end">
|
||||
<div class="flex-1 min-w-32">
|
||||
<label for="filterMonth" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Monat
|
||||
</label>
|
||||
<select
|
||||
id="filterMonth"
|
||||
name="month"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||||
<option value="">-- Alle Monate --</option>
|
||||
<% availableMonths.forEach(m => { %>
|
||||
<option value="<%= m.month %>"><%= m.month %> - <%= m.year %></option>
|
||||
<% }); %>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex-1 min-w-32">
|
||||
<label for="filterYear" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
Jahr
|
||||
</label>
|
||||
<select
|
||||
id="filterYear"
|
||||
name="year"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-800 dark:text-white">
|
||||
<option value="">-- Alle Jahre --</option>
|
||||
<% const years = [...new Set(availableMonths.map(m => m.year))].sort().reverse(); %>
|
||||
<% years.forEach(y => { %>
|
||||
<option value="<%= y %>"><%= y %></option>
|
||||
<% }); %>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-2">
|
||||
<button
|
||||
type="submit"
|
||||
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors">
|
||||
Filtern
|
||||
</button>
|
||||
<a
|
||||
href="/"
|
||||
class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
|
||||
Zurücksetzen
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="ml-auto">
|
||||
<button
|
||||
type="button"
|
||||
id="exportPdfBtn"
|
||||
class="px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition-colors flex items-center space-x-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
<span>PDF Export</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="button"
|
||||
id="addApplicationBtn"
|
||||
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors flex items-center space-x-2">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
<span>Bewerbung hinzufügen</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
type="button"
|
||||
id="exportPdfBtn"
|
||||
class="inline-flex items-center gap-2 rounded-full px-4 py-3 text-sm font-medium text-white shadow-sm transition-colors bg-emerald-600 hover:bg-emerald-700">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.9A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13v6m-3-3h6"></path>
|
||||
</svg>
|
||||
<span>PDF Export</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
id="addApplicationBtn"
|
||||
class="inline-flex items-center gap-2 rounded-full px-4 py-3 text-sm font-medium text-white shadow-sm transition-colors bg-blue-600 hover:bg-blue-700">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
|
||||
</svg>
|
||||
<span>Bewerbung hinzufügen</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Upcoming appointments (from the application calendar) -->
|
||||
|
||||
Reference in New Issue
Block a user