diff options
Diffstat (limited to 'web_src')
-rw-r--r-- | web_src/css/actions.css | 4 | ||||
-rw-r--r-- | web_src/css/helpers.css | 10 | ||||
-rw-r--r-- | web_src/js/components/ActionRunStatus.vue | 2 | ||||
-rw-r--r-- | web_src/js/components/DashboardRepoList.vue | 20 | ||||
-rw-r--r-- | web_src/js/components/DiffCommitSelector.vue | 2 | ||||
-rw-r--r-- | web_src/js/components/DiffFileList.vue | 4 | ||||
-rw-r--r-- | web_src/js/components/DiffFileTreeItem.vue | 2 | ||||
-rw-r--r-- | web_src/js/components/PullRequestMergeForm.vue | 2 | ||||
-rw-r--r-- | web_src/js/components/RepoBranchTagSelector.vue | 4 | ||||
-rw-r--r-- | web_src/js/components/RepoCodeFrequency.vue | 4 | ||||
-rw-r--r-- | web_src/js/components/RepoContributors.vue | 10 | ||||
-rw-r--r-- | web_src/js/components/RepoRecentCommits.vue | 4 | ||||
-rw-r--r-- | web_src/js/features/repo-issue-content.js | 2 | ||||
-rw-r--r-- | web_src/js/features/repo-issue-list.js | 2 |
14 files changed, 29 insertions, 43 deletions
diff --git a/web_src/css/actions.css b/web_src/css/actions.css index e353a013a7..e7b9a3855a 100644 --- a/web_src/css/actions.css +++ b/web_src/css/actions.css @@ -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); } diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index a3817be223..c7097e631b 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -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; diff --git a/web_src/js/components/ActionRunStatus.vue b/web_src/js/components/ActionRunStatus.vue index 51a7745431..08a47eded7 100644 --- a/web_src/js/components/ActionRunStatus.vue +++ b/web_src/js/components/ActionRunStatus.vue @@ -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'"/> diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue index 177ae04855..df46516449 100644 --- a/web_src/js/components/DashboardRepoList.vue +++ b/web_src/js/components/DashboardRepoList.vue @@ -345,12 +345,12 @@ export default sfc; // activate the IDE's Vue plugin <a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{ textOrganization }}</a> </div> <div v-show="tab === 'repos'" class="ui tab active list dashboard-repos"> - <h4 class="ui top attached header gt-df gt-ac"> - <div class="gt-f1 gt-df gt-ac"> + <h4 class="ui top attached header tw-flex tw-content-center"> + <div class="tw-flex-1 tw-flex tw-content-center"> {{ textMyRepos }} <span class="ui grey label gt-ml-3">{{ reposTotalCount }}</span> </div> - <a class="gt-df gt-ac muted" :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo"> + <a class="tw-flex tw-content-center muted" :href="subUrl + '/repo/create' + (isOrganization ? '?org=' + organizationId : '')" :data-tooltip-content="textNewRepo"> <svg-icon name="octicon-plus"/> </a> </h4> @@ -411,7 +411,7 @@ export default sfc; // activate the IDE's Vue plugin </div> <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"> + <li class="tw-flex tw-content-center 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"> <svg-icon :name="repoIcon(repo)" :size="16" class-name="repo-list-icon"/> <div class="text truncate">{{ repo.full_name }}</div> @@ -419,7 +419,7 @@ export default sfc; // activate the IDE's Vue plugin <svg-icon name="octicon-archive" :size="16"/> </div> </a> - <a class="gt-df gt-ac" v-if="repo.latest_commit_status_state" :href="repo.latest_commit_status_state_link" :data-tooltip-content="repo.locale_latest_commit_status_state"> + <a class="tw-flex tw-content-center" v-if="repo.latest_commit_status_state" :href="repo.latest_commit_status_state_link" :data-tooltip-content="repo.locale_latest_commit_status_state"> <!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl --> <svg-icon :name="statusIcon(repo.latest_commit_status_state)" :class-name="'gt-ml-3 commit-status icon text ' + statusColor(repo.latest_commit_status_state)" :size="16"/> </a> @@ -458,18 +458,18 @@ export default sfc; // activate the IDE's Vue plugin </div> </div> <div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list dashboard-orgs"> - <h4 class="ui top attached header gt-df gt-ac"> - <div class="gt-f1 gt-df gt-ac"> + <h4 class="ui top attached header tw-flex tw-content-center"> + <div class="tw-flex-1 tw-flex tw-content-center"> {{ textMyOrgs }} <span class="ui grey label gt-ml-3">{{ organizationsTotalCount }}</span> </div> - <a class="gt-df gt-ac muted" v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg"> + <a class="tw-flex tw-content-center muted" v-if="canCreateOrganization" :href="subUrl + '/org/create'" :data-tooltip-content="textNewOrg"> <svg-icon name="octicon-plus"/> </a> </h4> <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"> + <li class="tw-flex tw-content-center gt-py-3" v-for="org in organizations" :key="org.name"> <a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)"> <svg-icon name="octicon-organization" :size="16" class-name="repo-list-icon"/> <div class="text truncate">{{ org.name }}</div> @@ -479,7 +479,7 @@ export default sfc; // activate the IDE's Vue plugin </span> </div> </a> - <div class="text light grey gt-df gt-ac gt-ml-3"> + <div class="text light grey tw-flex tw-content-center gt-ml-3"> {{ org.num_repos }} <svg-icon name="octicon-repo" :size="16" class-name="gt-ml-2 gt-mt-1"/> </div> diff --git a/web_src/js/components/DiffCommitSelector.vue b/web_src/js/components/DiffCommitSelector.vue index b465127aca..e8ceffa3e8 100644 --- a/web_src/js/components/DiffCommitSelector.vue +++ b/web_src/js/components/DiffCommitSelector.vue @@ -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> diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue index 8bde61804f..2499d998a8 100644 --- a/web_src/js/components/DiffFileList.vue +++ b/web_src/js/components/DiffFileList.vue @@ -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> diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue index 9d7ab4afc5..a5d78f07f1 100644 --- a/web_src/js/components/DiffFileTreeItem.vue +++ b/web_src/js/components/DiffFileTreeItem.vue @@ -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"> diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue index 170d0d85c6..5f2e19f2e5 100644 --- a/web_src/js/components/PullRequestMergeForm.vue +++ b/web_src/js/components/PullRequestMergeForm.vue @@ -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"> diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue index 83289c8852..a5ac689e5a 100644 --- a/web_src/js/components/RepoBranchTagSelector.vue +++ b/web_src/js/components/RepoBranchTagSelector.vue @@ -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"/> diff --git a/web_src/js/components/RepoCodeFrequency.vue b/web_src/js/components/RepoCodeFrequency.vue index c55bbff9cd..305732afc1 100644 --- a/web_src/js/components/RepoCodeFrequency.vue +++ b/web_src/js/components/RepoCodeFrequency.vue @@ -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"/> diff --git a/web_src/js/components/RepoContributors.vue b/web_src/js/components/RepoContributors.vue index 6093c762cb..ca51ca8aba 100644 --- a/web_src/js/components/RepoContributors.vue +++ b/web_src/js/components/RepoContributors.vue @@ -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"> diff --git a/web_src/js/components/RepoRecentCommits.vue b/web_src/js/components/RepoRecentCommits.vue index c1fd40f506..23738b8060 100644 --- a/web_src/js/components/RepoRecentCommits.vue +++ b/web_src/js/components/RepoRecentCommits.vue @@ -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"/> diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index 9e2b773730..f67a22ea6f 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -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} diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js index 48658fd723..4bdd5e5a8e 100644 --- a/web_src/js/features/repo-issue-list.js +++ b/web_src/js/features/repo-issue-list.js @@ -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}); } |