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:
silverwind 2024-03-22 14:45:10 +01:00 committed by Earl Warren
parent 44bc7b9954
commit 2befd9a3cf
No known key found for this signature in database
GPG key ID: 0579CB2928A78A00
115 changed files with 276 additions and 290 deletions

View file

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

View file

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

View file

@ -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'"/>

View file

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

View file

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

View file

@ -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">

View file

@ -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">

View file

@ -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"/>

View file

@ -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"/>

View file

@ -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">

View file

@ -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"/>

View file

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

View file

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