diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl index 346f4002b4..9fedd05f94 100644 --- a/templates/projects/list.tmpl +++ b/templates/projects/list.tmpl @@ -41,26 +41,26 @@ -
+
{{/* the milestone-list class is kept because many tests depend on it */}} {{range .Projects}} -
  • -

    +
    + {{svg .IconName 16}} - {{.Title}} -

    -
    -
    -
    + {{.Title}} + +
    +
    +
    {{svg "octicon-issue-opened" 14}} {{ctx.Locale.PrettyNumber .NumOpenIssues}} {{ctx.Locale.Tr "repo.issues.open_title"}}
    -
    +
    {{svg "octicon-check" 14}} {{ctx.Locale.PrettyNumber .NumClosedIssues}} {{ctx.Locale.Tr "repo.issues.closed_title"}}
    {{if and $.CanWriteProjects (not $.Repository.IsArchived)}} -
    +
    {{svg "octicon-pencil" 14}}{{ctx.Locale.Tr "repo.issues.label_edit"}} {{if .IsClosed}} {{svg "octicon-check" 14}}{{ctx.Locale.Tr "repo.projects.open"}} @@ -74,7 +74,7 @@ {{if .Description}}
    {{.RenderedContent}}
    {{end}} -
    • +
    {{else}} {{if and (eq .OpenCount 0) (eq .ClosedCount 0)}}
    diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl index 90e2a8ae3b..4af4697b44 100644 --- a/templates/repo/issue/milestones.tmpl +++ b/templates/repo/issue/milestones.tmpl @@ -15,42 +15,42 @@ {{template "repo/issue/filters" .}} -
    +
    {{range .Milestones}} -
  • -
    -

    +
    +
    + {{svg "octicon-milestone" 16}} {{.Name}} -

    -
    - {{.Completeness}}% - + +
    + {{.Completeness}}% +
    -
    -
    -
    +
    +
    +
    {{svg "octicon-issue-opened" 14}} {{ctx.Locale.PrettyNumber .NumOpenIssues}} {{ctx.Locale.Tr "repo.issues.open_title"}}
    -
    +
    {{svg "octicon-check" 14}} {{ctx.Locale.PrettyNumber .NumClosedIssues}} {{ctx.Locale.Tr "repo.issues.closed_title"}}
    {{if .TotalTrackedTime}} -
    +
    {{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Hour}}
    {{end}} {{if .UpdatedUnix}} -
    +
    {{svg "octicon-clock"}} {{ctx.Locale.Tr "repo.milestones.update_ago" (DateUtils.TimeSince .UpdatedUnix)}}
    {{end}} -
    +
    {{if .IsClosed}} {{$closedDate:= DateUtils.TimeSince .ClosedDateUnix}} {{svg "octicon-clock" 14}} @@ -69,7 +69,7 @@
    {{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}} -
    +
    {{svg "octicon-pencil" 14}}{{ctx.Locale.Tr "repo.issues.label_edit"}} {{if .IsClosed}} {{svg "octicon-check" 14}}{{ctx.Locale.Tr "repo.milestones.open"}} @@ -83,7 +83,7 @@ {{if .Content}}
    {{.RenderedContent}}
    {{end}} -
    • +
    {{end}} {{template "base/paginate" .}} diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl index 11c4210b46..838caeb7b2 100644 --- a/templates/shared/issuelist.tmpl +++ b/templates/shared/issuelist.tmpl @@ -16,7 +16,7 @@
    - {{.Title | ctx.RenderUtils.RenderIssueSimpleTitle}} + {{.Title | ctx.RenderUtils.RenderIssueSimpleTitle}} {{if .IsPull}} {{if (index $.CommitStatuses .PullRequest.ID)}} {{/* make the "flex" children align with parent "inline" */}} @@ -37,14 +37,16 @@
    {{end}}
    -
    - +
    + {{if eq $.listType "dashboard"}} {{.Repo.FullName}}#{{.Index}} {{else}} #{{.Index}} {{end}} + +
    {{$timeStr := DateUtils.TimeSince .GetLastEventTimestamp}} {{if .OriginalAuthor}} {{ctx.Locale.Tr .GetLastEventLabelFake $timeStr .OriginalAuthor}} @@ -53,6 +55,8 @@ {{else}} {{ctx.Locale.Tr .GetLastEventLabelFake $timeStr .Poster.GetDisplayName}} {{end}} +
    + {{if .IsPull}}
    @@ -99,11 +103,9 @@ {{end}} {{if ne .DeadlineUnix 0}} - - - {{svg "octicon-calendar" 14}} - {{DateUtils.AbsoluteShort .DeadlineUnix}} - + + {{svg "octicon-calendar" 14}} + {{DateUtils.AbsoluteShort .DeadlineUnix}} {{end}} {{if .IsPull}} diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl index d5dd64b1a3..62c2df7e8f 100644 --- a/templates/user/dashboard/milestones.tmpl +++ b/templates/user/dashboard/milestones.tmpl @@ -71,45 +71,45 @@
    -
    +
    {{range .Milestones}} -
  • -
    -

    +
    +
    + {{.Repo.FullName}} {{svg "octicon-milestone" 16}} {{.Name}} -

    -
    - {{.Completeness}}% - + +
    + {{.Completeness}}% +
    -
    -
    -
    +
    +
    +
    {{svg "octicon-issue-opened" 14}} {{ctx.Locale.PrettyNumber .NumOpenIssues}} {{ctx.Locale.Tr "repo.issues.open_title"}}
    -
    +
    {{svg "octicon-check" 14}} {{ctx.Locale.PrettyNumber .NumClosedIssues}} {{ctx.Locale.Tr "repo.issues.closed_title"}}
    {{if .TotalTrackedTime}} -
    +
    {{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Hour}}
    {{end}} {{if .UpdatedUnix}} -
    +
    {{svg "octicon-clock"}} {{ctx.Locale.Tr "repo.milestones.update_ago" (DateUtils.TimeSince .UpdatedUnix)}}
    {{end}} -
    +
    {{if .IsClosed}} {{$closedDate:= DateUtils.TimeSince .ClosedDateUnix}} {{svg "octicon-clock" 14}} @@ -127,22 +127,11 @@ {{end}}
    - {{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}} -
    - {{svg "octicon-pencil" 14}}{{ctx.Locale.Tr "repo.issues.label_edit"}} - {{if .IsClosed}} - {{svg "octicon-check" 14}}{{ctx.Locale.Tr "repo.milestones.open"}} - {{else}} - {{svg "octicon-x" 14}}{{ctx.Locale.Tr "repo.milestones.close"}} - {{end}} - {{svg "octicon-trash" 14}}{{ctx.Locale.Tr "repo.issues.label_delete"}} -
    - {{end}}
    {{if .Content}}
    {{.RenderedContent}}
    {{end}} -
    • +
    {{end}} {{template "base/paginate" .}} diff --git a/tests/e2e/issue-project.test.ts b/tests/e2e/issue-project.test.ts index 1595cfadc5..10466cd822 100644 --- a/tests/e2e/issue-project.test.ts +++ b/tests/e2e/issue-project.test.ts @@ -372,7 +372,7 @@ test('close project and view in closed projects list', async ({page}) => { await expect(page.locator('.milestone-list')).toContainText(closedProjectTitle); // Close the second project by clicking the close link - const projectCard = page.locator('.milestone-card').filter({hasText: closedProjectTitle}); + const projectCard = page.locator('.milestone-list > .item').filter({hasText: closedProjectTitle}); await projectCard.locator('a.link-action[data-url$="/close"]').click(); // Wait for redirect back to project view page diff --git a/tests/e2e/utils.ts b/tests/e2e/utils.ts index 8dcd6aedae..5b19793f37 100644 --- a/tests/e2e/utils.ts +++ b/tests/e2e/utils.ts @@ -159,7 +159,7 @@ export async function createProject( await page.waitForURL(new RegExp(`/${owner}/${repo}/projects$`)); // Extract the project ID from the project link in the list - const projectLink = page.locator('.milestone-list .milestone-card').filter({hasText: title}).locator('a').first(); + const projectLink = page.locator('.milestone-list > .item').filter({hasText: title}).locator('a').first(); const href = await projectLink.getAttribute('href'); const match = /\/projects\/(\d+)/.exec(href || ''); const id = match ? parseInt(match[1]) : 0; diff --git a/tests/integration/issue_test.go b/tests/integration/issue_test.go index aaeba60d8e..ffb491344b 100644 --- a/tests/integration/issue_test.go +++ b/tests/integration/issue_test.go @@ -34,7 +34,7 @@ import ( func getIssuesSelection(t testing.TB, htmlDoc *HTMLDoc) *goquery.Selection { issueList := htmlDoc.doc.Find("#issue-list") assert.Equal(t, 1, issueList.Length()) - return issueList.Find(".item").Find(".issue-item-title") + return issueList.Find(".item").Find(".list-item-large-title") } func getIssue(t *testing.T, repoID int64, issueSelection *goquery.Selection) *issues_model.Issue { diff --git a/web_src/css/base.css b/web_src/css/base.css index 49ddca57a3..0716ad1913 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -454,11 +454,6 @@ img.ui.avatar, margin-right: 4px; } -.ui.inline.delete-button { - padding: 8px 15px; - font-weight: var(--font-weight-normal); -} - .ui .migrate { color: var(--color-text-light-2) !important; } diff --git a/web_src/css/index.css b/web_src/css/index.css index 89ad63ba1a..a56982efcf 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -37,7 +37,6 @@ @import "./modules/charescape.css"; @import "./shared/flex-list.css"; -@import "./shared/milestone.css"; @import "./shared/settings.css"; @import "./features/dropzone.css"; diff --git a/web_src/css/modules/svg.css b/web_src/css/modules/svg.css index 7adfc77a81..b772f98ac6 100644 --- a/web_src/css/modules/svg.css +++ b/web_src/css/modules/svg.css @@ -2,7 +2,7 @@ and material icons should have no "fill" set explicitly, otherwise some like ".editorconfig" won't render correctly */ .svg:not(.git-entry-icon) { display: inline-block; - vertical-align: text-top; + vertical-align: middle; /* middle is the best choice for different font sizes from 1px to 36px when no flex */ fill: currentcolor; } diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css index cecf9920ac..dfffe20187 100644 --- a/web_src/css/repo/issue-list.css +++ b/web_src/css/repo/issue-list.css @@ -34,14 +34,6 @@ } } -#issue-list .issue-item-title { - font-size: 16px; - font-weight: var(--font-weight-semibold); - color: var(--color-text); - text-decoration: none; - overflow-wrap: anywhere; -} - #issue-list .branches { display: inline-flex; } @@ -106,3 +98,33 @@ color: var(--color-primary); text-decoration: underline; } + +.list-item-large-title { + font-size: 16px; + font-weight: var(--font-weight-semibold); + color: var(--color-text); + text-decoration: none; + overflow-wrap: anywhere; +} + +.list-item-title-progress { + width: 200px; + height: 16px; +} + +.list-item-secondary-bar { + display: flex; + flex-wrap: wrap; + gap: var(--gap-block); + justify-content: space-between; + color: var(--color-text-light-2); +} + +.list-item-secondary-bar a { + color: var(--color-text-light-2); + text-decoration: none; +} + +.list-item-secondary-bar a:hover { + color: var(--color-text); +} diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css index 1acaa362e2..b224fe667c 100644 --- a/web_src/css/shared/flex-list.css +++ b/web_src/css/shared/flex-list.css @@ -32,7 +32,7 @@ .items-with-main > .item { display: flex; - gap: 8px; + gap: var(--gap-block); align-items: flex-start; } @@ -44,7 +44,7 @@ .items-with-main > .item .item-main { display: flex; flex-direction: column; - gap: 0.25em; + gap: var(--gap-inline); flex-grow: 1; flex-basis: 60%; /* avoid wrapping the "item-trailing" too aggressively */ min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */ @@ -52,7 +52,7 @@ .items-with-main > .item .item-header { display: flex; - gap: .25rem; + gap: var(--gap-inline); justify-content: space-between; flex-wrap: wrap; } @@ -63,7 +63,7 @@ .items-with-main > .item .item-trailing { display: flex; - gap: 0.5rem; + gap: var(--gap-block); align-items: center; flex-grow: 0; flex-wrap: wrap; @@ -92,7 +92,7 @@ display: flex; align-items: center; flex-wrap: wrap; - gap: .25rem; + gap: var(--gap-inline); color: var(--color-text-light-2); overflow-wrap: anywhere; } diff --git a/web_src/css/shared/milestone.css b/web_src/css/shared/milestone.css deleted file mode 100644 index 47e822f8d3..0000000000 --- a/web_src/css/shared/milestone.css +++ /dev/null @@ -1,62 +0,0 @@ -.milestone-list { - list-style: none; -} - -.milestone-card { - width: 100%; - padding-top: 10px; - padding-bottom: 10px; -} - -.milestone-card + .milestone-card { - border-top: 1px solid var(--color-secondary); -} - -.milestone-card .render-content { - padding-top: 10px; -} - -.milestone-header progress { - width: 200px; - height: 16px; -} - -.milestone-header { - display: flex; - align-items: center; - margin: 0; - flex-wrap: wrap; - justify-content: space-between; -} - -.milestone-toolbar { - padding-top: 5px; - display: flex; - flex-wrap: wrap; - gap: 8px; - justify-content: space-between; -} - -.milestone-toolbar .group { - color: var(--color-text-light-2); - display: flex; - flex-wrap: wrap; - gap: 8px; -} - -.milestone-toolbar .group > a { - font-size: 15px; - color: var(--color-text-light-2); -} - -.milestone-toolbar .group > a:hover { - color: var(--color-text); -} - -@media (max-width: 767.98px) { - .milestone-card { - display: flex; - flex-direction: column; - gap: 8px; - } -}