mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Improve migrate page and add card CSS (#13751)

Browse Source 
- 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 <xiaolunwen@gmail.com>
pull/13854/head^2
silverwind 4 years ago committed by GitHub
parent 1a768e547c
commit 61d6c191d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 83 additions and 54 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 30
      build/generate-svg.js
  2. 2
      public/img/svg/gitea-gitea.svg
  3. 14
      templates/repo/migrate/migrate.tmpl
  4. 44
      web_src/less/_base.less
  5. 11
      web_src/less/_repository.less
  6. 1
      web_src/less/helpers.less
  7. 34
      web_src/less/themes/theme-arc-green.less
  8. 1
      web_src/svg/gitea-gitea.svg

30
build/generate-svg.js
Unescape View File

@ -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);

2
public/img/svg/gitea-gitea.svg
Unescape View File

@ -1 +1 @@
<svg viewBox="0 0 135.467 135.467" class="svg gitea-gitea" width="16" height="16" aria-hidden="true"><path d="M27.707 33.619c-9.547-.028-22.338 6.797-21.63 23.903C7.183 84.25 31.532 86.734 41.267 86.95c1.068 5.013 12.521 22.298 21.001 23.209h37.158c22.278-1.668 38.957-75.753 26.59-76.035-20.713 1.097-32.485 1.556-42.97 1.637v23.21l-3.24-1.613-.026-21.53c-11.886-.01-22.487-.603-42.358-1.704-2.495-.027-5.98-.494-9.715-.504zm2.497 9.459c1.352 13.694 3.557 21.7 8.02 33.94-11.382-1.504-21.072-5.222-22.853-19.107-.951-7.411 2.39-15.167 14.833-14.833zm43.334 13.469a5.477 5.477 0 012.108.545l3.878 1.885-2.778 5.689a3.475 3.475 0 00-1.249.198 3.475 3.475 0 00-2.091 4.449 3.475 3.475 0 00.57 1.017l-4.787 9.798a3.475 3.475 0 00-1.15.206 3.475 3.475 0 00-2.091 4.449 3.475 3.475 0 004.44 2.091 3.475 3.475 0 002.1-4.448 3.475 3.475 0 00-.819-1.273l4.663-9.558a3.475 3.475 0 001.514-.19 3.475 3.475 0 001.24-.778c4.537 2.193 5.7 2.866 6.308 3.671.114.151.249.417.298.588.153.527.042 1.51-.281 2.455-.384 1.123-2.275 5.239-3.754 8.302a3.475 3.475 0 00-1.356.198 3.475 3.475 0 00-2.092 4.448 3.475 3.475 0 004.449 2.092 3.475 3.475 0 002.092-4.448 3.475 3.475 0 00-.72-1.174c2.773-5.883 3.781-8.196 4.143-9.749.13-.561.154-.777.157-1.537.003-.776-.011-.935-.124-1.299-.35-1.126-1.165-2.139-2.415-3.01-.942-.655-2.119-1.26-5.515-2.86-.044-.02-.087-.045-.132-.066a3.475 3.475 0 00-.198-1.273 3.475 3.475 0 00-.753-1.216l2.729-5.606 15.13 7.35a5.466 5.466 0 012.53 7.326L89.19 96.226a5.476 5.476 0 01-7.334 2.53L60.457 88.363a5.479 5.479 0 01-2.538-7.334L68.321 59.63a5.472 5.472 0 015.217-3.084z" fill="#609926" stroke="#428f29" stroke-width=".999" paint-order="markers fill stroke"/></svg>
<svg viewBox="0 0 135.467 135.467" class="svg gitea-gitea" width="16" height="16" aria-hidden="true"><path d="M27.71 33.618c-9.547-.028-22.34 6.798-21.632 23.904C7.184 84.25 31.535 86.73 41.27 86.945c1.068 5.013 12.522 22.305 21.002 23.216h37.152c22.278-1.668 38.961-75.756 26.594-76.038-46.782 2.477-49.996 2.138-88.6 0-2.495-.027-5.972-.495-9.708-.505zm2.491 9.458C31.553 56.77 33.757 64.78 38.22 77.02c-11.382-1.505-21.07-5.225-22.851-19.11-.951-7.411 2.39-15.168 14.833-14.834z" fill="#609926" stroke="#428f29"/><g fill="#fff"><rect width="34.762" height="34.762" x="87.509" y="18.292" transform="rotate(25.915)" ry="5.483"/><path d="M79.805 57.36l3.241 1.609V35.256h-3.263z"/></g><g class="detail-remove"><circle transform="rotate(-19.796)" r="3.475" cy="90.078" cx="49.065" fill="#609926"/><circle transform="rotate(-19.796)" r="3.475" cy="102.105" cx="36.81" fill="#609926"/><circle transform="rotate(-19.796)" r="3.475" cy="111.439" cx="46.484" fill="#609926"/><path fill="#609926" d="M79.54 58.936l2.402 1.172L69.98 84.605l-2.402-1.172z"/><path d="M76.558 68.116c12.976 6.396 13.013 4.102 4.891 20.908" fill="none" stroke="#609926" stroke-width="2.68"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

