feat(ui): redesign migration selection screen (#6795)
Some checks are pending
/ release (push) Waiting to run
testing / backend-checks (push) Has been skipped
testing / frontend-checks (push) Has been skipped
testing / test-unit (push) Has been skipped
testing / test-e2e (push) Has been skipped
testing / test-mysql (push) Has been skipped
testing / test-pgsql (push) Has been skipped
testing / test-sqlite (push) Has been skipped
testing / test-remote-cacher (redis) (push) Has been skipped
testing / test-remote-cacher (valkey) (push) Has been skipped
testing / test-remote-cacher (garnet) (push) Has been skipped
testing / test-remote-cacher (redict) (push) Has been skipped
testing / security-check (push) Has been skipped

Ref https://codeberg.org/forgejo/design/issues/9.

Changes:
* Updated SVGs which had inconsistent paddings making them look off
* Better usability on mobile
* Better space efficiency on desktop, up to 4 columns
* Nice responsive design
* Less bland look on desktop. The borders were already here but invisible in Forgejo dark theme

Preview:
* https://codeberg.org/attachments/3c9e10ae-3315-46e5-b8bb-8021f6fd8936
* https://codeberg.org/attachments/8196ad89-5ab6-443a-98ce-a70dcc75bca9
* https://codeberg.org/attachments/24f52a14-2ac4-4949-8108-55c34bd3c650

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6795
Reviewed-by: Beowulf <beowulf@beocode.eu>
Reviewed-by: Otto <otto@codeberg.org>
This commit is contained in:
0ko 2025-04-19 13:51:35 +00:00
parent 78e56ee2f7
commit a0c9e81611
17 changed files with 149 additions and 94 deletions

View file

@ -2764,37 +2764,6 @@ tbody.commit-list {
border-left: 1px solid var(--color-secondary);
}
.migrate-entries {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin: 0 !important;
}
@media (max-width: 767.98px) {
.migrate-entries {
grid-template-columns: repeat(1, 1fr);
}
}
.migrate-entry {
transition: all 0.1s ease-in-out;
box-shadow: none !important;
border: 1px solid var(--color-secondary);
color: var(--color-text) !important;
width: auto !important;
margin: 0 !important;
}
.migrate-entry:hover {
transform: scale(105%);
box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
}
.migrate-entry .description {
text-wrap: balance;
}
.commits-table .commits-table-right form {
display: flex;
align-items: center;