Replace 10 more gt- classes with tw- (#29945)
Likely the biggest change of the tailwind refactors. Only thing of note is that `tw-flex-1` resolves to `flex: 1 1 0%` while our `gt-f1` was `flex: 1 1 0`, I don't think it will make any difference. Commands I've ran: ```sh perl -p -i -e 's#gt-vm#tw-align-middle#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-fw#tw-flex-wrap#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-f1#tw-flex-1#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-fc#tw-flex-col#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-sb#tw-justify-between#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-je#tw-justify-end#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-jc#tw-justify-center#g' web_src/js/**/* templates/**/* models/**/* perl -p -i -e 's#gt-ac#tw-content-center#g' web_src/js/**/* templates/**/* models/**/* tests/**/* perl -p -i -e 's#gt-df#tw-flex#g' web_src/js/**/* templates/**/* models/**/* tests/**/* perl -p -i -e 's#gt-dib#tw-inline-block#g' web_src/js/**/* templates/**/* models/**/* tests/**/* Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> (cherry picked from commit f88ad5424f381bf2a45fd863b551c5a72891bb68) Conflicts: templates/repo/diff/conversation.tmpl templates/repo/header.tmpl templates/repo/issue/filter_actions.tmpl templates/repo/issue/filter_list.tmpl templates/repo/issue/view_content/conversation.tmpl templates/repo/release/list.tmpl templates/repo/wiki/view.tmpl web_src/js/components/DashboardRepoList.vue discard the proposed changes and prefer Forgejo. A followup commit will apply the same commands.
This commit is contained in:
parent
44bc7b9954
commit
2befd9a3cf
115 changed files with 276 additions and 290 deletions
|
@ -14,10 +14,6 @@
|
|||
color: var(--color-red-light);
|
||||
}
|
||||
|
||||
.runner-container .runner-basic-info .gt-dib {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.runner-container .runner-new-text {
|
||||
color: var(--color-white);
|
||||
}
|
||||
|
|
|
@ -2,16 +2,6 @@
|
|||
Gitea's tailwind-style CSS helper classes have `gt-` prefix.
|
||||
Gitea's private styles use `g-` prefix.
|
||||
*/
|
||||
.gt-df { display: flex !important; }
|
||||
.gt-dib { display: inline-block !important; }
|
||||
.gt-ac { align-items: center !important; }
|
||||
.gt-jc { justify-content: center !important; }
|
||||
.gt-je { justify-content: flex-end !important; }
|
||||
.gt-sb { justify-content: space-between !important; }
|
||||
.gt-fc { flex-direction: column !important; }
|
||||
.gt-f1 { flex: 1 !important; }
|
||||
.gt-fw { flex-wrap: wrap !important; }
|
||||
.gt-vm { vertical-align: middle !important; }
|
||||
|
||||
.gt-mono {
|
||||
font-family: var(--fonts-monospace) !important;
|
||||
|
|
|
@ -28,7 +28,7 @@ export default {
|
|||
};
|
||||
</script>
|
||||
<template>
|
||||
<span class="gt-df gt-ac" :data-tooltip-content="localeStatus" v-if="status">
|
||||
<span class="tw-flex tw-content-center" :data-tooltip-content="localeStatus" v-if="status">
|
||||
<SvgIcon name="octicon-check-circle-fill" class="text green" :size="size" :class-name="className" v-if="status === 'success'"/>
|
||||
<SvgIcon name="octicon-skip" class="text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
|
||||
<SvgIcon name="octicon-clock" class="text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
|
||||
|
|
|
@ -240,7 +240,7 @@ export default {
|
|||
@click.meta.exact="commitClicked(commit.id, true)"
|
||||
@click.shift.exact.stop.prevent="commitClickedShift(commit)"
|
||||
>
|
||||
<div class="gt-f1 gt-df gt-fc gt-gap-2">
|
||||
<div class="tw-flex-1 tw-flex tw-flex-col gt-gap-2">
|
||||
<div class="gt-ellipsis commit-list-summary">
|
||||
{{ commit.summary }}
|
||||
</div>
|
||||
|
|
|
@ -38,7 +38,7 @@ export default {
|
|||
<template>
|
||||
<ol class="diff-stats gt-m-0" ref="root" v-if="store.fileListIsVisible">
|
||||
<li v-for="file in store.files" :key="file.NameHash">
|
||||
<div class="gt-font-semibold gt-df gt-ac pull-right">
|
||||
<div class="gt-font-semibold tw-flex tw-content-center pull-right">
|
||||
<span v-if="file.IsBin" class="gt-ml-1 gt-mr-3">{{ store.binaryFileMessage }}</span>
|
||||
{{ file.IsBin ? '' : file.Addition + file.Deletion }}
|
||||
<span v-if="!file.IsBin" class="diff-stats-bar gt-mx-3" :data-tooltip-content="store.statisticsMessage.replace('%d', (file.Addition + file.Deletion)).replace('%d', file.Addition).replace('%d', file.Deletion)">
|
||||
|
@ -50,7 +50,7 @@ export default {
|
|||
<a class="file gt-mono" :href="'#diff-' + file.NameHash">{{ file.Name }}</a>
|
||||
</li>
|
||||
<li v-if="store.isIncomplete" class="gt-pt-2">
|
||||
<span class="file gt-df gt-ac gt-sb">{{ store.tooManyFilesMessage }}
|
||||
<span class="file tw-flex tw-content-center tw-justify-between">{{ store.tooManyFilesMessage }}
|
||||
<a :class="['ui', 'basic', 'tiny', 'button', store.isLoadingNewData ? 'disabled' : '']" @click.stop="loadMoreData">{{ store.showMoreMessage }}</a>
|
||||
</span>
|
||||
</li>
|
||||
|
|
|
@ -37,7 +37,7 @@ export default {
|
|||
>
|
||||
<!-- file -->
|
||||
<SvgIcon name="octicon-file"/>
|
||||
<span class="gt-ellipsis gt-f1">{{ item.name }}</span>
|
||||
<span class="gt-ellipsis tw-flex-1">{{ item.name }}</span>
|
||||
<SvgIcon :name="getIconForDiffType(item.file.Type).name" :class="getIconForDiffType(item.file.Type).classes"/>
|
||||
</a>
|
||||
<div v-else class="item-directory" :title="item.name" @click.stop="collapsed = !collapsed">
|
||||
|
|
|
@ -136,7 +136,7 @@ export default {
|
|||
</div>
|
||||
</form>
|
||||
|
||||
<div v-if="!showActionForm" class="gt-df">
|
||||
<div v-if="!showActionForm" class="tw-flex">
|
||||
<!-- the merge button -->
|
||||
<div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? 'grey' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click="toggleActionForm(true)">
|
||||
<button class="ui button">
|
||||
|
|
|
@ -245,8 +245,8 @@ export default sfc; // activate IDE's Vue plugin
|
|||
</script>
|
||||
<template>
|
||||
<div class="ui dropdown custom">
|
||||
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button gt-df gt-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
|
||||
<span class="text gt-df gt-ac gt-mr-2">
|
||||
<button class="branch-dropdown-button gt-ellipsis ui basic small compact button tw-flex gt-m-0" @click="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
|
||||
<span class="text tw-flex tw-content-center gt-mr-2">
|
||||
<template v-if="release">{{ textReleaseCompare }}</template>
|
||||
<template v-else>
|
||||
<svg-icon v-if="isViewTag" name="octicon-tag"/>
|
||||
|
|
|
@ -144,10 +144,10 @@ export default {
|
|||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div class="ui header gt-df gt-ac gt-sb">
|
||||
<div class="ui header tw-flex tw-content-center tw-justify-between">
|
||||
{{ 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 class="tw-flex ui segment main-graph">
|
||||
<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"/>
|
||||
|
|
|
@ -303,7 +303,7 @@ export default {
|
|||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div class="ui header gt-df gt-ac gt-sb">
|
||||
<div class="ui header tw-flex tw-content-center tw-justify-between">
|
||||
<div>
|
||||
<relative-time
|
||||
v-if="xAxisMin > 0"
|
||||
|
@ -352,7 +352,7 @@ export default {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gt-df ui segment main-graph">
|
||||
<div class="tw-flex ui segment main-graph">
|
||||
<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"/>
|
||||
|
@ -374,17 +374,17 @@ export default {
|
|||
:key="index"
|
||||
v-memo="[sortedContributors, type]"
|
||||
>
|
||||
<div class="ui top attached header gt-df gt-f1">
|
||||
<div class="ui top attached header tw-flex tw-flex-1">
|
||||
<b class="ui right">#{{ index + 1 }}</b>
|
||||
<a :href="contributor.home_link">
|
||||
<img class="ui avatar gt-vm" height="40" width="40" :src="contributor.avatar_link">
|
||||
<img class="ui avatar tw-align-middle" height="40" width="40" :src="contributor.avatar_link">
|
||||
</a>
|
||||
<div class="gt-ml-3">
|
||||
<a v-if="contributor.home_link !== ''" :href="contributor.home_link"><h4>{{ contributor.name }}</h4></a>
|
||||
<h4 v-else class="contributor-name">
|
||||
{{ contributor.name }}
|
||||
</h4>
|
||||
<p class="gt-font-12 gt-df gt-gap-2">
|
||||
<p class="gt-font-12 tw-flex gt-gap-2">
|
||||
<strong v-if="contributor.total_commits">{{ contributor.total_commits.toLocaleString() }} {{ locale.contributionType.commits }}</strong>
|
||||
<strong v-if="contributor.total_additions" class="text green">{{ contributor.total_additions.toLocaleString() }}++ </strong>
|
||||
<strong v-if="contributor.total_deletions" class="text red">
|
||||
|
|
|
@ -121,10 +121,10 @@ export default {
|
|||
</script>
|
||||
<template>
|
||||
<div>
|
||||
<div class="ui header gt-df gt-ac gt-sb">
|
||||
<div class="ui header tw-flex tw-content-center tw-justify-between">
|
||||
{{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "Number of commits in the past year" }}
|
||||
</div>
|
||||
<div class="gt-df ui segment main-graph">
|
||||
<div class="tw-flex ui segment main-graph">
|
||||
<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"/>
|
||||
|
|
|
@ -16,7 +16,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
|
|||
$dialog = $(`
|
||||
<div class="ui modal content-history-detail-dialog">
|
||||
${svg('octicon-x', 16, 'close icon inside')}
|
||||
<div class="header gt-df gt-ac gt-sb">
|
||||
<div class="header tw-flex tw-content-center tw-justify-between">
|
||||
<div>${itemTitleHtml}</div>
|
||||
<div class="ui dropdown dialog-header-options gt-mr-5 gt-hidden">
|
||||
${i18nTextOptions}
|
||||
|
|
|
@ -108,7 +108,7 @@ function initRepoIssueListAuthorDropdown() {
|
|||
// the content is provided by backend IssuePosters handler
|
||||
const processedResults = []; // to be used by dropdown to generate menu items
|
||||
for (const item of resp.results) {
|
||||
let html = `<img class="ui avatar gt-vm" src="${htmlEscape(item.avatar_link)}" aria-hidden="true" alt="" width="20" height="20"><span class="gt-ellipsis">${htmlEscape(item.username)}</span>`;
|
||||
let html = `<img class="ui avatar tw-align-middle" src="${htmlEscape(item.avatar_link)}" aria-hidden="true" alt="" width="20" height="20"><span class="gt-ellipsis">${htmlEscape(item.username)}</span>`;
|
||||
if (item.full_name) html += `<span class="search-fullname gt-ml-3">${htmlEscape(item.full_name)}</span>`;
|
||||
processedResults.push({value: item.user_id, name: html});
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue