Fixed dashboard#index mobile view
Some checks failed
CI / scan_ruby (push) Has been cancelled
CI / scan_js (push) Has been cancelled
CI / lint (push) Has been cancelled
CI / test (push) Has been cancelled
CI / system-test (push) Has been cancelled

This commit is contained in:
2026-05-31 01:09:53 +02:00
parent c12eab7f98
commit 59c462506d
3 changed files with 51 additions and 83 deletions

View File

@@ -65,7 +65,6 @@
<!-- UNTERER BEREICH: BREITEN-OPTIMIERTE LISTEN (items-start verhindert vertikale Streckung) --> <!-- UNTERER BEREICH: BREITEN-OPTIMIERTE LISTEN (items-start verhindert vertikale Streckung) -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6 items-start"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6 items-start">
<!-- SPALTE 1: ZULETZT HINZUGEFÜGTE ARTIKEL -->
<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden flex flex-col h-fit"> <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden flex flex-col h-fit">
<div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex items-center gap-2 shrink-0"> <div class="px-5 py-4 border-b border-gray-200 bg-gray-50 flex items-center gap-2 shrink-0">
<svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <svg class="h-4 w-4 text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
@@ -73,53 +72,31 @@
</svg> </svg>
<h3 class="font-bold text-gray-700 text-sm">Zuletzt hinzugefügt</h3> <h3 class="font-bold text-gray-700 text-sm">Zuletzt hinzugefügt</h3>
</div> </div>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 text-xs table-fixed"> <table class="min-w-full divide-y divide-gray-200 text-xs table-fixed">
<tbody class="divide-y divide-gray-200 bg-white"> <tbody class="divide-y divide-gray-200 bg-white">
<% @recent_items.each.each do |item| %> <% @recent_items.each do |item| %>
<tr class="hover:bg-gray-50/50 transition"> <tr class="hover:bg-gray-50/50 transition">
<!-- KORREKTUR: max-w begrenzt die Breite, whitespace-normal erlaubt Zeilenumbruch --> <!-- KORREKTUR: max-w begrenzt die Breite, whitespace-normal erlaubt Zeilenumbruch -->
<td class="px-5 py-3.5 text-start align-middle max-w-[200px] sm:max-w-[250px]"> <td class="px-5 py-3.5 text-start align-middle max-w-[200px] sm:max-w-[250px]">
<div class="flex items-start gap-2.5"> <div class="flex items-start gap-2.5">
<%= link_to item_path(item), class: "shrink-0 transition hover:scale-105 active:scale-95 block" do %> <%= link_to item_path(item), class: "shrink-0 transition hover:scale-105 active:scale-95 block" do %>
<span class="inline-flex items-center font-mono font-bold text-[10px] text-white bg-blue-600 px-1.5 py-0.5 rounded shadow-sm tracking-wider mt-0.5"> <%= render "layouts/badge", type: :sticker, label: "##{item.sticker_id}" %>
#<%= item.sticker_id %>
</span>
<% end %> <% end %>
<div class="min-w-0 whitespace-normal break-words"> <div class="min-w-0 whitespace-normal break-words">
<% if item.present? %>
<%= link_to item_path(item), class: "font-bold text-gray-900 hover:text-blue-600 hover:underline inline leading-tight" do %> <%= link_to item_path(item), class: "font-bold text-gray-900 hover:text-blue-600 hover:underline inline leading-tight" do %>
<%= item.name %> <%= item.name %>
<% end %>
<span class="block text-[10px] text-gray-400 mt-0.5"><%= item.category.name %></span> <span class="block text-[10px] text-gray-400 mt-0.5"><%= item.category.name %></span>
</div>
</div>
</td>
<td class="px-5 py-3.5 whitespace-nowrap align-middle shrink-0 w-32">
<% if item.user.present? %>
<span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-green-50 text-green-800 px-2 py-0.5 rounded border border-green-200 shadow-sm">
<svg class="h-3 w-3 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 1 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
</svg>
<%= item.user.name %>
</span>
<% elsif item.room.present? %>
<%= link_to room_path item.room do %>
<span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-blue-50 text-blue-800 px-2 py-0.5 rounded border border-blue-200 shadow-sm">
<svg class="h-3 w-3 text-blue-600 shrink-0" 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="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>
<%= item.room.name %>
</span>
<% end %> <% end %>
<% else %> <% else %>
<span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-amber-50 text-amber-800 px-2 py-0.5 rounded border border-amber-200 shadow-sm"> <span class="font-bold text-gray-400">Gelöschter Artikel</span>
<svg class="h-3 w-3 text-amber-600 shrink-0" 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>
Hauptlager
</span>
<% end %> <% end %>
<div class="mt-1">
<%= render "layouts/badge", type: item.location_badge_type, label: item.location_badge_label(short_room: true) %>
</div>
</div>
</div>
</td> </td>
<td class="px-5 py-3.5 whitespace-nowrap text-end text-gray-400 font-medium align-middle shrink-0 w-24"> <td class="px-5 py-3.5 whitespace-nowrap text-end text-gray-400 font-medium align-middle shrink-0 w-24">
<%= time_ago_in_words(item.created_at) %> <%= time_ago_in_words(item.created_at) %>
@@ -149,44 +126,19 @@
<td class="px-5 py-3.5 text-start align-middle max-w-[200px] sm:max-w-[250px]"> <td class="px-5 py-3.5 text-start align-middle max-w-[200px] sm:max-w-[250px]">
<div class="flex items-start gap-2.5"> <div class="flex items-start gap-2.5">
<%= link_to item_path(log.item), class: "shrink-0 transition hover:scale-105 active:scale-95 block" do %> <%= link_to item_path(log.item), class: "shrink-0 transition hover:scale-105 active:scale-95 block" do %>
<span class="inline-flex items-center font-mono font-bold text-[10px] text-white bg-blue-600 px-1.5 py-0.5 rounded shadow-sm tracking-wider mt-0.5"> <%= render "layouts/badge", type: :sticker, label: "##{log.item.sticker_id}" %>
#<%= log.item.sticker_id %>
</span>
<% end %> <% end %>
<div class="min-w-0 whitespace-normal break-words"> <div class="min-w-0 whitespace-normal break-words">
<% if log.item.present? %> <% if log.item.present? %>
<%= link_to item_path(log.item), class: "font-bold text-gray-900 hover:text-blue-600 hover:underline inline leading-tight" do %> <%= link_to item_path(log.item), class: "font-bold text-gray-900 hover:text-blue-600 hover:underline inline leading-tight" do %>
<%= log.item.name %> <%= log.item.name %>
<span class="block text-[10px] text-gray-400 mt-0.5"><%= log.item.category.name %></span>
<% end %> <% end %>
<% else %> <% else %>
<span class="font-bold text-gray-400">Gelöschter Artikel</span> <span class="font-bold text-gray-400">Gelöschter Artikel</span>
<% end %> <% end %>
<div class="mt-1"> <div class="mt-1">
<% if log.user.present? %> <%= render "layouts/badge", type: log.item.location_badge_type, label: log.item.location_badge_label(short_room: true) %>
<span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-green-50 text-green-800 px-2 py-0.5 rounded border border-green-200 shadow-sm">
<svg class="h-3 w-3 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 1 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
</svg>
<%= log.user.name %> zugewiesen
</span>
<% elsif log.room.present? %>
<%= link_to room_path log.room do %>
<span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-blue-50 text-blue-800 px-2 py-0.5 rounded border border-blue-200 shadow-sm">
<svg class="h-3 w-3 text-blue-600 shrink-0" 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="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>
In <%= log.room.name %> platziert
</span>
<% end %>
<% else %>
<span class="inline-flex items-center gap-1 text-[11px] font-semibold bg-amber-50 text-amber-800 px-2 py-0.5 rounded border border-amber-200 shadow-sm">
<svg class="h-3 w-3 text-amber-600 shrink-0" 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>
Hauptlager zurückgebracht
</span>
<% end %>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -3,7 +3,7 @@
<!-- OBERE AKTIONSLISTE (Yield im Top-Bar deines Hauptlayouts) --> <!-- OBERE AKTIONSLISTE (Yield im Top-Bar deines Hauptlayouts) -->
<% content_for :top_bar_actions do %> <% content_for :top_bar_actions do %>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<%= link_to items_path, class: "py-2 px-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-1.5 shadow-sm transition" do %> <%= link_to "javascript:history.back()", class: "py-2 px-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 flex items-center gap-1.5 shadow-sm transition" do %>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg> <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" /></svg>
<div class="hidden md:inline"> <div class="hidden md:inline">
Zurück Zurück

