feat(ui): redesign migration selection screen (#6795)

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

@ -1,31 +1,26 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository new migrate">
<div class="ui middle very relaxed page grid">
<div class="column">
{{template "repo/migrate/helper" .}}
<div class="ui cards migrate-entries">
{{range .Services}}
<a class="ui card migrate-entry tw-flex tw-items-center" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
{{if eq .Name "github"}}
{{svg "octicon-mark-github" 184 "tw-p-4"}}
{{else if eq .Name "gitlab"}}
{{svg "gitea-gitlab" 184 "tw-p-4"}}
{{else if eq .Name "gitbucket"}}
{{svg "gitea-gitbucket" 184 "tw-p-4"}}
{{else}}
{{svg (printf "gitea-%s" .Name) 184}}
{{end}}
<div class="content">
<div class="header tw-text-center">
{{.Title}}
</div>
<div class="description tw-text-center">
{{ctx.Locale.Tr (printf "repo.migrate.%s.description" .Name)}}
</div>
<div class="ui container">
<h2 class="tw-mt-4">Migrate repository</h1>
{{template "repo/migrate/helper" .}}
<div class="migrate-entries">
{{range .Services}}
<a class="migrate-entry tw-items-center" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
{{if eq .Name "github"}}
{{svg "octicon-mark-github" 184}}
{{else}}
{{svg (printf "gitea-%s" .Name) 184}}
{{end}}
<div class="content">
<h3>
{{.Title}}
</h3>
<div class="description">
{{ctx.Locale.Tr (printf "repo.migrate.%s.description" .Name)}}
</div>
</a>
{{end}}
</div>
</div>
</a>
{{end}}
</div>
</div>
</div>