pub-solar/forgejo
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix UI on mobile view (#25315)

Browse source 
Various fixes to pages or elements which were looking ugly on mobile.
<details>
<summary>Screenshots</summary>

![Bildschirmfoto vom 2023-06-17
20-38-41](https://github.com/go-gitea/gitea/assets/47871822/30b5d3ce-df3b-43eb-a4c2-c3790667fb9d)
![Bildschirmfoto vom 2023-06-17
20-39-27](https://github.com/go-gitea/gitea/assets/47871822/27c07b25-3602-4fb2-b34d-d5e875e054e9)
![Bildschirmfoto vom 2023-06-17
20-41-27](https://github.com/go-gitea/gitea/assets/47871822/dacdbb4e-e3dd-4b94-abf0-c68e3d64bd3b)
![Bildschirmfoto vom 2023-06-17
20-41-48](https://github.com/go-gitea/gitea/assets/47871822/72432c35-7c4a-4c7f-a767-3562f26a5c14)
![Bildschirmfoto vom 2023-06-17
20-42-37](https://github.com/go-gitea/gitea/assets/47871822/737c26ed-1910-4467-98ef-e8769bbbe6f0)
![Bildschirmfoto vom 2023-06-17
20-42-52](https://github.com/go-gitea/gitea/assets/47871822/1813b4bc-43c0-4912-8acb-5d799c090bf3)
![Bildschirmfoto vom 2023-06-17
20-43-06](https://github.com/go-gitea/gitea/assets/47871822/136466e8-34e5-419d-97ec-5202ff819fd2)
![Bildschirmfoto vom 2023-06-17
20-43-42](https://github.com/go-gitea/gitea/assets/47871822/59270bb2-d661-4a84-8504-3e50f771f767)
![Bildschirmfoto vom 2023-06-17
20-44-44](https://github.com/go-gitea/gitea/assets/47871822/494e274d-3771-4141-9419-0a4bbd8b7f64)

</details>

Co-authored by @silverwind

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Denys Konovalov 2023-06-18 12:31:42 +02:00 committed by GitHub
parent 57120d9969
commit 9e74063498
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 329 additions and 201 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
templates/projects/list.tmpl
View file

@ -35,33 +35,36 @@
</div> </div>
</div> </div>
</div> </div>
<div class="milestone list"> <div class="milestone-list">
{{range .Projects}} {{range .Projects}}
<li class="item"> <li class="milestone-card">
{{svg .IconName}} <a href="{{.Link}}">{{.Title}}</a> <h3 class="flex-text-block gt-m-0">
<div class="meta"> {{svg .IconName 16}}
{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}} <a class="muted" href="{{.Link}}">{{.Title}}</a>
{{if .IsClosed}} </h3>
{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}} <div class="milestone-toolbar">
<div class="group">
<div class="flex-text-block">
{{svg "octicon-issue-opened" 14}}
{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
</div>
<div class="flex-text-block">
{{svg "octicon-check" 14}}
{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.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}} {{end}}
<span class="issue-stats">
{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
{{svg "octicon-check" 16 "gt-mr-3"}}
{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
</span>
</div> </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}} {{if .Description}}
<div class="content"> <div class="content">
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}

2
templates/projects/view.tmpl
View file

@ -46,7 +46,7 @@
{{if $.CanWriteProjects}} {{if $.CanWriteProjects}}
<div class="column right aligned"> <div class="column right aligned">
<div class="ui compact right small menu"> <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"}} {{svg "octicon-pencil"}}
<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span> <span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
</a> </a>

37
templates/repo/activity.tmpl
View file

@ -2,25 +2,24 @@
<div role="main" aria-label="{{.Title}}" class="page-content repository commits"> <div role="main" aria-label="{{.Title}}" class="page-content repository commits">
{{template "repo/header" .}} {{template "repo/header" .}}
<div class="ui container"> <div class="ui container">
<h2 class="ui header">{{DateTime "long" .DateFrom}} - {{DateTime "long" .DateUntil}} <h2 class="ui header activity-header">
<div class="ui right"> <span>{{DateTime "long" .DateFrom}} - {{DateTime "long" .DateUntil}}</span>
<!-- Period --> <!-- Period -->
<div class="ui floating dropdown jump filter"> <div class="ui floating dropdown jump filter">
<div class="ui basic compact button"> <div class="ui basic compact button">
<span class="text"> <span class="text">
{{.locale.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong> {{.locale.Tr "repo.activity.period.filter_label"}} <strong>{{.PeriodText}}</strong>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
</span> </span>
</div> </div>
<div class="menu"> <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 "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 "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 "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 "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 "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 "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> <a class="{{if eq .Period "yearly"}}active {{end}}item" href="{{$.RepoLink}}/activity/yearly">{{.locale.Tr "repo.activity.period.yearly"}}</a>
</div>
</div> </div>
</div> </div>
</h2> </h2>

4
templates/repo/empty.tmpl
View file

@ -26,7 +26,7 @@
<div class="item"> <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> <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)}} {{if and .CanWriteCode (not .Repository.IsArchived)}}
<a class="ui small button" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/"> <a class="ui small button" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/">
{{.locale.Tr "repo.editor.new_file"}} {{.locale.Tr "repo.editor.new_file"}}
@ -44,7 +44,7 @@
</div> </div>
{{if not .Repository.IsArchived}} {{if not .Repository.IsArchived}}
<div class="ui divider"></div> <div class="ui divider gt-my-0"></div>
<div class="item"> <div class="item">
<h3>{{.locale.Tr "repo.create_new_repo_command"}}</h3> <h3>{{.locale.Tr "repo.create_new_repo_command"}}</h3>

6
templates/repo/issue/list.tmpl
View file

@ -71,13 +71,13 @@
{{template "repo/issue/search" .}} {{template "repo/issue/search" .}}
{{if not .Repository.IsArchived}} {{if not .Repository.IsArchived}}
{{if .PageIsIssueList}} {{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}} {{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}} {{end}}
{{else}} {{else}}
{{if not .PageIsIssueList}} {{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}}
{{end}} {{end}}
</div> </div>

90
templates/repo/issue/milestones.tmpl
View file

@ -13,7 +13,7 @@
{{template "base/alert" .}} {{template "base/alert" .}}
<div class="list-header"> <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}}"> <a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/milestones?state=open&q={{$.Keyword}}">
{{svg "octicon-milestone" 16 "gt-mr-3"}} {{svg "octicon-milestone" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}} {{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
@ -53,50 +53,70 @@
</div> </div>
<!-- milestone list --> <!-- milestone list -->
<div class="milestone list"> <div class="milestone-list">
{{range .Milestones}} {{range .Milestones}}
<li class="item"> <li class="milestone-card">
<div class="gt-df gt-ac gt-sb"> <div class="milestone-header">
<h3 class="gt-df gt-ac gt-m-0 gt-fw"> <h3 class="flex-text-block gt-m-0">
{{svg "octicon-milestone" 16 "gt-mr-3"}}<a class="muted" href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a> {{svg "octicon-milestone" 16}}
<a class="muted" href="{{$.RepoLink}}/milestone/{{.ID}}">{{.Name}}</a>
</h3> </h3>
<div class="gt-df gt-ac"> <div class="gt-df gt-ac">
<span class="gt-mr-3">{{.Completeness}}%</span> <span class="gt-mr-3">{{.Completeness}}%</span>
<progress value="{{.Completeness}}" max="100"></progress> <progress value="{{.Completeness}}" max="100"></progress>
</div> </div>
</div> </div>
<div class="meta"> <div class="milestone-toolbar">
{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}} <div class="group">
{{if .IsClosed}} <div class="flex-text-block">
{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}} {{svg "octicon-issue-opened" 14}}
{{else}} {{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
{{svg "octicon-calendar"}} </div>
{{if .DeadlineString}} <div class="flex-text-block">
<span {{if .IsOverdue}}class="overdue"{{end}}>{{DateTime "short" .DeadlineString}}</span> {{svg "octicon-check" 14}}
{{else}} {{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
{{$.locale.Tr "repo.milestones.no_due_date"}} </div>
{{if .TotalTrackedTime}}
<div class="flex-text-block">
{{svg "octicon-clock"}}
{{.TotalTrackedTime|Sec2Time}}
</div>
{{end}} {{end}}
{{end}} {{if .UpdatedUnix}}
<span class="issue-stats"> <div class="flex-text-block">
{{svg "octicon-issue-opened" 16 "gt-mr-3"}} {{svg "octicon-clock"}}
{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}} {{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}}
{{svg "octicon-check" 16 "gt-mr-3"}} </div>
{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.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>
{{end}} {{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> </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}} {{if .Content}}
<div class="markup content"> <div class="markup content">
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}

2
templates/repo/issue/navbar.tmpl
View file

@ -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 .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> <a class="{{if .PageIsMilestones}}active {{end}}item" href="{{.RepoLink}}/milestones">{{.locale.Tr "repo.milestones"}}</a>
</h2> </h2>

2
templates/repo/issue/search.tmpl
View file

@ -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"> <div class="ui small search fluid action input">
<input type="hidden" name="type" value="{{$.ViewType}}"> <input type="hidden" name="type" value="{{$.ViewType}}">
<input type="hidden" name="state" value="{{$.State}}"> <input type="hidden" name="state" value="{{$.State}}">

55
templates/repo/projects/list.tmpl
View file

@ -2,7 +2,7 @@
<div role="main" aria-label="{{.Title}}" class="page-content repository projects milestones"> <div role="main" aria-label="{{.Title}}" class="page-content repository projects milestones">
{{template "repo/header" .}} {{template "repo/header" .}}
<div class="ui container"> <div class="ui container">
<div class="navbar gt-mb-4"> <div class="navbar projects-header">
<div> <div>
<div class="small-menu-items ui compact tiny menu"> <div class="small-menu-items ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open"> <a class="item{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/projects?state=open">
@ -15,7 +15,7 @@
</a> </a>
</div> </div>
</div> </div>
<div> <div class="projects-toolbar">
<!-- Sort --> <!-- Sort -->
<div class="ui small dropdown type jump item"> <div class="ui small dropdown type jump item">
<span class="text"> <span class="text">
@ -35,33 +35,36 @@
</div> </div>
{{template "base/alert" .}} {{template "base/alert" .}}
<div class="milestone list"> <div class="milestone-list">
{{range .Projects}} {{range .Projects}}
<li class="item"> <li class="milestone-card">
{{svg .IconName}} <a href="{{.Link}}">{{.Title}}</a> <h3 class="flex-text-block gt-m-0">
<div class="meta"> {{svg .IconName 16}}
{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}} <a class="muted" href="{{.Link}}">{{.Title}}</a>
{{if .IsClosed}} </h3>
{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}} <div class="milestone-toolbar">
<div class="group">
<div class="flex-text-block">
{{svg "octicon-issue-opened" 14}}
{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
</div>
<div class="flex-text-block">
{{svg "octicon-check" 14}}
{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.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}} {{end}}
<span class="issue-stats">
{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
{{svg "octicon-check" 16 "gt-mr-3"}}
{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
</span>
</div> </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}} {{if .Description}}
<div class="content"> <div class="content">
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}

2
templates/repo/projects/view.tmpl
View file

@ -50,7 +50,7 @@
{{if and $.CanWriteProjects (not $.Repository.IsArchived)}} {{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
<div class="column right aligned"> <div class="column right aligned">
<div class="ui compact right small menu"> <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"}} {{svg "octicon-pencil"}}
<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span> <span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
</a> </a>

2
templates/user/dashboard/issues.tmpl
View file

@ -61,7 +61,7 @@
</div> </div>
<div class="twelve wide column content"> <div class="twelve wide column content">
<div class="list-header"> <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}}"> <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"}} {{svg "octicon-issue-opened" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .IssueStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}} {{.locale.PrettyNumber .IssueStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}

93
templates/user/dashboard/milestones.tmpl
View file

@ -35,7 +35,7 @@
</div> </div>
<div class="twelve wide column content"> <div class="twelve wide column content">
<div class="list-header"> <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}}"> <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"}} {{svg "octicon-milestone" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .MilestoneStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}} {{.locale.PrettyNumber .MilestoneStats.OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
@ -71,52 +71,73 @@
</div> </div>
</div> </div>
</div> </div>
<div class="milestone list"> <div class="milestone-list">
{{range .Milestones}} {{range .Milestones}}
<li class="item"> <li class="milestone-card">
<div class="gt-df gt-ac gt-sb"> <div class="milestone-header">
<h3 class="gt-df gt-ac gt-m-0 gt-fw"> <h3 class="flex-text-block gt-m-0">
<span class="ui large label">{{.Repo.FullName}}</span> <span class="ui large label">
{{svg "octicon-milestone" 16 "gt-mr-3"}}<a class="muted" href="{{.Repo.Link}}/milestone/{{.ID}}">{{.Name}}</a> {{.Repo.FullName}}
</span>
{{svg "octicon-milestone" 16}}
<a class="muted" href="{{.Repo.Link}}/milestone/{{.ID}}">{{.Name}}</a>
</h3> </h3>
<div class="gt-df gt-ac"> <div class="gt-df gt-ac">
<span class="gt-mr-3">{{.Completeness}}%</span> <span class="gt-mr-3">{{.Completeness}}%</span>
<progress value="{{.Completeness}}" max="100"></progress> <progress value="{{.Completeness}}" max="100"></progress>
</div> </div>
</div> </div>
<div class="meta"> <div class="milestone-toolbar">
{{$closedDate:= TimeSinceUnix .ClosedDateUnix $.locale}} <div class="group">
{{if .IsClosed}} <div class="flex-text-block">
{{svg "octicon-clock"}} {{$.locale.Tr "repo.milestones.closed" $closedDate | Safe}} {{svg "octicon-issue-opened" 14}}
{{else}} {{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
{{svg "octicon-calendar"}} </div>
{{if .DeadlineString}} <div class="flex-text-block">
<span {{if .IsOverdue}}class="overdue"{{end}}>{{DateTime "short" .DeadlineString}}</span> {{svg "octicon-check" 14}}
{{else}} {{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
{{$.locale.Tr "repo.milestones.no_due_date"}} </div>
{{end}}
{{end}}
<span class="issue-stats">
{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
{{$.locale.PrettyNumber .NumOpenIssues}}&nbsp;{{$.locale.Tr "repo.issues.open_title"}}
{{svg "octicon-check" 16 "gt-mr-3"}}
{{$.locale.PrettyNumber .NumClosedIssues}}&nbsp;{{$.locale.Tr "repo.issues.closed_title"}}
{{if .TotalTrackedTime}} {{if .TotalTrackedTime}}
{{svg "octicon-clock"}} {{.TotalTrackedTime|Sec2Time}} <div class="flex-text-block">
{{svg "octicon-clock"}}
{{.TotalTrackedTime|Sec2Time}}
</div>
{{end}} {{end}}
</span> {{if .UpdatedUnix}}
</div> <div class="flex-text-block">
{{if and (or $.CanWriteIssues $.CanWritePulls) (not $.Repository.IsArchived)}} {{svg "octicon-clock"}}
<div class="ui right operate"> {{$.locale.Tr "repo.milestones.update_ago" (TimeSinceUnix .UpdatedUnix $.locale) | Safe}}
<a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Name}}>{{svg "octicon-pencil"}} {{$.locale.Tr "repo.issues.label_edit"}}</a> </div>
{{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>
{{end}} {{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> </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}} {{if .Content}}
<div class="markup content"> <div class="markup content">
{{.RenderedContent|Str2html}} {{.RenderedContent|Str2html}}

1
web_src/css/index.css
View file

@ -9,6 +9,7 @@
@import "./modules/comment.css"; @import "./modules/comment.css";
@import "./shared/issuelist.css"; @import "./shared/issuelist.css";
@import "./shared/milestone.css";
@import "./shared/repoorg.css"; @import "./shared/repoorg.css";
@import "./shared/settings.css"; @import "./shared/settings.css";

83
web_src/css/repo.css
View file

@ -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 { .repository .issue-content-right .menu {
overflow-x: auto; overflow-x: auto;
max-height: 500px; max-height: 500px;
@ -225,6 +237,14 @@
align-items: center; 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 { .repository.file.list #repo-desc {
font-size: 1.2em; font-size: 1.2em;
} }
@ -1167,56 +1187,6 @@
margin-top: -8px; 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 { .repository.new.milestone textarea {
height: 200px; height: 200px;
} }
@ -1964,6 +1934,13 @@
} }
} }
.repository .activity-header {
display: flex;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
.repository.settings.collaboration .collaborator.list { .repository.settings.collaboration .collaborator.list {
padding: 0; padding: 0;
} }
@ -3381,6 +3358,12 @@ tbody.commit-list {
margin-bottom: 8px; margin-bottom: 8px;
} }
@media (max-width: 767.98px) {
#issue-pins {
grid-template-columns: repeat(1, 1fr);
}
}
.pinned-issue-card { .pinned-issue-card {
border-radius: var(--border-radius); border-radius: var(--border-radius);
padding: 8px 10px; padding: 8px 10px;

20
web_src/css/repo/issue-list.css
View file

@ -13,3 +13,23 @@
.issue-list-toolbar-right { .issue-list-toolbar-right {
margin-left: auto; 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;
}
}

14
web_src/css/repo/list-header.css
View file

@ -8,7 +8,6 @@
.list-header-sort { .list-header-sort {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: flex-end;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
@ -44,3 +43,16 @@
.small-menu-items .item.active { .small-menu-items .item.active {
background: var(--color-active) !important; 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;
}
}

66
web_src/css/shared/milestone.css Normal file
View file

@ -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;
}
}