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

Migrate border and margin classes to Tailwind (#29828)

Browse Source 
Used all existing css vars, other migrations are 1:1.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
pull/29871/head^2
silverwind 8 months ago committed by GitHub
parent b251e608c0
commit 34290a00c4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 43 additions and 48 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. 11
      tailwind.config.js
  2. 2
      templates/devtest/flex-list.tmpl
  3. 4
      templates/devtest/gitea-ui.tmpl
  4. 2
      templates/org/header.tmpl
  5. 4
      templates/repo/issue/filter_list.tmpl
  6. 2
      templates/repo/issue/labels/label_list.tmpl
  7. 2
      templates/repo/pulls/tab_menu.tmpl
  8. 6
      templates/repo/settings/options.tmpl
  9. 3
      templates/status/500.tmpl
  10. 2
      templates/user/dashboard/navbar.tmpl
  11. 22
      web_src/css/helpers.css
  12. 9
      web_src/js/components/DashboardRepoList.vue
  13. 14
      web_src/js/components/DiffCommitSelector.vue
  14. 2
      web_src/js/components/RepoCodeFrequency.vue
  15. 2
      web_src/js/components/RepoContributors.vue
  16. 2
      web_src/js/components/RepoRecentCommits.vue
  17. 2
      web_src/js/features/repo-diff-commit.js

11
tailwind.config.js
Unescape View File

@ -55,5 +55,16 @@ export default {
current: 'currentcolor',
transparent: 'transparent',
},
borderRadius: {
'none': '0',
'sm': '2px',
'DEFAULT': 'var(--border-radius)', // 4px
'md': 'var(--border-radius-medium)', // 6px
'lg': '8px',
'xl': '12px',
'2xl': '16px',
'3xl': '24px',
'full': 'var(--border-radius-circle)', // 50%
},
},
};

2
templates/devtest/flex-list.tmpl
Unescape View File

@ -104,7 +104,7 @@
</div>
<h1>If parent provides the padding/margin space:</h1>
<div class="gt-border-secondary gt-py-4">
<div class="tw-border tw-border-secondary gt-py-4">
<div class="flex-list flex-space-fitted">
<div class="flex-item">item 1 (no padding top)</div>
<div class="flex-item">item 2 (no padding bottom)</div>

4
templates/devtest/gitea-ui.tmpl
Unescape View File

@ -95,8 +95,8 @@
<div>
<h1>Loading</h1>
<div class="is-loading small-loading-icon gt-border-secondary gt-py-2"><span>loading ...</span></div>
<div class="is-loading gt-border-secondary gt-py-4">
<div class="is-loading small-loading-icon tw-border tw-border-secondary gt-py-2"><span>loading ...</span></div>
<div class="is-loading tw-border tw-border-secondary gt-py-4">
<p>loading ...</p>
<p>loading ...</p>
<p>loading ...</p>

2
templates/org/header.tmpl
Unescape View File

