diff options
| author | Giteabot <teabot@gitea.io> | 2023-06-18 09:02:41 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-06-18 13:02:41 +0000 |
| commit | b673edbeafa4b6c72ad1c086d1f062bed41eef5f (patch) | |
| tree | 97f2f542411e712f002bff2275621eadfd32320a /templates/repo | |
| parent | 05431593ef407fe2d7b552664f7f1d699bb63234 (diff) | |
| download | gitea-b673edbeafa4b6c72ad1c086d1f062bed41eef5f.tar.gz gitea-b673edbeafa4b6c72ad1c086d1f062bed41eef5f.zip | |
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>
Diffstat (limited to 'templates/repo')
| -rw-r--r-- | templates/repo/activity.tmpl | 37 | ||||
| -rw-r--r-- | templates/repo/empty.tmpl | 4 | ||||
| -rw-r--r-- | templates/repo/issue/list.tmpl | 6 | ||||
| -rw-r--r-- | templates/repo/issue/milestones.tmpl | 90 | ||||
| -rw-r--r-- | templates/repo/issue/navbar.tmpl | 2 | ||||
| -rw-r--r-- | templates/repo/issue/search.tmpl | 2 | ||||
| -rw-r--r-- | templates/repo/projects/list.tmpl | 55 | ||||
| -rw-r--r-- | templates/repo/projects/view.tmpl | 2 |
8 files changed, 110 insertions, 88 deletions
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}} - {{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> + <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}} - <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> |