public/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-06 04:01:05 +09:00
Code Issues Packages Projects Releases Wiki Activity

Refactor frontend tw-justify-between layouts to flex-left-right (#37291)

Browse Source 
This PR standardizes left/right two-child frontend layouts on
`flex-left-right` and removes ad-hoc `tw-justify-between` combinations.
The goal is consistent wrapping + spacing behavior under narrow widths
with less utility-class churn.

Also: remove useless "flex-center-wrap", slightly improve some templates
(no visual change, tested)

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: wxiaoguang <2114189+wxiaoguang@users.noreply.github.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Copilot
2026-04-19 18:57:48 +08:00
committed by GitHub
parent c98134033a
commit 30be22f30f
31 changed files with 39 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web_src/css/base.css
View File

@@ -873,7 +873,7 @@ table th[data-sortt-desc] .svg {
gap: var(--gap-block);
}
/* TODO: use this to replace all existing "flex + justify-between" (there are quite a lot) */
/* this is useful to make a left-right (e.g.: title .... operations) layout with default gap, and it wrap for small widths */
.flex-left-right {
display: flex;
flex-wrap: wrap;
@@ -883,15 +883,6 @@ table th[data-sortt-desc] .svg {
min-width: 0;
}
/* TODO: use this to replace all existing "flex + wrap" and (there are quite a lot of) */
.flex-center-wrap {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--gap-block);
min-width: 0;
}
.ui.list.flex-items-block > .item,
.ui.vertical.menu.flex-items-block > .item,
.ui.form .field > label.flex-text-block, /* override fomantic "block" style */
@@ -903,6 +894,7 @@ table th[data-sortt-desc] .svg {
min-width: 0;
}
.flex-left-right > .ui.button,
.flex-text-block > .ui.button,
.flex-text-inline > .ui.button {
margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */

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

@@ -144,7 +144,7 @@ const options: ChartOptions<'line'> = {
<template>
<div>
<div class="ui header tw-flex tw-items-center tw-justify-between">
<div class="ui header">
{{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: `Code frequency over the history of ${repoLink.slice(1)}` }}
</div>
<div class="tw-flex ui segment main-graph">

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

@@ -339,7 +339,7 @@ export default defineComponent({
</script>
<template>
<div>
<div class="ui header tw-flex tw-items-center tw-justify-between">
<div class="ui header flex-left-right">
<div>
<relative-time
v-if="xAxisMin && xAxisMin > 0"

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

@@ -122,7 +122,7 @@ const options: ChartOptions<'bar'> = {
<template>
<div>
<div class="ui header tw-flex tw-items-center tw-justify-between">
<div class="ui header">
{{ isLoading ? locale.loadingTitle : errorText ? locale.loadingTitleFailed: "Number of commits in the past year" }}
</div>
<div class="tw-flex ui segment main-graph">

2
web_src/js/features/repo-issue-content.ts
View File

@@ -14,7 +14,7 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
const elDetailDialog = createElementFromHTML(`
<div class="ui modal content-history-detail-dialog">
${svg('octicon-x', 16, 'close icon inside')}
<div class="header tw-flex tw-items-center tw-justify-between">
<div class="header flex-left-right">
<div>${itemTitleHtml}</div>
<div class="ui dropdown dialog-header-options tw-mr-8 tw-hidden">
${i18nTextOptions}