@ -7,7 +7,7 @@
{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
</span>
<span class="gt-df gt-ac gt-gap-2 gt-ml-auto gt-font-16 tw-whitespace-nowrap">
<span class="gt-df gt-ac gt-gap-2 tw-ml-auto gt-font-16 tw-whitespace-nowrap">
{{if .EnableFeed}}
<a class="ui basic label button gt-mr-0" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
{{svg "octicon-rss" 24}}

4
templates/repo/issue/filter_list.tmpl
Unescape View File

@ -43,7 +43,7 @@
{{end}}
{{end}}
{{RenderLabel $.Context ctx.Locale .}}
<p class="gt-ml-auto">{{template "repo/issue/labels/label_archived" .}}</p>
<p class="tw-ml-auto">{{template "repo/issue/labels/label_archived" .}}</p>
</a>
{{end}}
</div>
@ -108,7 +108,7 @@
</div>
{{range .OpenProjects}}
<a class="{{if $.ProjectID}}{{if eq $.ProjectID .ID}}active selected{{end}}{{end}} item gt-df" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{.ID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">
{{svg .IconName 18 "gt-mr-3 gt-shrink-0"}}<span class="gt-ellipsis">{{.Title}}</span>
{{svg .IconName 18 "gt-mr-3 tw-shrink-0"}}<span class="gt-ellipsis">{{.Title}}</span>
</a>
{{end}}
{{end}}

2
templates/repo/issue/labels/label_list.tmpl
Unescape View File

@ -44,7 +44,7 @@
</div>
<div class="label-operation gt-df">
{{template "repo/issue/labels/label_archived" .}}
<div class="gt-df gt-ml-auto">
<div class="gt-df tw-ml-auto">
{{if and (not $.PageIsOrgSettingsLabels) (not $.Repository.IsArchived) (or $.CanWriteIssues $.CanWritePulls)}}
<a class="edit-label-button" href="#" data-id="{{.ID}}" data-title="{{.Name}}" {{if .Exclusive}}data-exclusive{{end}} {{if gt .ArchivedUnix 0}}data-is-archived{{end}} data-num-issues="{{.NumIssues}}" data-description="{{.Description}}" data-color={{.Color}}>{{svg "octicon-pencil"}} {{ctx.Locale.Tr "repo.issues.label_edit"}}</a>
<a class="delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{ctx.Locale.Tr "repo.issues.label_delete"}}</a>

2
templates/repo/pulls/tab_menu.tmpl
Unescape View File

@ -15,7 +15,7 @@
{{ctx.Locale.Tr "repo.pulls.tab_files"}}
<span class="ui small label">{{if .NumFiles}}{{.NumFiles}}{{else}}-{{end}}</span>
</a>
<span class="item gt-ml-auto gt-pr-0 gt-font-bold gt-df gt-ac gt-gap-3">
<span class="item tw-ml-auto gt-pr-0 gt-font-bold gt-df gt-ac gt-gap-3">
<span><span class="text green">{{if .Diff.TotalAddition}}+{{.Diff.TotalAddition}}{{end}}</span> <span class="text red">{{if .Diff.TotalDeletion}}-{{.Diff.TotalDeletion}}{{end}}</span></span>
<span class="diff-stats-bar">
<div class="diff-stats-add-bar" style="width: {{Eval 100 "*" .Diff.TotalAddition "/" "(" .Diff.TotalAddition "+" .Diff.TotalDeletion "+" 0.0 ")"}}%"></div>

6
templates/repo/settings/options.tmpl
Unescape View File

@ -116,13 +116,12 @@
<th></th>
</tr>
</thead>
{{end}}
{{if $modifyBrokenPullMirror}}
{{/* even if a repo is a pull mirror (IsMirror=true), the PullMirror might still be nil if the mirror migration is broken */}}
<tbody>
<tr>
<td colspan="4">
<div class="text red gt-py-4 gt-border-secondary-bottom">{{ctx.Locale.Tr "repo.settings.mirror_settings.direction.pull"}}: {{ctx.Locale.Tr "error.occurred"}}</div>
<div class="text red gt-py-4">{{ctx.Locale.Tr "repo.settings.mirror_settings.direction.pull"}}: {{ctx.Locale.Tr "error.occurred"}}</div>
</td>
</tr>
</tbody>
@ -201,8 +200,9 @@
</td>
</tr>
</tbody>
{{end}}{{/* end if: $modifyBrokenPullMirror / $isWorkingPullMirror */}}
</table>
{{end}}{{/* end if: IsMirror */}}
{{end}}{{/* end if .Repository.IsMirror */}}
<table class="ui table">
<thead>

3
templates/status/500.tmpl
Unescape View File

@ -16,7 +16,7 @@
</head>
<body>
<div class="full height">
<nav class="ui secondary menu gt-border-secondary-bottom">
<nav class="ui secondary menu">
<div class="ui container gt-df">
<div class="item gt-f1">
<a href="{{AppSubUrl}}/" aria-label="{{ctx.Locale.Tr "home"}}">
@ -28,6 +28,7 @@
</div>
</div>
</nav>
<div class="divider gt-my-0"></div>
<div role="main" class="page-content status-page-500">
<div class="ui container" >
<style> .ui.message.flash-message { text-align: left; } </style>

2
templates/user/dashboard/navbar.tmpl
Unescape View File

@ -78,7 +78,7 @@
{{if .ContextUser.IsOrganization}}
<div class="right menu">
<a class="{{if .PageIsNews}}active {{end}}item gt-ml-auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
<a class="{{if .PageIsNews}}active {{end}}item tw-ml-auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
{{svg "octicon-rss"}}&nbsp;{{ctx.Locale.Tr "activities"}}
</a>
{{if not .UnitIssuesGlobalDisabled}}

22
web_src/css/helpers.css
Unescape View File

@ -52,18 +52,6 @@ Gitea's private styles use `g-` prefix.
.gt-font-semibold { font-weight: var(--font-weight-semibold) !important; }
.gt-font-bold { font-weight: var(--font-weight-bold) !important; }
.gt-rounded { border-radius: var(--border-radius) !important; }
.gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
.gt-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
.gt-rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
.gt-rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
.gt-border-secondary { border: 1px solid var(--color-secondary) !important; }
.gt-border-secondary-top { border-top: 1px solid var(--color-secondary) !important; }
.gt-border-secondary-bottom { border-bottom: 1px solid var(--color-secondary) !important; }
.gt-border-secondary-left { border-left: 1px solid var(--color-secondary) !important; }
.gt-border-secondary-right { border-right: 1px solid var(--color-secondary) !important; }
.interact-fg { color: inherit !important; }
.interact-fg:hover { color: var(--color-primary) !important; }
.interact-fg:active { color: var(--color-primary-active) !important; }
@ -121,14 +109,6 @@ Gitea's private styles use `g-` prefix.
.gt-my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.gt-my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.gt-m-auto { margin: auto !important; }
.gt-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.gt-my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.gt-mt-auto { margin-top: auto !important; }
.gt-mr-auto { margin-right: auto !important; }
.gt-mb-auto { margin-bottom: auto !important; }
.gt-ml-auto { margin-left: auto !important; }
.gt-p-0 { padding: 0 !important; }
.gt-p-1 { padding: .125rem !important; }
.gt-p-2 { padding: .25rem !important; }
@ -199,8 +179,6 @@ Gitea's private styles use `g-` prefix.
.gt-gap-y-4 { row-gap: 1rem !important; }
.gt-gap-y-5 { row-gap: 2rem !important; }
.gt-shrink-0 { flex-shrink: 0 !important; }
.gt-font-12 { font-size: 12px !important }
.gt-font-13 { font-size: 13px !important }
.gt-font-14 { font-size: 14px !important }

9
web_src/js/components/DashboardRepoList.vue
Unescape View File

@ -409,7 +409,7 @@ export default sfc; // activate the IDE's Vue plugin
</div>
</overflow-menu>
</div>
<div v-if="repos.length" class="ui attached table segment gt-rounded-bottom">
<div v-if="repos.length" class="ui attached table segment tw-rounded-b">
<ul class="repo-owner-name-list">
<li class="gt-df gt-ac gt-py-3" v-for="repo, index in repos" :class="{'active': index === activeIndex}" :key="repo.id">
<a class="repo-list-link muted" :href="repo.link">
@ -425,8 +425,9 @@ export default sfc; // activate the IDE's Vue plugin
</a>
</li>
</ul>
<div v-if="showMoreReposLink" class="center gt-py-3 gt-border-secondary-top">
<div class="ui borderless pagination menu narrow">
<div v-if="showMoreReposLink" class="tw-text-center">
<div class="divider gt-my-0"/>
<div class="ui borderless pagination menu narrow gt-my-3">
<a
class="item navigation gt-py-2" :class="{'disabled': page === 1}"
@click="changePage(1)" :title="textFirstPage"
@ -466,7 +467,7 @@ export default sfc; // activate the IDE's Vue plugin
<svg-icon name="octicon-plus"/>
</a>
</h4>
<div v-if="organizations.length" class="ui attached table segment gt-rounded-bottom">
<div v-if="organizations.length" class="ui attached table segment tw-rounded-b">
<ul class="repo-owner-name-list">
<li class="gt-df gt-ac gt-py-3" v-for="org in organizations" :key="org.name">
<a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)">

14
web_src/js/components/DiffCommitSelector.vue
Unescape View File

@ -204,7 +204,7 @@ export default {
</button>
<div class="menu left transition" id="diff-commit-selector-menu" :class="{visible: menuVisible}" v-show="menuVisible" v-cloak :aria-expanded="menuVisible ? 'true': 'false'">
<div class="loading-indicator is-loading" v-if="isLoading"/>
<div v-if="!isLoading" class="vertical item gt-df gt-fc gt-gap-2" id="diff-commit-list-show-all" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()">
<div v-if="!isLoading" class="vertical item" id="diff-commit-list-show-all" role="menuitem" @keydown.enter="showAllChanges()" @click="showAllChanges()">
<div class="gt-ellipsis">
{{ locale.show_all_commits }}
</div>
@ -215,7 +215,7 @@ export default {
<!-- only show the show changes since last review if there is a review AND we are commits ahead of the last review -->
<div
v-if="lastReviewCommitSha != null" role="menuitem"
class="vertical item gt-df gt-fc gt-gap-2 gt-border-secondary-top"
class="vertical item"
:class="{disabled: commitsSinceLastReview === 0}"
@keydown.enter="changesSinceLastReviewClick()"
@click="changesSinceLastReviewClick()"
@ -227,10 +227,10 @@ export default {
{{ commitsSinceLastReview }} commits
</div>
</div>
<span v-if="!isLoading" class="info gt-border-secondary-top text light-2">{{ locale.select_commit_hold_shift_for_range }}</span>
<span v-if="!isLoading" class="info text light-2">{{ locale.select_commit_hold_shift_for_range }}</span>
<template v-for="commit in commits" :key="commit.id">
<div
class="vertical item gt-df gt-gap-2 gt-border-secondary-top" role="menuitem"
class="vertical item" role="menuitem"
:class="{selection: commit.selected, hovered: commit.hovered}"
@keydown.enter.exact="commitClicked(commit.id)"
@keydown.enter.shift.exact="commitClickedShift(commit)"
@ -285,10 +285,14 @@ export default {
width: 350px;
}
#diff-commit-selector-menu .item {
#diff-commit-selector-menu .item,
#diff-commit-selector-menu .info {
display: flex !important;
flex-direction: row;
line-height: 1.4;
padding: 7px 14px !important;
border-top: 1px solid var(--color-secondary) !important;
gap: 0.25em;
}
#diff-commit-selector-menu .item:focus {

2
web_src/js/components/RepoCodeFrequency.vue
Unescape View File

@ -148,7 +148,7 @@ export default {
{{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: `Code frequency over the history of ${repoLink.slice(1)}` }}
</div>
<div class="gt-df ui segment main-graph">
<div v-if="isLoading || errorText !== ''" class="gt-tc gt-m-auto">
<div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto">
<div v-if="isLoading">
<SvgIcon name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
{{ locale.loadingInfo }}

2
web_src/js/components/RepoContributors.vue
Unescape View File

@ -353,7 +353,7 @@ export default {
</div>
</div>
<div class="gt-df ui segment main-graph">
<div v-if="isLoading || errorText !== ''" class="gt-tc gt-m-auto">
<div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto">
<div v-if="isLoading">
<SvgIcon name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
{{ locale.loadingInfo }}

2
web_src/js/components/RepoRecentCommits.vue
Unescape View File

@ -125,7 +125,7 @@ export default {
{{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "Number of commits in the past year" }}
</div>
<div class="gt-df ui segment main-graph">
<div v-if="isLoading || errorText !== ''" class="gt-tc gt-m-auto">
<div v-if="isLoading || errorText !== ''" class="gt-tc tw-m-auto">
<div v-if="isLoading">
<SvgIcon name="octicon-sync" class="gt-mr-3 job-status-rotate"/>
{{ locale.loadingInfo }}

2
web_src/js/features/repo-diff-commit.js
Unescape View File

@ -39,7 +39,7 @@ function addLink(parent, href, text, tooltip) {
link.href = href;
link.textContent = text;
if (tooltip) {
link.classList.add('gt-border-secondary', 'gt-rounded');
link.classList.add('tw-border', 'tw-border-secondary', 'tw-rounded');
link.setAttribute('data-tooltip-content', tooltip);
}
parent.append(link);

Write Preview
Loading…
Cancel
Save