Skip to content

Adjust the layout of the toolbar on the Issues/Projects page (#33667) #34047

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 28, 2025
Merged

Adjust the layout of the toolbar on the Issues/Projects page (#33667) #34047

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0f32837
Adjust the layout of the top toolbar on the issues page
kerwin612 Feb 21, 2025
bed1f2b
fix margin
wxiaoguang Mar 28, 2025
75df896
fix
kerwin612 Mar 28, 2025
c605d74
fix project view
wxiaoguang Mar 28, 2025
79bc222
Merge branch 'release/v1.23' into backport-project-view
wxiaoguang Mar 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions templates/projects/view.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{{$canWriteProject := and .CanWriteProjects (or (not .Repository) (not .Repository.IsArchived))}}

<div class="ui container tw-max-w-full">
<div class="tw-flex tw-justify-between tw-items-center tw-mb-4 tw-gap-3">
<h2 class="tw-mb-0 tw-flex-1 tw-break-anywhere">{{.Project.Title}}</h2>
<div class="project-toolbar-right">
<div class="ui secondary filter menu labels">
<div class="flex-text-block tw-flex-wrap tw-mb-4">
<h2 class="tw-mb-0">{{.Project.Title}}</h2>
<div class="tw-flex-1"></div>
<div class="ui secondary menu tw-m-0">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This block looks incorrectly intended, it should be on the same level as the empty div above.

Copy link
Contributor Author

@wxiaoguang wxiaoguang Mar 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually it is correct, the old code doesn't intend correctly.

To avoid unnecessary changes, I kept it as-is.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To clarify the change: only this line is deleted.

image

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, i mean this:

		<div class="tw-flex-1"></div>
				<div class="ui secondary menu tw-m-0">

Line 2 should dedent, old code did not have the closing </div> tag that you introduced.

Copy link
Contributor Author

@wxiaoguang wxiaoguang Mar 28, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line <div class="tw-flex-1"></div> is newly added, it doesn't affect other tags . The newly added line has correct indent

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I explained above: the only deleted line is <div class="project-toolbar-right"> and its close tag.

You could checkout and check the layout locally.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't care enough about intendation on a soon to be obsolete branch and main branch looks correct.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, main branch is correct because I did extra formatting.

This PR is only a backport and has to be done manually, I just don't want to introduce too many other changes

{{$queryLink := QueryBuild "?" "labels" .SelectLabels "assignee" $.AssigneeID "archived_labels" (Iif $.ShowArchivedLabels "true")}}

{{template "repo/issue/filter_item_label" dict "Labels" .Labels "QueryLink" $queryLink "SupportArchivedLabel" true}}
Expand All @@ -19,7 +19,6 @@
"TextNegativeOne" (ctx.Locale.Tr "repo.issues.filter_assginee_no_assignee")
}}
</div>
</div>
{{if $canWriteProject}}
<div class="ui compact mini menu">
<a class="item" href="{{.Link}}/edit?redirect=project">
Expand Down
5 changes: 3 additions & 2 deletions templates/repo/issue/list.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,10 @@
</div>
{{end}}

<div class="list-header">
{{template "repo/issue/navbar" .}}
<div class="list-header flex-text-block">
{{template "repo/issue/search" .}}
<a class="ui small button" href="{{.RepoLink}}/labels">{{ctx.Locale.Tr "repo.labels"}}</a>
<a class="ui small button" href="{{.RepoLink}}/milestones">{{ctx.Locale.Tr "repo.milestones"}}</a>
{{if not .Repository.IsArchived}}
{{if .PageIsIssueList}}
<a class="ui small primary button issue-list-new" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>
Expand Down
5 changes: 3 additions & 2 deletions templates/repo/projects/view.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,9 @@
<div role="main" aria-label="{{.Title}}" class="page-content repository projects view-project">
{{template "repo/header" .}}
<div class="ui container padded">
<div class="tw-flex tw-justify-between tw-items-center tw-mb-4">
{{template "repo/issue/navbar" .}}
<div class="flex-text-block tw-justify-end tw-mb-4">
<a class="ui small button" href="{{.RepoLink}}/labels">{{ctx.Locale.Tr "repo.labels"}}</a>
<a class="ui small button" href="{{.RepoLink}}/milestones">{{ctx.Locale.Tr "repo.milestones"}}</a>
<a class="ui small primary button" href="{{.RepoLink}}/issues/new/choose?project={{.Project.ID}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>
</div>
</div>
Expand Down
5 changes: 5 additions & 0 deletions web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1384,6 +1384,11 @@ table th[data-sortt-desc] .svg {
min-width: 0;
}

.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 */
}

/* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content
the "!important" is necessary to override Fomantic UI menu item styles, meanwhile we should keep the "hidden" items still hidden */
.ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) {
Expand Down
12 changes: 0 additions & 12 deletions web_src/css/features/projects.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,6 @@
margin: 0 0.5em;
}

.project-toolbar-right .filter.menu {
flex-direction: row;
flex-wrap: wrap;
}

@media (max-width: 767.98px) {
.project-toolbar-right .dropdown .menu {
left: auto !important;
right: auto !important;
}
}

.project-column {
background-color: var(--color-project-column-bg) !important;
border: 1px solid var(--color-secondary) !important;
Expand Down