Fix New issue button consistency

Fixes https://codeberg.org/forgejo/forgejo/issues/2613
Based on https://codeberg.org/forgejo/forgejo/issues/2613#issuecomment-1654709

- add new class `list-header-issues`;
- add rules that fix button position;
- use variable to keep the vertical offset constant;
- fix gap for edit button.

Co-authored-by: Gusted <gusted@noreply.codeberg.org>
This commit is contained in:
0ko 2024-03-28 18:23:57 +05:00
parent bc04183e47
commit 892fc82a20
5 changed files with 17 additions and 4 deletions

View file

@ -14,7 +14,7 @@
</div> </div>
{{end}} {{end}}
<div class="list-header"> <div class="list-header list-header-issues">
{{template "repo/issue/navbar" .}} {{template "repo/issue/navbar" .}}
{{template "repo/issue/search" .}} {{template "repo/issue/search" .}}
{{if not .Repository.IsArchived}} {{if not .Repository.IsArchived}}

View file

@ -14,7 +14,7 @@
</h1> </h1>
<div class="issue-title-buttons"> <div class="issue-title-buttons">
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
<button id="edit-title" class="ui small basic button edit-button not-in-edit{{if .Issue.IsPull}} tw-mr-0{{end}}">{{ctx.Locale.Tr "repo.issues.edit"}}</button> <button id="edit-title" class="ui small basic button edit-button not-in-edit tw-mr-0">{{ctx.Locale.Tr "repo.issues.edit"}}</button>
{{end}} {{end}}
{{if not .Issue.IsPull}} {{if not .Issue.IsPull}}
<a role="button" class="ui small primary button new-issue-button tw-mr-0" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{ctx.Locale.Tr "repo.issues.new"}}</a> <a role="button" class="ui small primary button new-issue-button tw-mr-0" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>

View file

@ -21,6 +21,7 @@
--border-radius-circle: 50%; --border-radius-circle: 50%;
--opacity-disabled: 0.55; --opacity-disabled: 0.55;
--height-loading: 16rem; --height-loading: 16rem;
--repo-header-issue-min-height: 41px;
--min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */ --min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */
--tab-size: 4; --tab-size: 4;
} }

View file

@ -569,6 +569,10 @@
display: flex; display: flex;
} }
.issue-title-buttons {
gap: 0.5rem;
}
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.repository.view.issue .issue-title { .repository.view.issue .issue-title {
flex-direction: column; flex-direction: column;
@ -611,7 +615,7 @@
line-height: 40px; line-height: 40px;
margin: 0; margin: 0;
padding-right: 0.25rem; padding-right: 0.25rem;
min-height: 41px; /* avoid layout shift on edit */ min-height: var(--repo-header-issue-min-height);
} }
.repository.view.issue .issue-title h1 .ui.input { .repository.view.issue .issue-title h1 .ui.input {
@ -2180,7 +2184,7 @@
margin: 0 !important; margin: 0 !important;
position: relative; position: relative;
color: var(--color-text); color: var(--color-text);
min-height: 41px; min-height: var(--repo-header-issue-min-height);
background-color: var(--color-box-header); background-color: var(--color-box-header);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

View file

@ -16,6 +16,14 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.issue-list-new.button {
margin-right: 0;
}
.list-header-issues {
min-height: var(--repo-header-issue-min-height);
}
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.issue-list-navbar { .issue-list-navbar {
order: 0; order: 0;