github-starred/vikunja
2
0
Fork 0
mirror of https://github.com/go-vikunja/vikunja.git synced 2026-05-08 12:57:52 -05:00
Code Issues 690 Packages Projects Releases 11 Wiki Activity

[PR #2640] [MERGED] refactor(frontend): migrate .box to Card and drop Bulma elements/box #8424

New Issue
Closed
opened 2026-04-20 18:12:38 -05:00 by GiteaMirror · 0 comments
GiteaMirror commented 2026-04-20 18:12:38 -05:00
Owner
Copy Link

📋 Pull Request Information

Original PR: https://github.com/go-vikunja/vikunja/pull/2640
Author: @tink-bot
Created: 4/15/2026
Status: ✅ Merged
Merged: 4/16/2026
Merged by: @kolaente

Base: main ← Head: refactor-box-to-card

📝 Commits (3)

  • 84cc8ef refactor(frontend): migrate .box callsites to and drop Bulma elements/box
  • 8789ae8 fix(frontend): remove card padding on teams list to match original .box layout
  • 0c33f9e fix(frontend): trim teams list margin and clip items to card corners

📊 Changes

5 files changed (+28 additions, -23 deletions)

View changed files

📝 frontend/src/components/home/ContentLinkShare.vue (+3 -2)
📝 frontend/src/styles/global.scss (+1 -1)
📝 frontend/src/views/sharing/LinkSharingAuth.vue (+3 -5)
📝 frontend/src/views/teams/ListTeams.vue (+19 -13)
📝 frontend/tests/e2e/sharing/team.spec.ts (+2 -2)

📄 Description

Summary

Migrates the three remaining .box callsites in the frontend onto the existing <Card> component and drops the bulma-css-variables/sass/elements/box SCSS import. Consolidates surfaces onto a single primitive.

Migrated:

  • frontend/src/views/sharing/LinkSharingAuth.vue - password-required form
  • frontend/src/components/home/ContentLinkShare.vue - link-share content wrapper (preserves has-text-start view classes on <Card>)
  • frontend/src/views/teams/ListTeams.vue - team list

Also:

  • Drops @import "bulma-css-variables/sass/elements/box" from frontend/src/styles/global.scss (commented out matching the style of other dropped imports above/below).
  • Updates frontend/tests/e2e/sharing/team.spec.ts selector from .teams.box to ul.teams since .box no longer exists on that element.

Visual differences (intentional, not regressions)

.box and <Card> are not pixel-identical. The migrated surfaces now:

  • Gain a 1px solid var(--card-border-color) border (.box had none)
  • Smaller border-radius ($radius vs Bulma's var(--radius-large))
  • Smaller box-shadow (var(--shadow-sm) vs Bulma's var(--shadow))
  • margin-block-end: 1rem
  • Padding moves from outer surface (1.25rem) to .card-content (1.5rem)

These match the rest of the app's surfaces.

ListTeams structural note

The <ul class="teams"> previously sat directly on .box. Inside <Card>, it now lives inside .card-content > .content > ul. The scoped .teams styles only target ul.teams (its own padding/margin/overflow) and its <li> children (border, hover, link styling) - none depend on being a direct .box descendant. No style lifting was required; just dropped the box class and wrapped the <ul> in <Card>.

Verification

  • pnpm test:unit - 35 files, 969 tests passing
  • pnpm lint - 0 errors (4 pre-existing axios warnings unrelated)
  • pnpm lint:styles - clean
  • Visually verified /teams (ListTeams) in browser: list renders correctly inside Card with new border, padding, and hover states intact.
  • LinkSharingAuth and ContentLinkShare are share-link gated and not easily reachable without provisioning a real share - left to reviewer. Both are like-for-like wrapper swaps preserving all child markup.

Test plan

  • Visit /teams while logged in - verify the team list renders inside a Card surface (border, padding, hover states).
  • Visit a password-protected share link - verify the password prompt still renders inside a Card.
  • Visit any share link - verify the embedded content wrapper (was .box has-text-start view) still renders correctly with has-text-start view classes preserved on the Card.

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/go-vikunja/vikunja/pull/2640 **Author:** [@tink-bot](https://github.com/tink-bot) **Created:** 4/15/2026 **Status:** ✅ Merged **Merged:** 4/16/2026 **Merged by:** [@kolaente](https://github.com/kolaente) **Base:** `main` ← **Head:** `refactor-box-to-card` --- ### 📝 Commits (3) - [`84cc8ef`](https://github.com/go-vikunja/vikunja/commit/84cc8ef2be9baa8f72a98b76edd6795185cf7757) refactor(frontend): migrate .box callsites to <Card> and drop Bulma elements/box - [`8789ae8`](https://github.com/go-vikunja/vikunja/commit/8789ae8ad5ed719257983c9187b894e779a3afb9) fix(frontend): remove card padding on teams list to match original .box layout - [`0c33f9e`](https://github.com/go-vikunja/vikunja/commit/0c33f9e35ef19634488a1bd3c1456db7af39c5bc) fix(frontend): trim teams list margin and clip items to card corners ### 📊 Changes **5 files changed** (+28 additions, -23 deletions) <details> <summary>View changed files</summary> 📝 `frontend/src/components/home/ContentLinkShare.vue` (+3 -2) 📝 `frontend/src/styles/global.scss` (+1 -1) 📝 `frontend/src/views/sharing/LinkSharingAuth.vue` (+3 -5) 📝 `frontend/src/views/teams/ListTeams.vue` (+19 -13) 📝 `frontend/tests/e2e/sharing/team.spec.ts` (+2 -2) </details> ### 📄 Description ## Summary Migrates the three remaining `.box` callsites in the frontend onto the existing `<Card>` component and drops the `bulma-css-variables/sass/elements/box` SCSS import. Consolidates surfaces onto a single primitive. Migrated: - `frontend/src/views/sharing/LinkSharingAuth.vue` - password-required form - `frontend/src/components/home/ContentLinkShare.vue` - link-share content wrapper (preserves `has-text-start view` classes on `<Card>`) - `frontend/src/views/teams/ListTeams.vue` - team list Also: - Drops `@import "bulma-css-variables/sass/elements/box"` from `frontend/src/styles/global.scss` (commented out matching the style of other dropped imports above/below). - Updates `frontend/tests/e2e/sharing/team.spec.ts` selector from `.teams.box` to `ul.teams` since `.box` no longer exists on that element. ## Visual differences (intentional, not regressions) `.box` and `<Card>` are not pixel-identical. The migrated surfaces now: - Gain a `1px solid var(--card-border-color)` border (`.box` had none) - Smaller `border-radius` (`$radius` vs Bulma's `var(--radius-large)`) - Smaller `box-shadow` (`var(--shadow-sm)` vs Bulma's `var(--shadow)`) - `margin-block-end: 1rem` - Padding moves from outer surface (1.25rem) to `.card-content` (1.5rem) These match the rest of the app's surfaces. ## ListTeams structural note The `<ul class="teams">` previously sat directly on `.box`. Inside `<Card>`, it now lives inside `.card-content > .content > ul`. The scoped `.teams` styles only target `ul.teams` (its own padding/margin/overflow) and its `<li>` children (border, hover, link styling) - none depend on being a direct `.box` descendant. No style lifting was required; just dropped the `box` class and wrapped the `<ul>` in `<Card>`. ## Verification - `pnpm test:unit` - 35 files, 969 tests passing - `pnpm lint` - 0 errors (4 pre-existing axios warnings unrelated) - `pnpm lint:styles` - clean - Visually verified `/teams` (ListTeams) in browser: list renders correctly inside Card with new border, padding, and hover states intact. - LinkSharingAuth and ContentLinkShare are share-link gated and not easily reachable without provisioning a real share - left to reviewer. Both are like-for-like wrapper swaps preserving all child markup. ## Test plan - [ ] Visit `/teams` while logged in - verify the team list renders inside a Card surface (border, padding, hover states). - [ ] Visit a password-protected share link - verify the password prompt still renders inside a Card. - [ ] Visit any share link - verify the embedded content wrapper (was `.box has-text-start view`) still renders correctly with `has-text-start view` classes preserved on the Card. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2026-04-20 18:12:38 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
area/api
area/attachments
area/auth
area/avatars
area/backup-restore
area/caldav
area/calendar-view
area/comments
area/config
area/database
area/desktop
area/docker
area/email
area/favorites
area/filters
area/frontend
area/gantt
area/i18n
area/import-export
area/internal-code
area/kanban
area/labels
area/list-view
area/mobile
area/notifications
area/permissions
area/projects
area/pwa
area/recurring-tasks
area/reminders
area/search
area/shortcuts
area/subtasks
area/sync
area/table-view
area/task-editor
area/task-metadata
area/task-relations
area/teams
area/theming
area/time-tracking
area/typesense
area/views
area/webhooks
bug
changes requested
concern/accessibility
concern/performance
concern/regression
concern/ux
confirmed
db/mysql
dependencies
enhancement
good first issue
help wanted
integration/inbound
integration/outbound
kind/bug
kind/feature
needs reproduction
pull-request
Mirrored from GitHub Pull Request
 question
security
support
upstream issue
waiting for reply
wontfix
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/vikunja#8424
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?