14
templates/repo/migrate/migrate.tmpl
Unescape View File

@ -4,17 +4,17 @@
<div class="column">
<div class="ui three stackable cards">
{{range .Services}}
<div class="ui card">
<a class="image" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
{{svg (Printf "gitea-%s" .Name) 184}}
</a>
<a class="ui card df ac" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">
{{svg (Printf "gitea-%s" .Name) 184}}
<div class="content">
<a class="header" href="{{AppSubUrl}}/repo/migrate?service_type={{.}}&org={{$.Org}}&mirror={{$.Mirror}}">{{.Title}}</a>
<div class="description">
<div class="header tc">
{{.Title}}
</div>
<div class="description tc">
{{(Printf "repo.migrate.%s.description" .Name) | $.i18n.Tr }}
</div>
</div>
</div>
</a>
{{end}}
</div>
</div>

44
web_src/less/_base.less
Unescape View File

@ -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);
}

11
web_src/less/_repository.less
Unescape View File

@ -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;
}

1
web_src/less/helpers.less
Unescape View File

@ -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; }

34
web_src/less/themes/theme-arc-green.less
Unescape View File

@ -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);
}

1
web_src/svg/gitea-gitea.svg
Unescape View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" height="32" width="32" viewBox="0 0 135.467 135.467"><path d="M27.707 33.619c-9.547-.028-22.338 6.797-21.63 23.903C7.183 84.25 31.532 86.734 41.267 86.95c1.068 5.013 12.521 22.298 21.001 23.209h37.158c22.278-1.668 38.957-75.753 26.59-76.035-20.713 1.097-32.485 1.556-42.97 1.637v23.21l-3.24-1.613-.026-21.53c-11.886-.01-22.487-.603-42.358-1.704-2.495-.027-5.98-.494-9.715-.504zm2.497 9.459c1.352 13.694 3.557 21.7 8.02 33.94-11.382-1.504-21.072-5.222-22.853-19.107-.951-7.411 2.39-15.167 14.833-14.833zm43.334 13.469a5.477 5.477 0 0 1 2.108.545l3.878 1.885-2.778 5.689a3.475 3.475 0 0 0-1.249.198 3.475 3.475 0 0 0-2.091 4.449 3.475 3.475 0 0 0 .57 1.017l-4.787 9.798a3.475 3.475 0 0 0-1.15.206 3.475 3.475 0 0 0-2.091 4.449 3.475 3.475 0 0 0 4.44 2.091 3.475 3.475 0 0 0 2.1-4.448 3.475 3.475 0 0 0-.819-1.273l4.663-9.558a3.475 3.475 0 0 0 1.514-.19 3.475 3.475 0 0 0 1.24-.778c4.537 2.193 5.7 2.866 6.308 3.671.114.151.249.417.298.588.153.527.042 1.51-.281 2.455-.384 1.123-2.275 5.239-3.754 8.302a3.475 3.475 0 0 0-1.356.198 3.475 3.475 0 0 0-2.092 4.448 3.475 3.475 0 0 0 4.449 2.092 3.475 3.475 0 0 0 2.092-4.448 3.475 3.475 0 0 0-.72-1.174c2.773-5.883 3.781-8.196 4.143-9.749.13-.561.154-.777.157-1.537.003-.776-.011-.935-.124-1.299-.35-1.126-1.165-2.139-2.415-3.01-.942-.655-2.119-1.26-5.515-2.86-.044-.02-.087-.045-.132-.066a3.475 3.475 0 0 0-.198-1.273 3.475 3.475 0 0 0-.753-1.216l2.729-5.606 15.13 7.35a5.466 5.466 0 0 1 2.53 7.326L89.19 96.226a5.476 5.476 0 0 1-7.334 2.53L60.457 88.363a5.479 5.479 0 0 1-2.538-7.334L68.321 59.63a5.472 5.472 0 0 1 5.217-3.084z" fill="#609926" stroke="#428f29" stroke-width=".9990682399999999" paint-order="markers fill stroke"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.7 KiB

Write Preview
Loading…
Cancel
Save