View File

@@ -9,7 +9,7 @@
type = local_assigns[:type] || "" type = local_assigns[:type] || ""
# 2. Icons als Strings definieren # 2. Icons als Strings definieren
icon_user = '<svg class="h-3.5 w-3.5 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>' icon_user = '<svg class="h-3.5 w-3.5 text-green-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 1 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" /></svg>'
icon_room = '<svg class="h-3.5 w-3.5 text-blue-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" 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="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>' icon_room = '<svg class="h-3.5 w-3.5 text-blue-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" 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="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>'
icon_storage = '<svg class="h-3.5 w-3.5 text-amber-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" 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>' icon_storage = '<svg class="h-3.5 w-3.5 text-amber-600 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" 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>'
icon_in_use = '<svg class="h-3.5 w-3.5 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" /></svg>' icon_in_use = '<svg class="h-3.5 w-3.5 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" /></svg>'
@@ -24,32 +24,47 @@
# 3. Logik-Weiche für Farben, Standard-Icons und Standard-Labels # 3. Logik-Weiche für Farben, Standard-Icons und Standard-Labels
case type.to_s case type.to_s
when "storage" when "storage"
css, computed_icon, computed_label = "bg-amber-50 text-amber-800 border-amber-200", icon_storage, "Hauptlager" css = "bg-amber-50 text-amber-800 border-amber-200" if css.blank?
computed_icon, computed_label = icon_storage, "Hauptlager"
when "user" when "user"
css, computed_icon, computed_label = "bg-green-50 text-green-800 border-green-200", icon_user, "" css = "bg-green-50 text-green-800 border-green-200" if css.blank?
computed_icon, computed_label = icon_user, ""
when "room" when "room"
css, computed_icon, computed_label = "bg-blue-50 text-blue-800 border-blue-200", icon_room, "" css = "bg-blue-50 text-blue-800 border-blue-200" if css.blank?
computed_icon, computed_label = icon_room, ""
when "in_use" when "in_use"
css, computed_icon, computed_label = "bg-gray-100 text-gray-600 border-gray-200", icon_in_use, "In Benutzung" css = "bg-gray-100 text-gray-600 border-gray-200" if css.blank?
computed_icon, computed_label = icon_in_use, "In Benutzung"
when "new_item" when "new_item"
css, computed_icon, computed_label = "bg-green-50 text-green-700 border-green-200", icon_new, Item.human_attribute_name("conditions.new_item") css = "bg-green-50 text-green-700 border-green-200" if css.blank?
computed_icon, computed_label = icon_new, Item.human_attribute_name("conditions.new_item")
when "as_new" when "as_new"
css, computed_icon, computed_label = "bg-emerald-50 text-emerald-700 border-emerald-200", icon_as_new, Item.human_attribute_name("conditions.as_new") css = "bg-emerald-50 text-emerald-700 border-emerald-200" if css.blank?
computed_icon, computed_label = icon_as_new, Item.human_attribute_name("conditions.as_new")
when "used" when "used"
css, computed_icon, computed_label = "bg-yellow-50 text-yellow-700 border-yellow-200", icon_used, Item.human_attribute_name("conditions.used") css = "bg-yellow-50 text-yellow-700 border-yellow-200" if css.blank?
computed_icon, computed_label = icon_used, Item.human_attribute_name("conditions.used")
when "heavily_used" when "heavily_used"
css, computed_icon, computed_label = "bg-orange-50 text-orange-700 border-orange-200", icon_heavy, Item.human_attribute_name("conditions.heavily_used") css = "bg-orange-50 text-orange-700 border-orange-200" if css.blank?
computed_icon, computed_label = icon_heavy, Item.human_attribute_name("conditions.heavily_used")
when "defective" when "defective"
css, computed_icon, computed_label = "bg-red-50 text-red-700 border-red-200", icon_defective, Item.human_attribute_name("conditions.defective") css = "bg-red-50 text-red-700 border-red-200 animate-pulse font-bold" if css.blank?
css += " animate-pulse font-bold" computed_icon, computed_label = icon_defective, Item.human_attribute_name("conditions.defective")
when "unknown" when "unknown"
css, computed_icon, computed_label = "bg-gray-50 text-gray-400 border-gray-100", icon_unknown, Item.human_attribute_name("conditions.unknown") css = "bg-gray-50 text-gray-400 border-gray-100" if css.blank?
computed_icon, computed_label = icon_unknown, Item.human_attribute_name("conditions.unknown")
when "category" when "category"
css, computed_icon, computed_label = "bg-blue-50 text-blue-800 border-blue-200", icon_category, "" css = "bg-blue-50 text-blue-800 border-blue-200" if css.blank?
computed_icon, computed_label = icon_category, ""
when "sticker"
# Wenn von außen kein custom CSS kommt, brennen wir den sportlichen Sticker-Look direkt hier ein
css = "bg-blue-600 text-white border-blue-600 font-mono font-black tracking-wider uppercase py-0.5 px-1.5" if css.blank?
computed_icon, computed_label = "", ""
end end
# 4. Optionale Variablen-Überlagerung von außen (Falls manuell übergeben) # 4. Optionale Variablen-Überlagerung von außen (Falls manuell übergeben)
final_label = local_assigns[:label].presence || computed_label final_label = local_assigns[:label].presence || computed_label
final_icon = if local_assigns[:icon_svg].present? final_icon = if local_assigns[:icon_svg].present?
local_assigns[:icon_svg] local_assigns[:icon_svg]
elsif local_assigns[:icon_type].present? elsif local_assigns[:icon_type].present?
@@ -59,7 +74,8 @@
end end
%> %>
<span class="inline-flex items-center gap-1.5 py-1 px-2.5 rounded-md text-xs font-semibold shadow-sm border <%= css %> "> <!-- Der Haupt-Container bleibt extrem fokussiert und sauber -->
<span class="inline-flex items-center gap-1.5 rounded-md text-xs font-semibold shadow-sm border py-1 px-2.5 <%= css %>">
<%= final_icon if final_icon.present? %> <%= final_icon if final_icon.present? %>
<%= final_label %> <%= final_label %>
</span> </span>