From b673edbeafa4b6c72ad1c086d1f062bed41eef5f Mon Sep 17 00:00:00 2001
From: Giteabot <teabot@gitea.io>
Date: Sun, 18 Jun 2023 09:02:41 -0400
Subject: [PATCH] Fix UI on mobile view (#25315) (#25340)
Backport #25315 by @denyskon
Various fixes to pages or elements which were looking ugly on mobile.
<details>
<summary>Screenshots</summary>
</details>
Co-authored by: @silverwind
Co-authored-by: Denys Konovalov <kontakt@denyskon.de>
Co-authored-by: silverwind <me@silverwind.io>
---
templates/projects/list.tmpl | 51 +++++++------
templates/projects/view.tmpl | 2 +-
templates/repo/activity.tmpl | 37 +++++-----
templates/repo/empty.tmpl | 4 +-
templates/repo/issue/list.tmpl | 6 +-
templates/repo/issue/milestones.tmpl | 90 ++++++++++++++---------
templates/repo/issue/navbar.tmpl | 2 +-
templates/repo/issue/search.tmpl | 2 +-
templates/repo/projects/list.tmpl | 55 +++++++-------
templates/repo/projects/view.tmpl | 2 +-
templates/user/dashboard/issues.tmpl | 2 +-
templates/user/dashboard/milestones.tmpl | 93 +++++++++++++++---------
web_src/css/index.css | 1 +
web_src/css/repo.css | 83 +++++++++------------
web_src/css/repo/issue-list.css | 20 +++++
web_src/css/repo/list-header.css | 14 +++-
web_src/css/shared/milestone.css | 66 +++++++++++++++++
17 files changed, 329 insertions(+), 201 deletions(-)
create mode 100644 web_src/css/shared/milestone.css
diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
index e9e86e5d5d..bde9925ab9 100644
--- a/templates/projects/list.tmpl
+++ b/templates/projects/list.tmpl
@@ -35,33 +35,36 @@
</div>
</div>
</div>
- <div class="milestone list">
+ <div class="milestone-list">
{{range .Projects}}
- <li class="item">
- {{svg .IconName}} <a href="{{.Link}}">{{.Title}}</a>
- <div class="meta">
- {{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
- {{if .IsClosed}}
- {{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
+ <li class="milestone-card">
+ <h3 class="flex-text-block gt-m-0">
+ {{svg .IconName 16}}
+ <a class="muted" href="{{.Link}}">{{.Title}}</a>
+ </h3>
+ <div class="milestone-toolbar">
+ <div class="group">
+ <div class="flex-text-block">
+ {{svg "octicon-issue-opened" 14}}
+ {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}}
+ </div>
+ <div class="flex-text-block">
+ {{svg "octicon-check" 14}}
+ {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}}
+ </div>
+ </div>
+ {{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
+ <div class="group">
+ <a class="flex-text-inline" href="{{.Link}}/edit">{{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}}</a>
+ {{if .IsClosed}}
+ <a class="link-action flex-text-inline" href data-url="{{.Link}}/open">{{svg "octicon-check" 14}}{{$.locale.Tr "repo.projects.open"}}</a>
+ {{else}}
+ <a class="link-action flex-text-inline" href data-url="{{.Link}}/close">{{svg "octicon-skip" 14}}{{$.locale.Tr "repo.projects.close"}}</a>
+ {{end}}
+ <a class="delete-button flex-text-inline" href="#" data-url="{{.Link}}/delete">{{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}} tesssst</a>
+ </div>
{{end}}
- <span class="issue-stats">
- {{svg "octicon-issue-opened" 16 "gt-mr-3"}}
- {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}}
- {{svg "octicon-check" 16 "gt-mr-3"}}
- {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}}
- </span>
</div>
- {{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
- <div class="ui right operate">
- <a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Title}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
- {{if .IsClosed}}
- <a class="link-action" href data-url="{{$.Link}}/{{.ID}}/open">{{svg "octicon-check"}} {{$.locale.Tr "repo.projects.open"}}</a>
- {{else}}
- <a class="link-action" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-skip"}} {{$.locale.Tr "repo.projects.close"}}</a>
- {{end}}
- <a class="delete-button" href="#" data-url="{{$.Link}}/{{.ID}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
- </div>
- {{end}}
{{if .Description}}
<div class="content">
{{.RenderedContent|Str2html}}
diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl
index a7209e0c21..58dbca2a4b 100644
--- a/templates/projects/view.tmpl
+++ b/templates/projects/view.tmpl
@@ -46,7 +46,7 @@
{{if $.CanWriteProjects}}
<div class="column right aligned">
<div class="ui compact right small menu">
- <a class="item" href="{{$.Link}}/edit?redirect=project" data-id={{$.Project.ID}} data-title={{$.Project.Title}}>
+ <a class="item" href="{{$.Link}}/edit?redirect=project">
{{svg "octicon-pencil"}}
<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
</a>
diff --git a/templates/repo/activity.tmpl b/templates/repo/activity.tmpl
index 9d15cec051..ed29ece137 100644
--- a/templates/repo/activity.tmpl
+++ b/templates/repo/activity.tmpl
@@ -2,25 +2,24 @@
<div role="main" aria-label="{{.Title}}" class="page-content repository commits">
{{template "repo/header" .}}
<div class="ui container">
- <h2 class="ui header">{{DateTime "long" .DateFrom}} - {{DateTime "long" .DateUntil}}
- <div class="ui right">
- <!-- Period -->
- <div class="ui floating dropdown jump filter">
- <div class="ui basic compact button">
- <span class="text">
- {{.locale.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong>
- {{svg "octicon-triangle-down" 14 "dropdown icon"}}
- </span>
- </div>
- <div class="menu">
- <a class="{{if eq .Period "daily"}}active {{end}}item" href="{{$.RepoLink}}/activity/daily">{{.locale.Tr "repo.activity.period.daily"}}</a>
- <a class="{{if eq .Period "halfweekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/halfweekly">{{.locale.Tr "repo.activity.period.halfweekly"}}</a>
- <a class="{{if eq .Period "weekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/weekly">{{.locale.Tr "repo.activity.period.weekly"}}</a>
- <a class="{{if eq .Period "monthly"}}active {{end}}item" href="{{$.RepoLink}}/activity/monthly">{{.locale.Tr "repo.activity.period.monthly"}}</a>
- <a class="{{if eq .Period "quarterly"}}active {{end}}item" href="{{$.RepoLink}}/activity/quarterly">{{.locale.Tr "repo.activity.period.quarterly"}}</a>
- <a class="{{if eq .Period "semiyearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/semiyearly">{{.locale.Tr "repo.activity.period.semiyearly"}}</a>
- <a class="{{if eq .Period "yearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/yearly">{{.locale.Tr "repo.activity.period.yearly"}}</a>
- </div>
+ <h2 class="ui header activity-header">
+ <span>{{DateTime "long" .DateFrom}} - {{DateTime "long" .DateUntil}}</span>
+ <!-- Period -->
+ <div class="ui floating dropdown jump filter">
+ <div class="ui basic compact button">
+ <span class="text">
+ {{.locale.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong>
+ {{svg "octicon-triangle-down" 14 "dropdown icon"}}
+ </span>
+ </div>
+ <div class="menu">
+ <a class="{{if eq .Period "daily"}}active {{end}}item" href="{{$.RepoLink}}/activity/daily">{{.locale.Tr "repo.activity.period.daily"}}</a>
+ <a class="{{if eq .Period "halfweekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/halfweekly">{{.locale.Tr "repo.activity.period.halfweekly"}}</a>
+ <a class="{{if eq .Period "weekly"}}active {{end}}item" href="{{$.RepoLink}}/activity/weekly">{{.locale.Tr "repo.activity.period.weekly"}}</a>
+ <a class="{{if eq .Period "monthly"}}active {{end}}item" href="{{$.RepoLink}}/activity/monthly">{{.locale.Tr "repo.activity.period.monthly"}}</a>
+ <a class="{{if eq .Period "quarterly"}}active {{end}}item" href="{{$.RepoLink}}/activity/quarterly">{{.locale.Tr "repo.activity.period.quarterly"}}</a>
+ <a class="{{if eq .Period "semiyearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/semiyearly">{{.locale.Tr "repo.activity.period.semiyearly"}}</a>
+ <a class="{{if eq .Period "yearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/yearly">{{.locale.Tr "repo.activity.period.yearly"}}</a>
</div>
</div>
</h2>
diff --git a/templates/repo/empty.tmpl b/templates/repo/empty.tmpl
index ed726db512..50f209b460 100644
--- a/templates/repo/empty.tmpl
+++ b/templates/repo/empty.tmpl
@@ -26,7 +26,7 @@
<div class="item">
<h3>{{.locale.Tr "repo.clone_this_repo"}} <small>{{.locale.Tr "repo.clone_helper" "http://git-scm.com/book/en/Git-Basics-Getting-a-Git-Repository" | Str2html}}</small></h3>
- <div class="gt-df">
+ <div class="repo-button-row">
{{if and .CanWriteCode (not .Repository.IsArchived)}}
<a class="ui small button" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/">
{{.locale.Tr "repo.editor.new_file"}}
@@ -44,7 +44,7 @@
</div>
{{if not .Repository.IsArchived}}
- <div class="ui divider"></div>
+ <div class="ui divider gt-my-0"></div>
<div class="item">
<h3>{{.locale.Tr "repo.create_new_repo_command"}}</h3>
diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index 3323bf893e..313f7d6e98 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -71,13 +71,13 @@
{{template "repo/issue/search" .}}
{{if not .Repository.IsArchived}}
{{if .PageIsIssueList}}
- <a class="ui small green button" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
+ <a class="ui small green button issue-list-new" href="{{.RepoLink}}/issues/new{{if .NewIssueChooseTemplate}}/choose{{end}}">{{.locale.Tr "repo.issues.new"}}</a>
{{else}}
- <a class="ui small green button new-pr-button{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.Repository.Link}}/compare/{{.Repository.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{.locale.Tr "repo.pulls.new"}}</a>
+ <a class="ui small green button new-pr-button issue-list-new{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.Repository.Link}}/compare/{{.Repository.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{.locale.Tr "repo.pulls.new"}}</a>
{{end}}
{{else}}
{{if not .PageIsIssueList}}
- <a class="ui small green small button{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.PullRequestCtx.BaseRepo.Link}}/compare/{{.PullRequestCtx.BaseRepo.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{$.locale.Tr "action.compare_commits_general"}}</a>
+ <a class="ui small green small button issue-list-new{{if not .PullRequestCtx.Allowed}} disabled{{end}}" href="{{if .PullRequestCtx.Allowed}}{{.PullRequestCtx.BaseRepo.Link}}/compare/{{.PullRequestCtx.BaseRepo.DefaultBranch | PathEscapeSegments}}...{{if ne .Repository.Owner.Name .PullRequestCtx.BaseRepo.Owner.Name}}{{PathEscape .Repository.Owner.Name}}:{{end}}{{.Repository.DefaultBranch | PathEscapeSegments}}{{end}}">{{$.locale.Tr "action.compare_commits_general"}}</a>
{{end}}
{{end}}
</div>
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
index d7e782e20d..46bb060877 100644
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@@ -13,7 +13,7 @@
{{template "base/alert" .}}
<div class="list-header">
- <div class="small-menu-items ui compact tiny menu">
+ <div class="small-menu-items ui compact tiny menu list-header-toggle">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
{{svg "octicon-milestone" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .OpenCount}} {{.locale.Tr "repo.issues.open_title"}}
@@ -53,50 +53,70 @@
</div>
<!-- milestone list -->
- <div class="milestone list">
+ <div class="milestone-list">
{{range .Milestones}}
- <li class="item">
- <div class="gt-df gt-ac gt-sb">
- <h3 class="gt-df gt-ac gt-m-0 gt-fw">
- {{svg "octicon-milestone" 16 "gt-mr-3"}}<a class="muted" href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a>
+ <li class="milestone-card">
+ <div class="milestone-header">
+ <h3 class="flex-text-block gt-m-0">
+ {{svg "octicon-milestone" 16}}
+ <a class="muted" href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a>
</h3>
<div class="gt-df gt-ac">
<span class="gt-mr-3">{{.Completeness}}%</span>
<progress value="{{.Completeness}}" max="100"></progress>
</div>
</div>
- <div class="meta">
- {{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
- {{if .IsClosed}}
- {{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
- {{else}}
- {{svg "octicon-calendar"}}
- {{if .DeadlineString}}
- <span {{if .IsOverdue}}class="overdue"{{end}}>{{DateTime "short" .DeadlineString}}</span>
- {{else}}
- {{$.locale.Tr "repo.milestones.no_due_date"}}
+ <div class="milestone-toolbar">
+ <div class="group">
+ <div class="flex-text-block">
+ {{svg "octicon-issue-opened" 14}}
+ {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}}
+ </div>
+ <div class="flex-text-block">
+ {{svg "octicon-check" 14}}
+ {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}}
+ </div>
+ {{if .TotalTrackedTime}}
+ <div class="flex-text-block">
+ {{svg "octicon-clock"}}
+ {{.TotalTrackedTime|Sec2Time}}
+ </div>
{{end}}
- {{end}}
- <span class="issue-stats">
- {{svg "octicon-issue-opened" 16 "gt-mr-3"}}
- {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}}
- {{svg "octicon-check" 16 "gt-mr-3"}}
- {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}}
- {{if .TotalTrackedTime}}{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}{{end}}
- {{if .UpdatedUnix}}{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}}{{end}}
- </span>
- </div>
- {{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
- <div class="ui right operate">
- <a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
- {{if .IsClosed}}
- <a class="link-action" href data-url="{{$.Link}}/{{.ID}}/open">{{svg "octicon-check"}} {{$.locale.Tr "repo.milestones.open"}}</a>
- {{else}}
- <a class="link-action" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-x"}} {{$.locale.Tr "repo.milestones.close"}}</a>
+ {{if .UpdatedUnix}}
+ <div class="flex-text-block">
+ {{svg "octicon-clock"}}
+ {{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}}
+ </div>
{{end}}
- <a class="delete-button" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
+ <div class="flex-text-block">
+ {{if .IsClosed}}
+ {{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
+ {{svg "octicon-clock" 14}}
+ {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
+ {{else}}
+ {{svg "octicon-calendar" 14}}
+ {{if .DeadlineString}}
+ <span {{if .IsOverdue}}class="overdue"{{end}}>
+ {{DateTime "short" .DeadlineString}}
+ </span>
+ {{else}}
+ {{$.locale.Tr "repo.milestones.no_due_date"}}
+ {{end}}
+ {{end}}
+ </div>
</div>
- {{end}}
+ {{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
+ <div class="group">
+ <a class="flex-text-inline" href="{{$.Link}}/{{.ID}}/edit">{{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}}</a>
+ {{if .IsClosed}}
+ <a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/open">{{svg "octicon-check" 14}}{{$.locale.Tr "repo.milestones.open"}}</a>
+ {{else}}
+ <a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-x" 14}}{{$.locale.Tr "repo.milestones.close"}}</a>
+ {{end}}
+ <a class="delete-button flex-text-inline" href="#" data-url="{{$.RepoLink}}/milestones/delete">{{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}}</a>
+ </div>
+ {{end}}
+ </div>
{{if .Content}}
<div class="markup content">
{{.RenderedContent|Str2html}}
diff --git a/templates/repo/issue/navbar.tmpl b/templates/repo/issue/navbar.tmpl
index 944c6b194a..2f1ea7a659 100644
--- a/templates/repo/issue/navbar.tmpl
+++ b/templates/repo/issue/navbar.tmpl
@@ -1,4 +1,4 @@
-<h2 class="ui compact small menu header small-menu-items">
+<h2 class="ui compact small menu header small-menu-items issue-list-navbar">
<a class="{{if .PageIsLabels}}active {{end}}item" href="{{.RepoLink}}/labels">{{.locale.Tr "repo.labels"}}</a>
<a class="{{if .PageIsMilestones}}active {{end}}item" href="{{.RepoLink}}/milestones">{{.locale.Tr "repo.milestones"}}</a>
</h2>
diff --git a/templates/repo/issue/search.tmpl b/templates/repo/issue/search.tmpl
index 97b22d3699..13224680bd 100644
--- a/templates/repo/issue/search.tmpl
+++ b/templates/repo/issue/search.tmpl
@@ -1,4 +1,4 @@
-<form class="list-header-search ui form ignore-dirty">
+<form class="list-header-search ui form ignore-dirty issue-list-search">
<div class="ui small search fluid action input">
<input type="hidden" name="type" value="{{$.ViewType}}">
<input type="hidden" name="state" value="{{$.State}}">
diff --git a/templates/repo/projects/list.tmpl b/templates/repo/projects/list.tmpl
index a5f99cee66..674c6bfb62 100644
--- a/templates/repo/projects/list.tmpl
+++ b/templates/repo/projects/list.tmpl
@@ -2,7 +2,7 @@
<div role="main" aria-label="{{.Title}}" class="page-content repository projects milestones">
{{template "repo/header" .}}
<div class="ui container">
- <div class="navbar gt-mb-4">
+ <div class="navbar projects-header">
<div>
<div class="small-menu-items ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
@@ -15,7 +15,7 @@
</a>
</div>
</div>
- <div>
+ <div class="projects-toolbar">
<!-- Sort -->
<div class="ui small dropdown type jump item">
<span class="text">
@@ -35,33 +35,36 @@
</div>
{{template "base/alert" .}}
- <div class="milestone list">
+ <div class="milestone-list">
{{range .Projects}}
- <li class="item">
- {{svg .IconName}} <a href="{{.Link}}">{{.Title}}</a>
- <div class="meta">
- {{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
- {{if .IsClosed}}
- {{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
+ <li class="milestone-card">
+ <h3 class="flex-text-block gt-m-0">
+ {{svg .IconName 16}}
+ <a class="muted" href="{{.Link}}">{{.Title}}</a>
+ </h3>
+ <div class="milestone-toolbar">
+ <div class="group">
+ <div class="flex-text-block">
+ {{svg "octicon-issue-opened" 14}}
+ {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}}
+ </div>
+ <div class="flex-text-block">
+ {{svg "octicon-check" 14}}
+ {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}}
+ </div>
+ </div>
+ {{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
+ <div class="group">
+ <a class="flex-text-inline" href="{{.Link}}/edit">{{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}}</a>
+ {{if .IsClosed}}
+ <a class="link-action flex-text-inline" href data-url="{{.Link}}/open">{{svg "octicon-check" 14}}{{$.locale.Tr "repo.projects.open"}}</a>
+ {{else}}
+ <a class="link-action flex-text-inline" href data-url="{{.Link}}/close">{{svg "octicon-skip" 14}}{{$.locale.Tr "repo.projects.close"}}</a>
+ {{end}}
+ <a class="delete-button flex-text-inline" href="#" data-url="{{.Link}}/delete">{{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}}</a>
+ </div>
{{end}}
- <span class="issue-stats">
- {{svg "octicon-issue-opened" 16 "gt-mr-3"}}
- {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}}
- {{svg "octicon-check" 16 "gt-mr-3"}}
- {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}}
- </span>
</div>
- {{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
- <div class="ui right operate">
- <a href="{{.Link}}/edit" data-id={{.ID}} data-title={{.Title}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
- {{if .IsClosed}}
- <a class="link-action" href data-url="{{.Link}}/open">{{svg "octicon-check"}} {{$.locale.Tr "repo.projects.open"}}</a>
- {{else}}
- <a class="link-action" href data-url="{{.Link}}/close">{{svg "octicon-skip"}} {{$.locale.Tr "repo.projects.close"}}</a>
- {{end}}
- <a class="delete-button" href="#" data-url="{{.Link}}/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
- </div>
- {{end}}
{{if .Description}}
<div class="content">
{{.RenderedContent|Str2html}}
diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl
index f249854b15..397f385d06 100644
--- a/templates/repo/projects/view.tmpl
+++ b/templates/repo/projects/view.tmpl
@@ -50,7 +50,7 @@
{{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
<div class="column right aligned">
<div class="ui compact right small menu">
- <a class="item" href="{{$.RepoLink}}/projects/{{.Project.ID}}/edit?redirect=project" data-id={{$.Project.ID}} data-title={{$.Project.Title}}>
+ <a class="item" href="{{$.RepoLink}}/projects/{{.Project.ID}}/edit?redirect=project">
{{svg "octicon-pencil"}}
<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
</a>
diff --git a/templates/user/dashboard/issues.tmpl b/templates/user/dashboard/issues.tmpl
index cbb153a343..e7762c5a93 100644
--- a/templates/user/dashboard/issues.tmpl
+++ b/templates/user/dashboard/issues.tmpl
@@ -61,7 +61,7 @@
</div>
<div class="twelve wide column content">
<div class="list-header">
- <div class="small-menu-items ui compact tiny menu">
+ <div class="small-menu-items ui compact tiny menu list-header-toggle">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?type={{$.ViewType}}&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .IssueStats.OpenCount}} {{.locale.Tr "repo.issues.open_title"}}
diff --git a/templates/user/dashboard/milestones.tmpl b/templates/user/dashboard/milestones.tmpl
index 372d3c7b99..23b7b27116 100644
--- a/templates/user/dashboard/milestones.tmpl
+++ b/templates/user/dashboard/milestones.tmpl
@@ -35,7 +35,7 @@
</div>
<div class="twelve wide column content">
<div class="list-header">
- <div class="small-menu-items ui compact tiny menu">
+ <div class="small-menu-items ui compact tiny menu list-header-toggle">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.Link}}?repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state=open&q={{$.Keyword}}">
{{svg "octicon-milestone" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .MilestoneStats.OpenCount}} {{.locale.Tr "repo.issues.open_title"}}
@@ -71,52 +71,73 @@
</div>
</div>
</div>
- <div class="milestone list">
+ <div class="milestone-list">
{{range .Milestones}}
- <li class="item">
- <div class="gt-df gt-ac gt-sb">
- <h3 class="gt-df gt-ac gt-m-0 gt-fw">
- <span class="ui large label">{{.Repo.FullName}}</span>
- {{svg "octicon-milestone" 16 "gt-mr-3"}}<a class="muted" href="{{.Repo.Link}}/milestone/{{.ID}}">{{.Name}}</a>
+ <li class="milestone-card">
+ <div class="milestone-header">
+ <h3 class="flex-text-block gt-m-0">
+ <span class="ui large label">
+ {{.Repo.FullName}}
+ </span>
+ {{svg "octicon-milestone" 16}}
+ <a class="muted" href="{{.Repo.Link}}/milestone/{{.ID}}">{{.Name}}</a>
</h3>
<div class="gt-df gt-ac">
<span class="gt-mr-3">{{.Completeness}}%</span>
<progress value="{{.Completeness}}" max="100"></progress>
</div>
</div>
- <div class="meta">
- {{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
- {{if .IsClosed}}
- {{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
- {{else}}
- {{svg "octicon-calendar"}}
- {{if .DeadlineString}}
- <span {{if .IsOverdue}}class="overdue"{{end}}>{{DateTime "short" .DeadlineString}}</span>
- {{else}}
- {{$.locale.Tr "repo.milestones.no_due_date"}}
- {{end}}
- {{end}}
- <span class="issue-stats">
- {{svg "octicon-issue-opened" 16 "gt-mr-3"}}
- {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}}
- {{svg "octicon-check" 16 "gt-mr-3"}}
- {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}}
+ <div class="milestone-toolbar">
+ <div class="group">
+ <div class="flex-text-block">
+ {{svg "octicon-issue-opened" 14}}
+ {{$.locale.PrettyNumber .NumOpenIssues}} {{$.locale.Tr "repo.issues.open_title"}}
+ </div>
+ <div class="flex-text-block">
+ {{svg "octicon-check" 14}}
+ {{$.locale.PrettyNumber .NumClosedIssues}} {{$.locale.Tr "repo.issues.closed_title"}}
+ </div>
{{if .TotalTrackedTime}}
- {{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}}
+ <div class="flex-text-block">
+ {{svg "octicon-clock"}}
+ {{.TotalTrackedTime|Sec2Time}}
+ </div>
{{end}}
- </span>
- </div>
- {{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
- <div class="ui right operate">
- <a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a>
- {{if .IsClosed}}
- <a href="{{$.Link}}/{{.ID}}/open" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-check"}} {{$.locale.Tr "repo.milestones.open"}}</a>
- {{else}}
- <a href="{{$.Link}}/{{.ID}}/close" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-x"}} {{$.locale.Tr "repo.milestones.close"}}</a>
+ {{if .UpdatedUnix}}
+ <div class="flex-text-block">
+ {{svg "octicon-clock"}}
+ {{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}}
+ </div>
{{end}}
- <a class="delete-button" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}">{{svg "octicon-trash"}} {{$.locale.Tr "repo.issues.label_delete"}}</a>
+ <div class="flex-text-block">
+ {{if .IsClosed}}
+ {{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}}
+ {{svg "octicon-clock" 14}}
+ {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}}
+ {{else}}
+ {{svg "octicon-calendar" 14}}
+ {{if .DeadlineString}}
+ <span {{if .IsOverdue}}class="overdue"{{end}}>
+ {{DateTime "short" .DeadlineString}}
+ </span>
+ {{else}}
+ {{$.locale.Tr "repo.milestones.no_due_date"}}
+ {{end}}
+ {{end}}
+ </div>
</div>
- {{end}}
+ {{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}}
+ <div class="group">
+ <a class="flex-text-inline" href="{{$.Link}}/{{.ID}}/edit">{{svg "octicon-pencil" 14}}{{$.locale.Tr "repo.issues.label_edit"}}</a>
+ {{if .IsClosed}}
+ <a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/open">{{svg "octicon-check" 14}}{{$.locale.Tr "repo.milestones.open"}}</a>
+ {{else}}
+ <a class="link-action flex-text-inline" href data-url="{{$.Link}}/{{.ID}}/close">{{svg "octicon-x" 14}}{{$.locale.Tr "repo.milestones.close"}}</a>
+ {{end}}
+ <a class="delete-button flex-text-inline" href="#" data-url="{{$.RepoLink}}/milestones/delete">{{svg "octicon-trash" 14}}{{$.locale.Tr "repo.issues.label_delete"}}</a>
+ </div>
+ {{end}}
+ </div>
{{if .Content}}
<div class="markup content">
{{.RenderedContent|Str2html}}
diff --git a/web_src/css/index.css b/web_src/css/index.css
index c9cc1d8032..125249ceab 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -9,6 +9,7 @@
@import "./modules/comment.css";
@import "./shared/issuelist.css";
+@import "./shared/milestone.css";
@import "./shared/repoorg.css";
@import "./shared/settings.css";
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 546fff32f4..60a2f97a3f 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -87,6 +87,18 @@
}
}
+.projects-header {
+ margin-bottom: 1rem;
+ flex-direction: column;
+ gap: 8px;
+}
+
+.projects-toolbar {
+ display: flex;
+ justify-content: space-between;
+ padding-left: 4px;
+}
+
.repository .issue-content-right .menu {
overflow-x: auto;
max-height: 500px;
@@ -225,6 +237,14 @@
align-items: center;
}
+@media (max-width: 767.68px) {
+ .repository.file.list .repo-description {
+ flex-direction: column;
+ gap: 8px;
+ align-items: normal;
+ }
+}
+
.repository.file.list #repo-desc {
font-size: 1.2em;
}
@@ -1167,56 +1187,6 @@
margin-top: -8px;
}
-.repository .milestone.list {
- list-style: none;
-}
-
-.repository .milestone.list > .item {
- padding-top: 10px;
- padding-bottom: 10px;
-}
-
-.repository .milestone.list > .item + .item {
- border-top: 1px solid var(--color-secondary);
-}
-
-.repository .milestone.list > .item progress {
- width: 200px;
- height: 16px;
-}
-
-.repository .milestone.list > .item .meta {
- color: var(--color-text-light-2);
- padding-top: 5px;
-}
-
-.repository .milestone.list > .item .meta .issue-stats .svg {
- padding-left: 5px;
-}
-
-.repository .milestone.list > .item .meta .overdue {
- color: var(--color-red);
-}
-
-.repository .milestone.list > .item .operate {
- margin-top: -15px;
-}
-
-.repository .milestone.list > .item .operate > a {
- font-size: 15px;
- padding-top: 5px;
- padding-right: 10px;
- color: var(--color-text-light-2);
-}
-
-.repository .milestone.list > .item .operate > a:hover {
- color: var(--color-text);
-}
-
-.repository .milestone.list > .item .content {
- padding-top: 10px;
-}
-
.repository.new.milestone textarea {
height: 200px;
}
@@ -1966,6 +1936,13 @@
}
}
+.repository .activity-header {
+ display: flex;
+ justify-content: space-between;
+ gap: 8px;
+ flex-wrap: wrap;
+}
+
.repository.settings.collaboration .collaborator.list {
padding: 0;
}
@@ -3383,6 +3360,12 @@ tbody.commit-list {
margin-bottom: 8px;
}
+@media (max-width: 767.98px) {
+ #issue-pins {
+ grid-template-columns: repeat(1, 1fr);
+ }
+}
+
.pinned-issue-card {
border-radius: var(--border-radius);
padding: 8px 10px;
diff --git a/web_src/css/repo/issue-list.css b/web_src/css/repo/issue-list.css
index dde3e7f19f..ddd425d068 100644
--- a/web_src/css/repo/issue-list.css
+++ b/web_src/css/repo/issue-list.css
@@ -13,3 +13,23 @@
.issue-list-toolbar-right {
margin-left: auto;
}
+
+@media (max-width: 767.98px) {
+ .issue-list-toolbar {
+ flex-direction: column-reverse;
+ }
+ .issue-list-toolbar-right {
+ margin-right: auto;
+ width: 100%;
+ }
+ .issue-list-navbar {
+ order: 0;
+ }
+ .issue-list-new {
+ order: 1;
+ margin-left: auto !important;
+ }
+ .issue-list-search {
+ order: 2 !important;
+ }
+}
diff --git a/web_src/css/repo/list-header.css b/web_src/css/repo/list-header.css
index 69539b035b..304cfbc13c 100644
--- a/web_src/css/repo/list-header.css
+++ b/web_src/css/repo/list-header.css
@@ -8,7 +8,6 @@
.list-header-sort {
display: flex;
align-items: center;
- justify-content: flex-end;
padding-left: 1rem;
padding-right: 1rem;
}
@@ -44,3 +43,16 @@
.small-menu-items .item.active {
background: var(--color-active) !important;
}
+
+@media (max-width: 767.98px) {
+ .list-header-search {
+ order: 0;
+ }
+ .list-header-toggle {
+ order: 1;
+ }
+ .list-header-sort {
+ order: 2;
+ margin-left: auto;
+ }
+}
diff --git a/web_src/css/shared/milestone.css b/web_src/css/shared/milestone.css
new file mode 100644
index 0000000000..511a1be714
--- /dev/null
+++ b/web_src/css/shared/milestone.css
@@ -0,0 +1,66 @@
+.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 .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 .overdue {
+ color: var(--color-red);
+}
+
+.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;
+ }
+}