feat(dashboard): elevate widget cards with shadow, entrance and hover - #63509
Closed
karlitschek wants to merge 1 commit into
Closed
karlitschek wants to merge 1 commit into
karlitschek wants to merge 1 commit into
Conversation
The dashboard widgets are frosted but flat, so they float weightlessly on the background. Give them a bit more presence: - A soft drop shadow plus a hairline edge lift each card off the background. Both use theme tokens (--color-box-shadow-rgb, --color-border), so they adapt to light/dark automatically. - The board eases in once the widgets appear. It is triggered on `.panels:has(.panel)` rather than on mount, so it plays only when the widgets are actually present and cannot replay when the widget list re-renders. - Cards lift gently on hover. The hover transform and the transition are disabled while SortableJS is dragging a card, so reordering is unaffected. - All motion is disabled under prefers-reduced-motion (the elevation stays). Signed-off-by: Frank Karlitschek <frank.karlitschek@nextcloud.com> Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
karlitschek
requested review from
kristian-zendato,
skjnldsv and
sorbaugh
and removed request for
a team
August 23, 2026 15:36
Member
Author
Member
Author
Member
Author
Member
|
@karlitschek could you attach a screen recording? |
Member
|
Your PR description is AI-written, so I'm closing it as per our AI policy: https://github.com/nextcloud/.github/blob/master/AI_POLICY.md#human-written-communication |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The dashboard widgets are frosted but flat — they float a little weightlessly on the background. This adds some depth and life without changing the layout or behaviour.
--color-box-shadow-rgb,--color-border), so the effect adapts to light/dark and high-contrast automatically..panels:has(.panel)rather than on mount, so it plays only when the widgets are actually present (the container is created empty and filled slightly later) and can't replay when the widget list re-renders.translateY(-4px)) with a smooth, symmetric ease.prefers-reduced-motionthe movement (entrance + hover translate) is disabled; the elevation stays.Drag & drop
The
.panelis drag-sortable (SortableJS via vuedraggable). To avoid interfering with reordering, the hover transform is excluded on.sortable-chosen/.sortable-ghost/.sortable-drag, and the transition is switched off in those states so SortableJS drives the card unimpeded.Notes
DashboardApp.vue's scoped block.:has()andprefers-reduced-motionare already used elsewhere in the codebase.Checklist
prefers-reduced-motion