-
-
- {{template "repo/migrate/helper" .}} -
- {{range .Services}} - - {{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}} -
-
- {{.Title}} -
-
- {{ctx.Locale.Tr (printf "repo.migrate.%s.description" .Name)}} -
+
+

Migrate repository

+ {{template "repo/migrate/helper" .}} +
+ {{range .Services}} + + {{if eq .Name "github"}} + {{svg "octicon-mark-github" 184}} + {{else}} + {{svg (printf "gitea-%s" .Name) 184}} + {{end}} +
+

+ {{.Title}} +

+
+ {{ctx.Locale.Tr (printf "repo.migrate.%s.description" .Name)}}
- - {{end}} -
+
+ + {{end}}
diff --git a/tests/e2e/repo-migrate.test.e2e.ts b/tests/e2e/repo-migrate.test.e2e.ts index b6541179f0..f0be73e777 100644 --- a/tests/e2e/repo-migrate.test.e2e.ts +++ b/tests/e2e/repo-migrate.test.e2e.ts @@ -7,6 +7,24 @@ import {test, save_visual, test_context, dynamic_id} from './utils_e2e.ts'; test.use({user: 'user2'}); +test('Migration type seleciton screen', async ({page}) => { + await page.goto('/repo/migrate'); + + // For branding purposes, it is desired that `gitea-` prefixes in SVGs are + // replaced with something like `productlogo-`. + await expect(page.locator('svg.gitea-git')).toBeVisible(); + await expect(page.locator('svg.octicon-mark-github')).toBeVisible(); + await expect(page.locator('svg.gitea-gitlab')).toBeVisible(); + await expect(page.locator('svg.gitea-forgejo')).toBeVisible(); + await expect(page.locator('svg.gitea-gitea')).toBeVisible(); + await expect(page.locator('svg.gitea-gogs')).toBeVisible(); + await expect(page.locator('svg.gitea-onedev')).toBeVisible(); + await expect(page.locator('svg.gitea-gitbucket')).toBeVisible(); + await expect(page.locator('svg.gitea-codebase')).toBeVisible(); + + await save_visual(page); +}); + test('Migration Repo Name detection', async ({page}, workerInfo) => { test.skip(workerInfo.project.name === 'Mobile Safari', 'Flaky actionability checks on Mobile Safari'); diff --git a/web_src/css/base.css b/web_src/css/base.css index bfe8cd54ae..dcc33c37ff 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -18,6 +18,7 @@ /* other variables */ --border-radius: 4px; --border-radius-medium: 6px; + --border-radius-large: 25px; --border-radius-full: 99999px; /* TODO: use calc(infinity * 1px) */ --opacity-disabled: 0.55; --height-loading: 16rem; @@ -1282,10 +1283,6 @@ svg.text.purple, width: 100%; } -.migrate .svg.gitea-git { - color: var(--color-git); -} - .color-icon { display: inline-block; border-radius: var(--border-radius-full); diff --git a/web_src/css/index.css b/web_src/css/index.css index eec17eab13..0a5a0180aa 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -75,6 +75,7 @@ @import "./explore.css"; @import "./review.css"; @import "./actions.css"; +@import "./migrate.css"; @tailwind utilities; @import "./helpers.css"; diff --git a/web_src/css/migrate.css b/web_src/css/migrate.css new file mode 100644 index 0000000000..d5e909b42d --- /dev/null +++ b/web_src/css/migrate.css @@ -0,0 +1,68 @@ +.migrate .svg.gitea-git { + --git-logo-color: #f05133; + color: var(--git-logo-color); +} + +.migrate-entries { + display: grid; + /* Limited to 4 cols by 1280px container */ + grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); + gap: 1.5rem; +} + +.migrate-entry svg { + padding: 1.5rem; +} + +.migrate-entry { + display: flex; + flex-direction: column; + color: var(--color-text); + background: var(--color-card); + border: 1px solid var(--fancy-card-border); + border-radius: var(--border-radius-large); + transition: all 0.1s ease-in-out; +} + +.migrate-entry:hover { + transform: scale(105%); + box-shadow: 0 0.5rem 1rem var(--color-shadow); + color: var(--color-text); +} + +.migrate-entry .content { + width: 100%; + margin-top: .5rem; + padding: 1rem; + flex: 1; +} + +.migrate-entry .description { + margin-top: .5rem; + text-wrap: balance; +} + +/* Desktop layout features */ +@media (min-width: 599.98px) { + .migrate-entry .content { + text-align: center; + border-top: 1px solid var(--fancy-card-border); + border-radius: 0 0 var(--border-radius-large) var(--border-radius-large); + background: var(--fancy-card-bg); + } +} + +/* Mobile layout features */ +@media (max-width: 600px) { + .migrate-entries { + grid-template-columns: repeat(1, 1fr); + } + .migrate-entry { + flex-direction: row; + } + .migrate-entry svg { + height: 100%; + width: 100%; + max-width: 128px; + } +} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index f498a992ed..80fd2be00d 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -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; diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css index c9c538502d..b1b80510d4 100644 --- a/web_src/css/themes/theme-forgejo-dark.css +++ b/web_src/css/themes/theme-forgejo-dark.css @@ -196,7 +196,6 @@ --color-orange-badge: #ea580c; --color-orange-badge-bg: #ea580c22; --color-orange-badge-hover-bg: #ea580c44; - --color-git: #f05133; /* Icon colors (PR/Issue/...) */ --color-icon-green: #3fb950; --color-icon-red: #f85149; @@ -228,6 +227,8 @@ --color-active: var(--steel-650); --color-menu: var(--steel-700); --color-card: var(--steel-700); + --fancy-card-bg: var(--steel-650); + --fancy-card-border: var(--steel-600); --color-markup-table-row: #ffffff06; --color-markup-code-block: var(--steel-800); --color-markup-code-inline: var(--steel-850); diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css index a5e4ffe050..277b52165f 100644 --- a/web_src/css/themes/theme-forgejo-light.css +++ b/web_src/css/themes/theme-forgejo-light.css @@ -212,7 +212,6 @@ --color-orange-badge: #ea580c; --color-orange-badge-bg: #ea580c22; --color-orange-badge-hover-bg: #ea580c44; - --color-git: #f05133; /* Icon colors (PR/Issue/...) */ --color-icon-green: var(--color-green-light); --color-icon-red: var(--color-red-light); @@ -244,6 +243,8 @@ --color-active: #d4d4d8aa; --color-menu: var(--zinc-100); --color-card: var(--zinc-50); + --fancy-card-bg: var(--zinc-100); + --fancy-card-border: var(--zinc-200); --color-markup-table-row: #ffffff06; --color-markup-code-block: var(--zinc-150); --color-markup-code-inline: var(--zinc-200); diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 6ad6efe748..7ba428f0b7 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -179,7 +179,6 @@ --color-orange-badge: #f2711c; --color-orange-badge-bg: #f2711c1a; --color-orange-badge-hover-bg: #f2711c4d; - --color-git: #f05133; /* Icon colors (PR/Issue/...) */ --color-icon-green: var(--color-green); --color-icon-red: var(--color-red); @@ -209,6 +208,8 @@ --color-active: #e8e8ff24; --color-menu: #151a1e; --color-card: #151a1e; + --fancy-card-bg: #14171a; + --fancy-card-border: #3b444a; --color-markup-table-row: #e8e8ff0f; --color-markup-code-block: #e8e8ff12; --color-markup-code-inline: #e8e8ff28; diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index 830b96febe..8ad89f44a4 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -179,7 +179,6 @@ --color-orange-badge: #f2711c; --color-orange-badge-bg: #f2711c1a; --color-orange-badge-hover-bg: #f2711c4d; - --color-git: #f05133; /* Icon colors (PR/Issue/...) */ --color-icon-green: var(--color-green); --color-icon-red: var(--color-red); @@ -209,6 +208,8 @@ --color-active: #00001714; --color-menu: #f8f9fb; --color-card: #f8f9fb; + --fancy-card-bg: #ffffff; + --fancy-card-border: #d0d7de; --color-markup-table-row: #0030600a; --color-markup-code-block: #00306010; --color-markup-code-inline: #00306012; diff --git a/web_src/svg/gitea-forgejo.svg b/web_src/svg/gitea-forgejo.svg index e00e5963cf..9daa1ff8f3 100644 --- a/web_src/svg/gitea-forgejo.svg +++ b/web_src/svg/gitea-forgejo.svg @@ -1,5 +1,5 @@ -