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

Rework member overview #553

Open
simon wants to merge 27 commits from issue/mitgliederverwaltung-547 into main
pull from: issue/mitgliederverwaltung-547
merge into: local-it:main
Conversation 0 Commits 27 Files changed 75 +10 -36
2 changed files with 10 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit e16ef1bea4 - Show all commits

44
assets/css/app.css
View file

@ -864,16 +864,15 @@
}
/*
* Horizontal-scroll fade for the pinned checkbox column: instead of hiding the
* scrolled-away content behind a hard opaque block, a gradient on the right edge
* of the sticky cell fades the incoming content, signalling there is more behind
* it. overflow: visible lets the ::after gradient extend past the cell; the cell
* keeps its own (zebra) background so the checkbox stays legible.
* Horizontal-scroll fade for the pinned checkbox column HEADER only: as the
* title cells scroll left behind the pinned checkbox they fade softly into the
* opaque base-100 header (gradient on the right edge of the sticky header cell)
* instead of a hard cut. Body rows deliberately have NO such fade — they are
* simply covered by the opaque (zebra) checkbox cell, so nothing tints the strip
* right of the body checkboxes. A gradient there would fade to the row's zebra
* colour and read as a grey shimmer beside the checkboxes (most visible while
* scrolling), which is not wanted.
*/
[data-sticky-first-col-rows="true"] .table.table-zebra td.sticky-first-col-cell {
overflow: visible;
}
[data-sticky-first-col-rows="true"] .table.table-zebra td.sticky-first-col-cell::after,
[data-sticky-first-col-rows="true"] .table.table-zebra thead th.sticky-first-col-th::after {
content: "";
position: absolute;
@ -882,34 +881,9 @@
left: 100%;
width: 1.25rem;
pointer-events: none;
}
[data-sticky-first-col-rows="true"]
.table.table-zebra
tbody
tr:nth-child(odd)
> td.sticky-first-col-cell::after {
background: linear-gradient(to right, var(--color-base-100), transparent);
}
[data-sticky-first-col-rows="true"]
.table.table-zebra
tbody
tr:nth-child(even)
> td.sticky-first-col-cell::after {
background: linear-gradient(to right, var(--color-base-200), transparent);
}
[data-sticky-first-col-rows="true"]
.table.table-zebra
tbody
tr[data-row-interactive="true"]:is(:hover, :has(:focus-visible))
> td.sticky-first-col-cell::after {
background: linear-gradient(to right, var(--color-base-300), transparent);
}
[data-sticky-first-col-rows="true"] .table.table-zebra thead th.sticky-first-col-th::after {
background: linear-gradient(to right, var(--color-base-100), transparent);
}
/* Compact density: narrower fade so the gradient does not visually reach into the
checkbox column's own content area in the tighter table-xs cell. */
[data-sticky-first-col-rows="true"] .table.table-zebra.table-xs td.sticky-first-col-cell::after,
/* Compact density: narrower fade in the tighter table-xs header cell. */
[data-sticky-first-col-rows="true"] .table.table-zebra.table-xs thead th.sticky-first-col-th::after {
width: 0.5rem;
}

2
lib/mv_web/components/layouts.ex
View file

@ -161,7 +161,7 @@ defmodule MvWeb.Layouts do
<div class="drawer-content flex flex-col relative z-0">
<!-- Mobile Header (only visible on mobile) -->
<header class="lg:hidden sticky top-0 z-10 navbar bg-base-100 shadow-sm">
<header class="lg:hidden sticky top-0 z-40 navbar bg-base-100 shadow-sm">
<label
for="mobile-drawer"
class="btn btn-square btn-ghost"