Skip to content

Commit a0c9e81

Browse files
author
0ko
committed
feat(ui): redesign migration selection screen (go-gitea#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 <[email protected]> Reviewed-by: Otto <[email protected]>
1 parent 78e56ee commit a0c9e81

File tree

17 files changed

+149
-94
lines changed

17 files changed

+149
-94
lines changed

‎public/assets/img/svg/gitea-forgejo.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎public/assets/img/svg/gitea-git.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎public/assets/img/svg/gitea-gogs.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎services/webhook/default.go‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,7 @@ func (dh defaultHandler) Type() webhook_module.HookType {
3636

3737
func (dh defaultHandler) Icon(size int) template.HTML {
3838
if dh.forgejo {
39-
// forgejo.svg is not in web_src/svg/, so svg.RenderHTML does not work
40-
return shared.ImgIcon("forgejo.svg", size)
39+
return svg.RenderHTML("gitea-forgejo", size, "img")
4140
}
4241
return svg.RenderHTML("gitea-gitea", size, "img")
4342
}

‎templates/repo/migrate/migrate.tmpl‎

Lines changed: 20 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,26 @@
11
{{template "base/head" .}}
22
<div role="main" aria-label="{{.Title}}" class="page-content repository new migrate">
3-
<div class="ui middle very relaxed page grid">
4-
<div class="column">
5-
{{template "repo/migrate/helper" .}}
6-
<div class="ui cards migrate-entries">
7-
{{range .Services}}
8-
<a class="ui card migrate-entry tw-flex tw-items-center" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
9-
{{if eq .Name "github"}}
10-
{{svg "octicon-mark-github" 184 "tw-p-4"}}
11-
{{else if eq .Name "gitlab"}}
12-
{{svg "gitea-gitlab" 184 "tw-p-4"}}
13-
{{else if eq .Name "gitbucket"}}
14-
{{svg "gitea-gitbucket" 184 "tw-p-4"}}
15-
{{else}}
16-
{{svg (printf "gitea-%s" .Name) 184}}
17-
{{end}}
18-
<div class="content">
19-
<div class="header tw-text-center">
20-
{{.Title}}
21-
</div>
22-
<div class="description tw-text-center">
23-
{{ctx.Locale.Tr (printf "repo.migrate.%s.description" .Name)}}
24-
</div>
3+
<div class="ui container">
4+
<h2 class="tw-mt-4">Migrate repository</h1>
5+
{{template "repo/migrate/helper" .}}
6+
<div class="migrate-entries">
7+
{{range .Services}}
8+
<a class="migrate-entry tw-items-center" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
9+
{{if eq .Name "github"}}
10+
{{svg "octicon-mark-github" 184}}
11+
{{else}}
12+
{{svg (printf "gitea-%s" .Name) 184}}
13+
{{end}}
14+
<div class="content">
15+
<h3>
16+
{{.Title}}
17+
</h3>
18+
<div class="description">
19+
{{ctx.Locale.Tr (printf "repo.migrate.%s.description" .Name)}}
2520
</div>
26-
</a>
27-
{{end}}
28-
</div>
21+
</div>
22+
</a>
23+
{{end}}
2924
</div>
3025
</div>
3126
</div>

‎tests/e2e/repo-migrate.test.e2e.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,24 @@ import {test, save_visual, test_context, dynamic_id} from './utils_e2e.ts';
77

88
test.use({user: 'user2'});
99

10+
test('Migration type seleciton screen', async ({page}) => {
11+
await page.goto('/repo/migrate');
12+
13+
// For branding purposes, it is desired that `gitea-` prefixes in SVGs are
14+
// replaced with something like `productlogo-`.
15+
await expect(page.locator('svg.gitea-git')).toBeVisible();
16+
await expect(page.locator('svg.octicon-mark-github')).toBeVisible();
17+
await expect(page.locator('svg.gitea-gitlab')).toBeVisible();
18+
await expect(page.locator('svg.gitea-forgejo')).toBeVisible();
19+
await expect(page.locator('svg.gitea-gitea')).toBeVisible();
20+
await expect(page.locator('svg.gitea-gogs')).toBeVisible();
21+
await expect(page.locator('svg.gitea-onedev')).toBeVisible();
22+
await expect(page.locator('svg.gitea-gitbucket')).toBeVisible();
23+
await expect(page.locator('svg.gitea-codebase')).toBeVisible();
24+
25+
await save_visual(page);
26+
});
27+
1028
test('Migration Repo Name detection', async ({page}, workerInfo) => {
1129
test.skip(workerInfo.project.name === 'Mobile Safari', 'Flaky actionability checks on Mobile Safari');
1230

‎web_src/css/base.css‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
/* other variables */
1919
--border-radius: 4px;
2020
--border-radius-medium: 6px;
21+
--border-radius-large: 25px;
2122
--border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */
2223
--opacity-disabled: 0.55;
2324
--height-loading: 16rem;
@@ -1282,10 +1283,6 @@ svg.text.purple,
12821283
width: 100%;
12831284
}
12841285

1285-
.migrate .svg.gitea-git {
1286-
color: var(--color-git);
1287-
}
1288-
12891286
.color-icon {
12901287
display: inline-block;
12911288
border-radius: var(--border-radius-full);

‎web_src/css/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
@import "./explore.css";
7676
@import "./review.css";
7777
@import "./actions.css";
78+
@import "./migrate.css";
7879

7980
@tailwind utilities;
8081
@import "./helpers.css";

‎web_src/css/migrate.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.migrate .svg.gitea-git {
2+
--git-logo-color: #f05133;
3+
color: var(--git-logo-color);
4+
}
5+
6+
.migrate-entries {
7+
display: grid;
8+
/* Limited to 4 cols by 1280px container */
9+
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
10+
gap: 1.5rem;
11+
}
12+
13+
.migrate-entry svg {
14+
padding: 1.5rem;
15+
}
16+
17+
.migrate-entry {
18+
display: flex;
19+
flex-direction: column;
20+
color: var(--color-text);
21+
background: var(--color-card);
22+
border: 1px solid var(--fancy-card-border);
23+
border-radius: var(--border-radius-large);
24+
transition: all 0.1s ease-in-out;
25+
}
26+
27+
.migrate-entry:hover {
28+
transform: scale(105%);
29+
box-shadow: 0 0.5rem 1rem var(--color-shadow);
30+
color: var(--color-text);
31+
}
32+
33+
.migrate-entry .content {
34+
width: 100%;
35+
margin-top: .5rem;
36+
padding: 1rem;
37+
flex: 1;
38+
}
39+
40+
.migrate-entry .description {
41+
margin-top: .5rem;
42+
text-wrap: balance;
43+
}
44+
45+
/* Desktop layout features */
46+
@media (min-width: 599.98px) {
47+
.migrate-entry .content {
48+
text-align: center;
49+
border-top: 1px solid var(--fancy-card-border);
50+
border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
51+
background: var(--fancy-card-bg);
52+
}
53+
}
54+
55+
/* Mobile layout features */
56+
@media (max-width: 600px) {
57+
.migrate-entries {
58+
grid-template-columns: repeat(1, 1fr);
59+
}
60+
.migrate-entry {
61+
flex-direction: row;
62+
}
63+
.migrate-entry svg {
64+
height: 100%;
65+
width: 100%;
66+
max-width: 128px;
67+
}
68+
}

‎web_src/css/repo.css‎

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2764,37 +2764,6 @@ tbody.commit-list {
27642764
border-left: 1px solid var(--color-secondary);
27652765
}
27662766

2767-
.migrate-entries {
2768-
display: grid !important;
2769-
grid-template-columns: repeat(3, 1fr);
2770-
gap: 25px;
2771-
margin: 0 !important;
2772-
}
2773-
2774-
@media (max-width: 767.98px) {
2775-
.migrate-entries {
2776-
grid-template-columns: repeat(1, 1fr);
2777-
}
2778-
}
2779-
2780-
.migrate-entry {
2781-
transition: all 0.1s ease-in-out;
2782-
box-shadow: none !important;
2783-
border: 1px solid var(--color-secondary);
2784-
color: var(--color-text) !important;
2785-
width: auto !important;
2786-
margin: 0 !important;
2787-
}
2788-
2789-
.migrate-entry:hover {
2790-
transform: scale(105%);
2791-
box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
2792-
}
2793-
2794-
.migrate-entry .description {
2795-
text-wrap: balance;
2796-
}
2797-
27982767
.commits-table .commits-table-right form {
27992768
display: flex;
28002769
align-items: center;

0 commit comments

Comments
 (0)