Added autohide with animation for flash message
This commit is contained in:
@@ -1 +1,16 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
/* 1. Die CSS-Variable für die Animation definieren */
|
||||
--animate-shrink: shrink 5s linear forwards;
|
||||
|
||||
/* 2. Die dazugehörigen Keyframes festlegen */
|
||||
@keyframes shrink {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
100% {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
40
app/javascript/controllers/flash_controller.js
Normal file
40
app/javascript/controllers/flash_controller.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import { Controller } from "@hotwired/stimulus";
|
||||
|
||||
export default class extends Controller {
|
||||
static targets = ["notification"];
|
||||
|
||||
connect() {
|
||||
// Startet den Timer: Ruft nach 5000 Millisekunden (5 Sekunden) die dismiss-Methode auf
|
||||
this.timeout = setTimeout(() => {
|
||||
this.dismiss();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
disconnect() {
|
||||
// Wichtig: Löscht den Timer, falls der Nutzer die Nachricht vor Ablauf der 5 Sekunden manuell schließt
|
||||
clearTimeout(this.timeout);
|
||||
}
|
||||
|
||||
dismiss() {
|
||||
// 1. Tailwind-Klassen für das Ausblenden hinzufügen
|
||||
// this.notificationTarget.classList.add("opacity-0","translate-y-2","scale-95");
|
||||
|
||||
// Verschiebt das Element auf der X-Achse weit nach rechts (translate-x-full)
|
||||
// und blendet es leicht aus, damit es weicher wirkt
|
||||
// 1. Alten Startpunkt entfernen (wichtig für Tailwind v4/v3)
|
||||
this.notificationTarget.classList.remove("translate-x-0", "opacity-100");
|
||||
// 2. Neuen Endpunkt hinzufügen (löst die Animation aus)
|
||||
this.notificationTarget.classList.add("translate-x-full", "opacity-20");
|
||||
|
||||
// Fügt Klassen für Deckkraft (0) und minimale Skalierung hinzu
|
||||
// 1. Den Startwert (voll sichtbar) entfernen
|
||||
//this.notificationTarget.classList.remove("opacity-100");
|
||||
// 2. Den Endwert (vollständig transparent) hinzufügen -> startet das Verblassen
|
||||
//this.notificationTarget.classList.add("opacity-0", "scale-95");
|
||||
|
||||
// 2. Nach dem Ende der CSS-Animation (300ms) das Element komplett aus dem DOM löschen
|
||||
setTimeout(() => {
|
||||
this.element.remove();
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
37
app/views/layouts/_flash.html.erb
Normal file
37
app/views/layouts/_flash.html.erb
Normal file
@@ -0,0 +1,37 @@
|
||||
<% flash.each do |type, message| %>
|
||||
<%
|
||||
bg_color = type == "notice" ? "bg-green-50 border-green-200 text-green-800" : "bg-red-50 border-red-200 text-red-800"
|
||||
icon_color = type == "notice" ? "text-green-500" : "text-red-500"
|
||||
# Die Farbe des Balkens passend zum Typ festlegen
|
||||
bar_color = type == "notice" ? "bg-green-500" : "bg-red-500"
|
||||
%>
|
||||
|
||||
<div data-controller="flash" class="fixed top-5 right-5 z-50 max-w-sm w-full">
|
||||
|
||||
<!-- Das relative Attribut und overflow-hidden sind wichtig für den Balken -->
|
||||
<div data-flash-target="notification"
|
||||
class="relative overflow-hidden transition-all duration-300 ease-out opacity-100 flex items-start p-4 pb-5 rounded-lg border shadow-lg <%= bg_color %>">
|
||||
|
||||
<!-- Nachricht -->
|
||||
<div class="flex-1 ml-3 text-sm font-medium">
|
||||
<%= message %>
|
||||
</div>
|
||||
|
||||
<!-- Schließen-Button -->
|
||||
<div class="ml-4 flex shrink-0">
|
||||
<button data-action="click->flash#dismiss"
|
||||
class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 hover:bg-black/5 <%= icon_color %>">
|
||||
<span class="sr-only">Schließen</span>
|
||||
<svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- DER FORTSCHRITTSBALKEN -->
|
||||
<!-- 'animate-shrink' ist unsere eigene Animation, die wir gleich definieren -->
|
||||
<div class="absolute bottom-0 left-0 h-1 w-full origin-left animate-shrink <%= bar_color %>"></div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
@@ -25,40 +25,40 @@
|
||||
</head>
|
||||
|
||||
<body class="bg-gray-100 text-gray-800 antialiased">
|
||||
|
||||
|
||||
<!-- APPLIKATIONS-LAYOUT FÜR EINGELOGGTE NUTZER -->
|
||||
<div class="min-h-screen bg-gray-100 flex relative overflow-x-hidden">
|
||||
|
||||
|
||||
<!-- STEUERUNG 1: Mobile Sidebar (Standard-Burger via CSS) -->
|
||||
<input type="checkbox" id="mobile-sidebar-toggle" class="peer hidden" />
|
||||
<input type="checkbox" id="mobile-sidebar-toggle" class="peer hidden">
|
||||
|
||||
<!-- STEUERUNG 2: Desktop Sidebar (Einklappen via CSS) -->
|
||||
<input type="checkbox" id="desktop-sidebar-toggle" class="hidden" />
|
||||
<input type="checkbox" id="desktop-sidebar-toggle" class="hidden">
|
||||
|
||||
<!-- DUNKLES HINTERGRUND-OVERLAY (Ausblend-Animation nur auf Mobile aktiv) -->
|
||||
<label for="mobile-sidebar-toggle"
|
||||
class="fixed inset-0 bg-gray-900/50 z-40 md:hidden backdrop-blur-sm
|
||||
<label for="mobile-sidebar-toggle"
|
||||
class="fixed inset-0 bg-gray-900/50 z-40 md:hidden backdrop-blur-sm
|
||||
opacity-0 pointer-events-none transition-opacity duration-300 ease-in-out
|
||||
peer-checked:opacity-100 peer-checked:pointer-events-auto"></label>
|
||||
|
||||
<!-- SIDEBAR NAVIGATION -->
|
||||
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col fixed h-full z-50
|
||||
transition-all duration-300 ease-in-out transform -translate-x-full
|
||||
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col fixed h-full z-50
|
||||
transition-all duration-300 ease-in-out transform -translate-x-full
|
||||
md:translate-x-0 peer-checked:translate-x-0">
|
||||
|
||||
|
||||
<!-- Logo-Bereich (Desktop-Klickfläche zum Einklappen) -->
|
||||
<div class="h-16 flex items-center justify-between px-4 border-b border-gray-200 min-w-0">
|
||||
<label for="desktop-sidebar-toggle" class="flex items-center gap-3 select-none group w-full overflow-hidden pointer-events-none md:cursor-pointer md:pointer-events-auto">
|
||||
<svg class="h-6 w-6 text-blue-600 shrink-0 transition-transform md:group-hover:scale-110 ml-1" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l5.25 3.03M12 12.75v9" /></svg>
|
||||
<span class="collapse-text text-xl font-bold text-gray-800 transition-all duration-300 ease-in-out max-w-[180px] opacity-100 overflow-hidden whitespace-nowrap">Vault171</span>
|
||||
</label>
|
||||
|
||||
|
||||
<!-- Schließen X (Nur auf Smartphones aktiv) -->
|
||||
<label for="mobile-sidebar-toggle" class="md:hidden p-1 text-gray-400 hover:text-gray-600 rounded-lg cursor-pointer">
|
||||
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Navigations-Links mit dynamischen Helper-Klassen -->
|
||||
<nav class="flex-1 p-3 space-y-1 overflow-hidden">
|
||||
<%= link_to root_path, class: nav_link_class("dashboard") do %>
|
||||
@@ -112,7 +112,7 @@
|
||||
|
||||
<!-- HAUPTBEREICH (Inhaltsfläche rückt bei verkleinerter Sidebar nach) -->
|
||||
<div class="main-content flex-1 flex flex-col min-h-screen w-full transition-all duration-300 ease-in-out pl-0 md:pl-64">
|
||||
|
||||
|
||||
<!-- OBERE LEISTE (Top Bar) -->
|
||||
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-4 md:px-6 sticky top-0 z-30">
|
||||
<div class="flex items-center gap-3">
|
||||
@@ -129,20 +129,21 @@
|
||||
|
||||
<!-- INHALT DER JEWEILIGEN VIEW -->
|
||||
<main class="p-4 md:p-6 flex-1 w-full mx-auto px-4 md:px-8">
|
||||
<!-- Platzhalter für Flash-Meldungen (z.B. erfolgreiches Speichern) -->
|
||||
<!-- Platzhalter für Flash-Meldungen (z.B. erfolgreiches Speichern)
|
||||
<% flash.each do |type, message| %>
|
||||
<div class="mb-4 p-4 text-sm rounded-lg border <%= type == 'notice' ? 'bg-green-50 text-green-800 border-green-200' : 'bg-red-50 text-red-800 border-red-200' %>">
|
||||
<%= message %>
|
||||
</div>
|
||||
<% end %>
|
||||
-->
|
||||
<%= render "layouts/flash" %>
|
||||
|
||||
<%= yield %>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Globaler Platzhalter für das optionale Turbo-Frame-Modal (z.B. neue Personen anlegen) -->
|
||||
<%= turbo_frame_tag "modal" %>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user