From 61d6c191d5852703048218e047d367f91533c517 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 5 Dec 2020 11:09:09 +0100 Subject: [PATCH] Improve migrate page and add card CSS (#13751) - Use original gitea logo on migrate page - Add card styles and map colors to css vars - Tweak migrate page, adding hover effect to cards Co-authored-by: Lunny Xiao --- build/generate-svg.js | 30 ++++++++++------ public/img/svg/gitea-gitea.svg | 2 +- templates/repo/migrate/migrate.tmpl | 14 ++++---- web_src/less/_base.less | 44 ++++++++++++++++++++++++ web_src/less/_repository.less | 11 ++++-- web_src/less/helpers.less | 1 + web_src/less/themes/theme-arc-green.less | 34 ++---------------- web_src/svg/gitea-gitea.svg | 1 - 8 files changed, 83 insertions(+), 54 deletions(-) delete mode 100644 web_src/svg/gitea-gitea.svg diff --git a/build/generate-svg.js b/build/generate-svg.js index 96a4f5fadbd..52d2c519ef4 100755 --- a/build/generate-svg.js +++ b/build/generate-svg.js @@ -14,10 +14,16 @@ function exit(err) { process.exit(err ? 1 : 0); } -async function processFile(file, {prefix = ''} = {}) { - let name = parse(file).name; - if (prefix) name = `${prefix}-${name}`; - if (prefix === 'octicon') name = name.replace(/-[0-9]+$/, ''); // chop of '-16' on octicons +async function processFile(file, {prefix, fullName} = {}) { + let name; + + if (fullName) { + name = fullName; + } else { + name = parse(file).name; + if (prefix) name = `${prefix}-${name}`; + if (prefix === 'octicon') name = name.replace(/-[0-9]+$/, ''); // chop of '-16' on octicons + } const svgo = new Svgo({ plugins: [ @@ -47,18 +53,20 @@ async function processFile(file, {prefix = ''} = {}) { await writeFile(resolve(outputDir, `${name}.svg`), data); } +function processFiles(pattern, opts) { + return glob(pattern).map((file) => processFile(file, opts)); +} + async function main() { try { await mkdir(outputDir); } catch {} - for (const file of glob('../node_modules/@primer/octicons/build/svg/*-16.svg')) { - await processFile(file, {prefix: 'octicon'}); - } - - for (const file of glob('../web_src/svg/*.svg')) { - await processFile(file); - } + await Promise.all([ + ...processFiles('../node_modules/@primer/octicons/build/svg/*-16.svg', {prefix: 'octicon'}), + ...processFiles('../web_src/svg/*.svg'), + ...processFiles('../assets/logo.svg', {fullName: 'gitea-gitea'}), + ]); } main().then(exit).catch(exit); diff --git a/public/img/svg/gitea-gitea.svg b/public/img/svg/gitea-gitea.svg index 7ccd7973a77..fa9dce064cf 100644 --- a/public/img/svg/gitea-gitea.svg +++ b/public/img/svg/gitea-gitea.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/templates/repo/migrate/migrate.tmpl b/templates/repo/migrate/migrate.tmpl index 8ada46e1d7d..602546148fd 100644 --- a/templates/repo/migrate/migrate.tmpl +++ b/templates/repo/migrate/migrate.tmpl @@ -4,17 +4,17 @@
{{range .Services}} -
- - {{svg (Printf "gitea-%s" .Name) 184}} - + + {{svg (Printf "gitea-%s" .Name) 184}}
- {{.Title}} -
+
+ {{.Title}} +
+
{{(Printf "repo.migrate.%s.description" .Name) | $.i18n.Tr }}
-
+ {{end}}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 884fb69abc5..6fee330c576 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -94,10 +94,12 @@ --color-hover: #0000000a; --color-active: #00000010; --color-menu: #ffffff; + --color-card: #ffffff; --color-markdown-table-row: #00000008; --color-markdown-code-block: #00000010; --color-button: #ffffff; --color-code-bg: #ffffff; + --color-shadow: #00000024; } :root:lang(ja) { @@ -374,6 +376,48 @@ a.muted:hover, box-shadow: -1px -1px 0 0 var(--color-secondary); } +.ui.cards > .card, +.ui.card { + background: var(--color-card); + border: 1px solid var(--color-secondary); + box-shadow: none; +} + +.ui.cards > .card > .content, +.ui.card > .content { + border-color: var(--color-secondary); +} + +.ui.cards > .card > .extra, +.ui.card > .extra, +.ui.cards > .card > .extra a:not(.ui), +.ui.card > .extra a:not(.ui) { + color: var(--color-text); +} + +.ui.cards > .card > .extra a:not(.ui):hover, +.ui.card > .extra a:not(.ui):hover { + color: var(--color-primary); +} + +.ui.cards > .card > .content > .header, +.ui.card > .content > .header { + color: var(--color-text); +} + +.ui.cards > .card > .content > .description, +.ui.card > .content > .description { + color: var(--color-text); +} + +.ui.cards a.card:hover, +.ui.link.cards .card:not(.icon):hover, +a.ui.card:hover, +.ui.link.card:hover { + border: 1px solid var(--color-secondary); + background: var(--color-card); +} + .ui.progress[data-percent="0"] .bar .progress { color: var(--color-text); } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 7c0f3819536..1ab90e5667c 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -3206,6 +3206,13 @@ td.blob-excerpt { } } -.migrate .cards .card { - text-align: center; +.repository.migrate .card { + transition: all .1s ease-in-out; + box-shadow: none !important; + border: 1px solid var(--color-secondary); +} + +.repository.migrate .card:hover { + transform: scale(105%); + box-shadow: 0 .5rem 1rem var(--color-shadow) !important; } diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less index 77c81a62e12..7e299339f85 100644 --- a/web_src/less/helpers.less +++ b/web_src/less/helpers.less @@ -1,6 +1,7 @@ .df { display: flex !important; } .dif { display: inline-flex !important; } .ac { align-items: center !important; } +.tc { text-align: center !important; } .jc { justify-content: center !important; } .js { justify-content: flex-start !important; } .je { justify-content: flex-end !important; } diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 884548accbb..17c435788b7 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -89,10 +89,12 @@ --color-hover: #ffffff0d; --color-active: #ffffff14; --color-menu: #2e323e; + --color-card: #2e323e; --color-markdown-table-row: #ffffff06; --color-markdown-code-block: #2a2e3a; --color-button: #353846; --color-code-bg: #2a2e3a; + --color-shadow: #00000060; } /* LineTableTD */ @@ -817,22 +819,6 @@ td.blob-hunk { background: #353945; } -.ui.card, -.ui.cards > .card { - background: #353945; - box-shadow: 0 0 0 1px var(--color-secondary); -} - -.ui.card > .content > .header, -.ui.cards > .card > .content > .header { - color: #dbdbdb; -} - -.ui.card > .extra a:not(.ui), -.ui.cards > .card > .extra a:not(.ui) { - color: #87ab63; -} - .ui .text.black { color: var(--color-secondary-dark-6); } @@ -1366,19 +1352,3 @@ img[src$="/img/matrix.svg"] { border: 1px solid rgba(121, 71, 66, .5) !important; border-bottom: none !important; } - -.migrate .cards .card { - text-align: center; -} - -.migrate .cards .card .content a { - color: rgb(158, 158, 158) !important; -} - -.migrate .cards .card .content a:hover { - color: rgb(255, 255, 255) !important; -} - -.migrate .cards .card .content .description { - color: rgb(158, 158, 158); -} diff --git a/web_src/svg/gitea-gitea.svg b/web_src/svg/gitea-gitea.svg deleted file mode 100644 index e2762af51ba..00000000000 --- a/web_src/svg/gitea-gitea.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file