0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-22 23:33:15 -05:00
forgejo/templates/projects/view.tmpl
Denys Konovalov 9e74063498
Fix UI on mobile view (#25315)
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>
2023-06-18 10:31:42 +00:00

269 lines
10 KiB
Handlebars

<div role="main" aria-label="{{.Title}}" class="page-content repository projects view-project">
<div class="ui container">
<div class="ui two column stackable grid">
<div class="column">
</div>
<div class="column right aligned">
{{if .CanWriteProjects}}
<a class="ui small green button show-modal item" data-modal="#new-board-item">{{.locale.Tr "new_project_column"}}</a>
{{end}}
<div class="ui small modal new-board-modal" id="new-board-item">
<div class="header">
{{$.locale.Tr "repo.projects.column.new"}}
</div>
<div class="content">
<form class="ui form">
<div class="required field">
<label for="new_board">{{$.locale.Tr "repo.projects.column.new_title"}}</label>
<input class="new-board" id="new_board" name="title" required>
</div>
<div class="field color-field">
<label for="new_board_color">{{$.locale.Tr "repo.projects.column.color"}}</label>
<div class="color picker column">
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color_picker" name="color">
<div class="column precolors">
{{template "repo/issue/label_precolors"}}
</div>
</div>
</div>
<div class="text right actions">
<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
<button data-url="{{$.Link}}" class="ui primary button" id="new_board_submit">{{$.locale.Tr "repo.projects.column.new_submit"}}</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="ui divider"></div>
<div class="ui two column stackable grid">
<div class="column">
<h2 class="project-title">{{$.Project.Title}}</h2>
<div class="content project-description">{{$.Project.RenderedContent|Str2html}}</div>
</div>
{{if $.CanWriteProjects}}
<div class="column right aligned">
<div class="ui compact right small menu">
<a class="item" href="{{$.Link}}/edit?redirect=project">
{{svg "octicon-pencil"}}
<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
</a>
{{if .Project.IsClosed}}
<a class="item link-action" href data-url="{{$.Link}}/open">
{{svg "octicon-check"}}
<span class="gt-mx-3">{{$.locale.Tr "repo.projects.open"}}</span>
</a>
{{else}}
<a class="item link-action" href data-url="{{$.Link}}/close">
{{svg "octicon-skip"}}
<span class="gt-mx-3">{{$.locale.Tr "repo.projects.close"}}</span>
</a>
{{end}}
<a class="item delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.Project.ID}}">
{{svg "octicon-trash"}}
<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_delete"}}</span>
</a>
</div>
</div>
{{end}}
</div>
<div class="ui divider"></div>
</div>
<div class="ui container fluid padded" id="project-board">
<div class="board {{if .CanWriteProjects}}sortable{{end}}">
{{range $board := .Boards}}
<div class="ui segment board-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
<div class="board-column-header gt-df gt-ac gt-sb">
<div class="ui large label board-label gt-py-2">
<div class="ui small circular grey label board-card-cnt">
{{.NumIssues}}
</div>
{{.Title}}
</div>
{{if and $.CanWriteProjects (ne .ID 0)}}
<div class="ui dropdown jump item">
<div class="not-mobile gt-px-3" tabindex="-1">
{{svg "octicon-kebab-horizontal"}}
</div>
<div class="menu user-menu" tabindex="-1">
<a class="item show-modal button" data-modal="#edit-project-board-modal-{{.ID}}">
{{svg "octicon-pencil"}}
{{$.locale.Tr "repo.projects.column.edit"}}
</a>
{{if not .Default}}
<a class="item show-modal button default-project-board-show"
data-modal="#default-project-board-modal-{{.ID}}"
data-modal-default-project-board-header="{{$.locale.Tr "repo.projects.column.set_default"}}"
data-modal-default-project-board-content="{{$.locale.Tr "repo.projects.column.set_default_desc"}}"
data-url="{{$.Link}}/{{.ID}}/default">
{{svg "octicon-pin"}}
{{$.locale.Tr "repo.projects.column.set_default"}}
</a>
{{else}}
<a class="item show-modal button default-project-board-show"
data-modal="#default-project-board-modal-{{.ID}}"
data-modal-default-project-board-header="{{$.locale.Tr "repo.projects.column.unset_default"}}"
data-modal-default-project-board-content="{{$.locale.Tr "repo.projects.column.unset_default_desc"}}"
data-url="{{$.Link}}/{{.ID}}/unsetdefault">
{{svg "octicon-pin-slash"}}
{{$.locale.Tr "repo.projects.column.unset_default"}}
</a>
{{end}}
<a class="item show-modal button show-delete-column-modal"
data-modal="#delete-board-modal-{{.ID}}"
data-url="{{$.Link}}/{{.ID}}"
>
{{svg "octicon-trash"}}
{{$.locale.Tr "repo.projects.column.delete"}}
</a>
<div class="ui small modal edit-project-board" id="edit-project-board-modal-{{.ID}}">
<div class="header">
{{$.locale.Tr "repo.projects.column.edit"}}
</div>
<div class="content">
<form class="ui form">
<div class="required field">
<label for="new_board_title">{{$.locale.Tr "repo.projects.column.edit_title"}}</label>
<input class="project-board-title" id="new_board_title" name="title" value="{{.Title}}" required>
</div>
<div class="field color-field">
<label for="new_board_color">{{$.locale.Tr "repo.projects.column.color"}}</label>
<div class="color picker column">
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color" name="color" value="{{.Color}}">
<div class="column precolors">
{{template "repo/issue/label_precolors"}}
</div>
</div>
</div>
<div class="text right actions">
<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
<button data-url="{{$.Link}}/{{.ID}}" class="ui primary button edit-column-button">{{$.locale.Tr "repo.projects.column.edit"}}</button>
</div>
</form>
</div>
</div>
<div class="ui g-modal-confirm modal default-project-board-modal" id="default-project-board-modal-{{.ID}}">
<div class="header">
<span id="default-project-board-header"></span>
</div>
<div class="content">
<label id="default-project-board-content"></label>
</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
</div>
<div class="ui g-modal-confirm modal" id="delete-board-modal-{{.ID}}">
<div class="header">
{{$.locale.Tr "repo.projects.column.delete"}}
</div>
<div class="content">
<label>
{{$.locale.Tr "repo.projects.column.deletion_desc"}}
</label>
</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
</div>
</div>
</div>
{{end}}
</div>
<div class="ui divider"></div>
<div class="ui cards board" data-url="{{$.Link}}/{{.ID}}" data-project="{{$.Project.ID}}" data-board="{{.ID}}" id="board_{{.ID}}">
{{range (index $.IssuesMap .ID)}}
<!-- start issue card -->
<div class="card board-card" data-issue="{{.ID}}">
{{if eq $.Project.CardType 1}}{{/* Images and Text*/}}
<div class="card-attachment-images">
{{range (index $.issuesAttachmentMap .ID)}}
<img src="{{.DownloadURL}}" alt="{{.Name}}" />
{{end}}
</div>
{{end}}
<div class="content gt-p-0">
<div class="header">
<span class="gt-dif gt-ac gt-vm">
{{template "shared/issueicon" .}}
</span>
<a class="project-board-title gt-vm" href="{{.Link}}">
{{.Title}}
</a>
</div>
<div class="meta gt-my-2">
<span class="text light grey">
{{.Repo.FullName}}#{{.Index}}
{{$timeStr := TimeSinceUnix .GetLastEventTimestamp $.locale}}
{{if .OriginalAuthor}}
{{$.locale.Tr .GetLastEventLabelFake $timeStr (.OriginalAuthor|Escape) | Safe}}
{{else if gt .Poster.ID 0}}
{{$.locale.Tr .GetLastEventLabel $timeStr (.Poster.HomeLink|Escape) (.Poster.GetDisplayName | Escape) | Safe}}
{{else}}
{{$.locale.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}}
{{end}}
</span>
</div>
{{- if .MilestoneID}}
<div class="meta gt-my-2">
<a class="milestone" href="{{$.RepoLink}}/milestone/{{.MilestoneID}}">
{{svg "octicon-milestone" 16 "gt-mr-2 gt-vm"}}
<span class="gt-vm">{{.Milestone.Name}}</span>
</a>
</div>
{{- end}}
{{- range index $.LinkedPRs .ID}}
<div class="meta gt-my-2">
<a href="{{$.RepoLink}}/pulls/{{.Index}}">
<span class="gt-m-0 text {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "gt-mr-2 gt-vm"}}</span>
<span class="gt-vm">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
</a>
</div>
{{- end}}
</div>
{{if or .Labels .Assignees}}
<div class="extra content labels-list gt-p-0 gt-pt-2">
{{range .Labels}}
<a target="_blank" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{RenderLabel $.Context .}}</a>
{{end}}
<div class="right floated">
{{range .Assignees}}
<a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{$.locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{avatar $.Context . 28 "mini gt-mr-3"}}</a>
{{end}}
</div>
</div>
{{end}}
</div>
<!-- stop issue card -->
{{end}}
</div>
</div>
{{end}}
</div>
</div>
</div>
{{if .CanWriteProjects}}
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.projects.deletion"}}
</div>
<div class="content">
<p>{{.locale.Tr "repo.projects.deletion_desc"}}</p>
</div>
{{template "base/modal_actions_confirm" .}}
</div>
{{end}}