daboh/vault171
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Moved flash overlay away from buttons in top nav
Some checks failed
CI / scan_ruby (push) Has been cancelled
Details
CI / scan_js (push) Has been cancelled
Details
CI / lint (push) Has been cancelled
Details
CI / test (push) Has been cancelled
Details
CI / system-test (push) Has been cancelled
Details

Browse Source
This commit is contained in:
David Böhm
2026-05-31 01:40:37 +02:00
parent 92786161b4
commit ff9f8b7523
2 changed files with 48 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/views/layouts/_flash.html.erb
View File

@@ -6,7 +6,7 @@
bar_color = type == "notice" ? "bg-green-500" : "bg-red-500" 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"> <div data-controller="flash" class="fixed top-20 right-5 z-50 max-w-sm w-full">
<!-- Das relative Attribut und overflow-hidden sind wichtig für den Balken --> <!-- Das relative Attribut und overflow-hidden sind wichtig für den Balken -->
<div data-flash-target="notification" <div data-flash-target="notification"

94
app/views/rooms/index.html.erb
View File

@@ -22,56 +22,56 @@
<% if @rooms.any? %> <% if @rooms.any? %>
<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden"> <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
<!-- ========================================================================= --> <!-- ========================================================================= -->
<!-- 1. HANDY-ANSICHT: KOMPAKTE CARDS MIT KLEINEN BUTTONS (Bis md:) --> <!-- 1. HANDY-ANSICHT: KOMPAKTE CARDS MIT KLEINEN BUTTONS (Bis md:) -->
<!-- ========================================================================= --> <!-- ========================================================================= -->
<div class="block md:hidden divide-y divide-gray-200 bg-white"> <div class="block md:hidden divide-y divide-gray-200 bg-white">
<% @rooms.each do |room| %> <% @rooms.each do |room| %>
<div class="p-3 hover:bg-gray-50/50 transition space-y-2"> <div class="p-3 hover:bg-gray-50/50 transition space-y-2">
<!-- OBERE ZEILE: Icon + Name & Geräte-Badge --> <!-- OBERE ZEILE: Icon + Name & Geräte-Badge -->
<div class="flex items-start justify-between gap-3 w-full"> <div class="flex items-start justify-between gap-3 w-full">
<div class="flex items-start gap-2 text-gray-500 min-w-0 flex-1"> <div class="flex items-start gap-2 text-gray-500 min-w-0 flex-1">
<svg class="h-5 w-5 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <svg class="h-5 w-5 shrink-0 mt-0.5" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25s-7.5-4.108-7.5-11.25a7.5 7.5 0 1 1 15 0Z" />
</svg> </svg>
<div class="min-w-0"> <div class="min-w-0">
<h4 class="font-black text-gray-900 text-base leading-tight truncate"><%= room.name %></h4> <h4 class="font-black text-gray-900 text-base leading-tight truncate"><%= room.name %></h4>
<div class="flex items-center gap-1.5 text-xs font-semibold text-gray-400 font-sans mt-0.5"> <div class="flex items-center gap-1.5 text-xs font-semibold text-gray-400 font-sans mt-0.5">
<span><%= room.building %></span> <span><%= room.building %></span>
<span class="text-gray-300">•</span> <span class="text-gray-300">•</span>
<span>Etage <%= room.floor %></span> <span>Etage <%= room.floor %></span>
</div>
</div>
</div>
<div class="shrink-0">
<span class="inline-flex items-center py-0.5 px-2 rounded-full text-xs font-bold <%= room.items.count > 0 ? 'bg-blue-50 text-blue-800 border border-blue-200' : 'bg-gray-100 text-gray-500 border border-gray-200' %>">
<%= room.items.count %> <%= room.items.count == 1 ? "Gerät" : "Geräte" %>
</span>
</div>
</div>
<!-- UNTERE ZEILE: RECHTSBÜNDIGE, QUADRATISCHE BUTTONS (WICHTIG: 'w-auto' erzwingt Kompaktheit) -->
<div class="flex items-center justify-end gap-1.5 w-full">
<!-- DETAILS BUTTON (Durch w-8 h-8 flex-initial garantiert quadratisch und kompakt) -->
<%= link_to room_path(room), data: { turbo_frame: "_top" }, class: "w-8 h-8 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center transition flex-initial shrink-0", title: "Inventar anzeigen" do %>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
<% end %>
<!-- BEARBEITEN BUTTON (Durch w-8 h-8 flex-initial garantiert quadratisch und kompakt) -->
<%= link_to edit_room_path(room), data: { turbo_frame: "_top" }, class: "w-8 h-8 text-gray-500 hover:text-amber-600 hover:bg-amber-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center transition flex-initial shrink-0", title: "Bearbeiten" do %>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
<% end %>
</div>
</div> </div>
</div> <% end %>
</div> </div>
<div class="shrink-0">
<span class="inline-flex items-center py-0.5 px-2 rounded-full text-xs font-bold <%= room.items.count > 0 ? 'bg-blue-50 text-blue-800 border border-blue-200' : 'bg-gray-100 text-gray-500 border border-gray-200' %>">
<%= room.items.count %> <%= room.items.count == 1 ? "Gerät" : "Geräte" %>
</span>
</div>
</div>
<!-- UNTERE ZEILE: RECHTSBÜNDIGE, QUADRATISCHE BUTTONS (WICHTIG: 'w-auto' erzwingt Kompaktheit) -->
<div class="flex items-center justify-end gap-1.5 w-full">
<!-- DETAILS BUTTON (Durch w-8 h-8 flex-initial garantiert quadratisch und kompakt) -->
<%= link_to room_path(room), data: { turbo_frame: "_top" }, class: "w-8 h-8 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center transition flex-initial shrink-0", title: "Inventar anzeigen" do %>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
<% end %>
<!-- BEARBEITEN BUTTON (Durch w-8 h-8 flex-initial garantiert quadratisch und kompakt) -->
<%= link_to edit_room_path(room), data: { turbo_frame: "_top" }, class: "w-8 h-8 text-gray-500 hover:text-amber-600 hover:bg-amber-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center transition flex-initial shrink-0", title: "Bearbeiten" do %>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
<% end %>
</div>
</div>
<% end %>
</div>
<!-- ========================================================================= --> <!-- ========================================================================= -->
<!-- 2. DESKTOP-ANSICHT: STICKY-RÄUME-TABELLE --> <!-- 2. DESKTOP-ANSICHT: STICKY-RÄUME-TABELLE -->
<!-- ========================================================================= --> <!-- ========================================================================= -->