thomas/jobbi-bewerbung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Gemerkte Bewerbungen: platzsparende Chip-Wolke statt Listenzeilen

Browse Source 
Nur der Firmenname als klickbarer Chip, nebeneinander (flex-wrap), jeder
Chip öffnet die Bewerbung. Status/Datum/Stelle/Ort entfallen hier — die
Details stehen auf der Bewerbungsseite; entmerken ebenfalls dort (Stern).
Lange Firmennamen werden mit truncate abgeschnitten, der volle Name steht
im title-Tooltip. Header (Stern + Zähler) bleibt, id für Such-Einblendung
unverändert.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
thomas
2026-07-20 09:19:15 +02:00
co-authored by Claude
parent a6a2fabf05
commit 1e9618c920
1 changed files with 14 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/partials/bewerbung-favoriten.ejs
+12 -31
View File
@@ -2,48 +2,29 @@
// Gemerkte Bewerbungen — Sektion auf der Startseite, direkt unter den
// anstehenden Terminen. Zeigt alle favorisierten Bewerbungen unabhängig von
// ihrem Status. Wird nur gerendert, wenn mindestens ein Favorit vorhanden ist.
// Bewusst dezenter als die Hauptkarten: weiche Border statt Schatten, kleinere
// Überschrift, gedämpfte Akzentfarben — aber mit modernen, weichen Kanten.
//
// Platzsparend als Chip-Wolke: nur der Firmenname, nebeneinander (flex-wrap),
// jeder Chip ein Link zur Bewerbung. Status/Datum/Stelle entfallen hier — die
// Details stehen auf der Bewerbungsseite. Entmerken geht ebenfalls dort (Stern).
// Die id wird von der Such-Logik in index.ejs zum Ein-/Ausblenden verwendet.
%>
<% if (bewerbungFavoriten && bewerbungFavoriten.length) { %>
<%- include('favorit-script') %>
<section id="bewerbungFavoritenCard" data-fav-card class="bg-white dark:bg-gray-800/60 rounded-xl border border-gray-200/80 dark:border-gray-700/60 shadow-sm mb-8 overflow-hidden">
<div class="flex flex-wrap items-center gap-2 px-6 py-4 border-b border-gray-100 dark:border-gray-700/60">
<section id="bewerbungFavoritenCard" class="bg-white dark:bg-gray-800/60 rounded-xl border border-gray-200/80 dark:border-gray-700/60 shadow-sm mb-8 overflow-hidden">
<div class="flex flex-wrap items-center gap-2 px-5 py-3.5 border-b border-gray-100 dark:border-gray-700/60">
<svg class="h-4 w-4 text-amber-400 dark:text-amber-500" viewBox="0 0 24 24" fill="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.5l2.6 5.27 5.82.85-4.21 4.1.99 5.79-5.2-2.73-5.2 2.73.99-5.79-4.21-4.1 5.82-.85 2.6-5.27z"/></svg>
<h2 class="text-sm font-semibold text-gray-700 dark:text-gray-200">Gemerkte Bewerbungen</h2>
<span class="ml-auto inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-700/70 px-2 py-0.5 text-xs font-medium text-gray-500 dark:text-gray-400">
<%= bewerbungFavoriten.length %>
</span>
</div>
<ul class="divide-y divide-gray-100 dark:divide-gray-700/60">
<div class="flex flex-wrap gap-2 p-5">
<% bewerbungFavoriten.forEach(function(b){ %>
<li data-fav-item class="flex flex-wrap items-start justify-between gap-3 px-6 py-3 transition-colors hover:bg-gray-50/70 dark:hover:bg-gray-700/30">
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-2 mb-1">
<% if (b.status) { %>
<span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300"><%= b.status %></span>
<% } %>
<% if (b.datum) { %>
<span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400"><%= new Date(b.datum).toLocaleDateString('de-DE') %></span>
<% } %>
</div>
<a href="/bewerbung/<%= b.id %>" class="text-sm font-medium text-gray-800 dark:text-gray-100 break-words hover:underline">
<%= b.firma %>
</a>
<p class="text-sm text-gray-600 dark:text-gray-300 break-words"><%= b.stelle %></p>
<% if (b.ort) { %>
<p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5"><%= b.ort %></p>
<% } %>
</div>
<div class="shrink-0 flex flex-col gap-2 self-start items-end">
<a href="/bewerbung/<%= b.id %>"
class="inline-flex items-center justify-center gap-1.5 px-2.5 py-1 text-xs font-medium text-gray-600 dark:text-gray-300 border border-gray-200 dark:border-gray-600/80 rounded-md hover:bg-white dark:hover:bg-gray-700 hover:border-gray-300 dark:hover:border-gray-500 transition-colors">
Öffnen
title="<%= b.firma %>"
class="gemerkt-chip inline-flex items-center max-w-[18rem] px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700/70 bg-gray-50 dark:bg-gray-700/30 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-white dark:hover:bg-gray-700/60 hover:border-gray-300 dark:hover:border-gray-600 hover:shadow-sm transition-all">
<span class="truncate"><%= b.firma %></span>
</a>
<%- include('favorit-button', { j: b, endpoint: '/api/bewerbungen/' + b.id + '/favorit' }) %>
</div>
</li>
<% }); %>
</ul>
</div>
</section>
<% } %>