local-it/mitgliederverwaltung
2
3
Fork 0
Code Issues 51 Pull requests 14 Projects 1 Releases Packages 1 Activity Actions

Prevent tables from growing the page horizontally

Browse source
This commit is contained in:
Rafael Epplée 2025-12-02 16:16:33 +01:00
parent eedd24b93c
commit 366d4c104a
No known key found for this signature in database
GPG key ID: B4EFE6DC59FAE118
2 changed files with 56 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

108
lib/mv_web/components/core_components.ex
View file

@ -368,61 +368,63 @@ defmodule MvWeb.CoreComponents do
end end
~H""" ~H"""
<table class="table table-zebra"> <div class="overflow-auto">
<thead> <table class="table table-zebra">
<tr> <thead>
<th :for={col <- @col}>{col[:label]}</th> <tr>
<th :for={dyn_col <- @dynamic_cols}> <th :for={col <- @col}>{col[:label]}</th>
<.live_component <th :for={dyn_col <- @dynamic_cols}>
module={MvWeb.Components.SortHeaderComponent} <.live_component
id={:"sort_custom_field_#{dyn_col[:custom_field].id}"} module={MvWeb.Components.SortHeaderComponent}
field={"custom_field_#{dyn_col[:custom_field].id}"} id={:"sort_custom_field_#{dyn_col[:custom_field].id}"}
label={dyn_col[:custom_field].name} field={"custom_field_#{dyn_col[:custom_field].id}"}
sort_field={@sort_field} label={dyn_col[:custom_field].name}
sort_order={@sort_order} sort_field={@sort_field}
/> sort_order={@sort_order}
</th> />
<th :if={@action != []}> </th>
<span class="sr-only">{gettext("Actions")}</span> <th :if={@action != []}>
</th> <span class="sr-only">{gettext("Actions")}</span>
</tr> </th>
</thead> </tr>
<tbody id={@id} phx-update={is_struct(@rows, Phoenix.LiveView.LiveStream) && "stream"}> </thead>
<tr :for={row <- @rows} id={@row_id && @row_id.(row)}> <tbody id={@id} phx-update={is_struct(@rows, Phoenix.LiveView.LiveStream) && "stream"}>
<td <tr :for={row <- @rows} id={@row_id && @row_id.(row)}>
:for={col <- @col} <td
phx-click={@row_click && @row_click.(row)} :for={col <- @col}
class={["max-w-xs truncate", @row_click && "hover:cursor-pointer"]} phx-click={@row_click && @row_click.(row)}
> class={["max-w-xs truncate", @row_click && "hover:cursor-pointer"]}
{render_slot(col, @row_item.(row))} >
</td> {render_slot(col, @row_item.(row))}
<td </td>
:for={dyn_col <- @dynamic_cols} <td
phx-click={@row_click && @row_click.(row)} :for={dyn_col <- @dynamic_cols}
class={["max-w-xs truncate", @row_click && "hover:cursor-pointer"]} phx-click={@row_click && @row_click.(row)}
> class={["max-w-xs truncate", @row_click && "hover:cursor-pointer"]}
{if dyn_col[:render] do >
rendered = dyn_col[:render].(@row_item.(row)) {if dyn_col[:render] do
rendered = dyn_col[:render].(@row_item.(row))
if rendered == "" do if rendered == "" do
"" ""
else
rendered
end
else else
rendered ""
end end}
else </td>
"" <td :if={@action != []} class="w-0 font-semibold">
end} <div class="flex gap-4">
</td> <%= for action <- @action do %>
<td :if={@action != []} class="w-0 font-semibold"> {render_slot(action, @row_item.(row))}
<div class="flex gap-4"> <% end %>
<%= for action <- @action do %> </div>
{render_slot(action, @row_item.(row))} </td>
<% end %> </tr>
</div> </tbody>
</td> </table>
</tr> </div>
</tbody>
</table>
""" """
end end

2
lib/mv_web/live/components/sort_header_component.ex
View file

@ -19,7 +19,7 @@ defmodule MvWeb.Components.SortHeaderComponent do
@impl true @impl true
def render(assigns) do def render(assigns) do
~H""" ~H"""
<div class="tooltip" data-tip={aria_sort(@field, @sort_field, @sort_order)}> <div class="tooltip tooltip-bottom" data-tip={aria_sort(@field, @sort_field, @sort_order)}>
<button <button
type="button" type="button"
aria-label={aria_sort(@field, @sort_field, @sort_order)} aria-label={aria_sort(@field, @sort_field, @sort_order)}