forgejo/templates/repo/release/new.tmpl
puni9869 5a56f9699c
Fix UI for release tag page / wiki page / subscription page (#25948)
Agenda:
This PR contains UI fixes for release tag page / wiki page /
subscription page.
Here is the list of changes made in this PR.
1. Release tag page
a. In the New Release page the whole ui got change. Now it is covering
in full page page with mobile view port. Description about the release
the editor preview now has a min-height. and the check boxes for
`Prerelease` and option are left aligned. Couple of divider are added.

2. Subscription page: 
a. In the subscription page the ui was distorted in mobile view. Now its
fix. Couple of unused styles were removed.

3. Create Wiki page:- 
a. In the page the preview of markdown is now contains a fix min-height
so this it will not distorted in desktop view and a divider is added
before action buttons. Couple of unused styles were removed.

# Before

## Release page

<img width="1391" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/319dec2e-08cf-40c5-920a-d651930ee28e">

<img width="494" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/03249f40-2d36-4552-bb93-43832aac2f8b">

<img width="1390" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/bf8b2d31-4857-480b-abd9-66a3ae6e24d8">

<img width="484" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/c3a58210-a337-4c8e-89a6-edb3975986bb">

Editor 
<img width="958" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/3bdd299d-d12b-4774-ace9-7184b1a57b18">

Editor preview
<img width="1293" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/2b61c528-c018-4800-ab86-07aae56adecd">

<img width="484" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/ff7bc5ee-9dc0-4f78-a0b1-94277ab27700">

#### After
<img width="1439" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/94f7e073-5977-40bd-98ef-0711ed0815cc">

<img width="1384" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/83e3105f-c1ee-4329-b90f-8bb724dac50f">
<img width="1440" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/05f024a5-52eb-4072-8599-d6ca12f6fad1">
<img width="1387" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/c73f069b-572a-4a13-aaa9-fc5b4dd3420d">

<img width="1440" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/2f98f012-8e64-4a12-9595-5acdef18f85c">

Markdown preview change
<img width="1368" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/31e583ec-48f6-4f1a-8b56-0164fcb127a5">


Wiki page

Before
<img width="1393" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/9c9cfdf6-3c2a-4f47-883b-76624d96f9a0">
<img width="499" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/522ad573-1ad2-4fa2-8bf7-48a3dded14e7">


Preview of mark down. 
<img width="488" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/998f3c25-9fca-43c8-b1ff-648aab291727">

Footer 
<img width="490" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/89c6cf4e-4599-4403-bac8-285efdd9361a">

After

<img width="1389" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/1ee0fc72-f864-44c0-b2e4-e0e8a8470204">
<img width="498" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/b35b9a5d-8e26-4869-a6ed-6cef1f4a87a6">
<img width="499" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/b40bcbaa-fca6-42ab-9556-f950811b565d">

Preview tab block has min-height 
<img width="1392" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/4a53d6c2-596c-423a-91b1-533cef734f93">


Mobile view
<img width="496" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/c5ffc4c9-3c21-4cad-bc32-2ea3f0644a08">

<img width="497" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/08dd560f-4333-41ec-95b9-8154910d2254">
<img width="496" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/9fba8f55-727b-4756-a4a6-2070c719b15b">



## Subscription page

### Before

<img width="1393" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/0a7d561b-f56c-4ebe-93bd-952abecd437f">

<img width="492" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/4dc44d0c-ea81-4130-8afb-8f271c029e8a">

After
<img width="1394" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/a3567e30-2b5b-49d6-9ecb-2ab481ea4d36">


<img width="494" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/024da9e2-dfc4-4672-95cc-a6ac034d9712">

<img width="508" alt="image"
src="https://github.com/go-gitea/gitea/assets/80308335/b748ecea-427c-4f8b-a1bf-08f82f9a42e6">
2023-07-25 17:53:16 +00:00

150 lines
5.8 KiB
Handlebars

{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository new release">
{{template "repo/header" .}}
<div class="ui container">
<h2 class="ui dividing header">
{{if .PageIsEditRelease}}
{{.locale.Tr "repo.release.edit_release"}}
<div class="sub header">{{.locale.Tr "repo.release.edit_subheader"}}</div>
{{else}}
{{.locale.Tr "repo.release.new_release"}}
<div class="sub header">{{.locale.Tr "repo.release.new_subheader"}}</div>
{{end}}
</h2>
{{template "base/alert" .}}
<form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
<div class="ui seven wide target">
<div class="inline field {{if .Err_TagName}}error{{end}}">
{{if .PageIsEditRelease}}
<b>{{.tag_name}}</b><span class="at">@</span><strong>{{.tag_target}}</strong>
{{else}}
<input id="tag-name" name="tag_name" value="{{.tag_name}}" aria-label="{{.locale.Tr "repo.release.tag_name"}}" placeholder="{{.locale.Tr "repo.release.tag_name"}}" autofocus required maxlength="255">
<input id="tag-name-editor" type="hidden" data-existing-tags="{{JsonUtils.EncodeToString .Tags}}" data-tag-helper="{{.locale.Tr "repo.release.tag_helper"}}" data-tag-helper-new="{{.locale.Tr "repo.release.tag_helper_new"}}" data-tag-helper-existing="{{.locale.Tr "repo.release.tag_helper_existing"}}">
<div id="tag-target-selector" class="gt-dib">
<span class="at">@</span>
<div class="ui selection dropdown">
<input type="hidden" name="tag_target" value="{{.tag_target}}">
{{svg "octicon-git-branch"}}
<div class="text">
{{.locale.Tr "repo.release.target"}} :
<strong id="repo-branch-current">{{.Repository.DefaultBranch}}</strong>
</div>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
{{range .Branches}}
<div class="item" data-value="{{.}}">{{.}}</div>
{{end}}
</div>
</div>
</div>
<div>
<span id="tag-helper" class="help gt-mt-3 gt-pb-0">{{.locale.Tr "repo.release.tag_helper"}}</span>
</div>
{{end}}
</div>
</div>
<div class="eleven wide gt-pt-0">
<div class="field {{if .Err_Title}}error{{end}}">
<input name="title" aria-label="{{.locale.Tr "repo.release.title"}}" placeholder="{{.locale.Tr "repo.release.title"}}" value="{{.title}}" autofocus maxlength="255">
</div>
<div class="field">
{{template "shared/combomarkdowneditor" (dict
"locale" $.locale
"MarkdownPreviewUrl" (print .Repository.Link "/markup")
"MarkdownPreviewContext" .RepoLink
"TextareaName" "content"
"TextareaContent" .content
"TextareaPlaceholder" (.locale.Tr "repo.release.message")
"TextareaAriaLabel" (.locale.Tr "repo.release.message")
"DropzoneParentContainer" "form"
)}}
</div>
{{range .attachments}}
<div class="field" id="attachment-{{.ID}}">
<div class="ui right gt-df gt-ac wrap_remove">
<a class="ui mini compact red button remove-rel-attach" data-id="{{.ID}}" data-uuid="{{.UUID}}">
{{$.locale.Tr "remove"}}
</a>
</div>
<div class="gt-df gt-ac">
<input name="attachment-edit-{{.UUID}}" class="gt-mr-3 attachment_edit" required value="{{.Name}}">
<input name="attachment-del-{{.UUID}}" type="hidden" value="false">
<span class="ui text grey gt-mr-3">{{.Size | FileSize}}</span>
<span data-tooltip-content="{{$.locale.Tr "repo.release.download_count" ($.locale.PrettyNumber .DownloadCount)}}">
{{svg "octicon-info"}}
</span>
</div>
</div>
{{end}}
{{if .IsAttachmentEnabled}}
<div class="field">
{{template "repo/upload" .}}
</div>
{{end}}
</div>
<div class="divider"></div>
<div class="ui">
<div>
{{if not .PageIsEditRelease}}
<div class="tag-message field">
<div class="ui checkbox">
<input type="checkbox" name="add_tag_msg">
<label><strong>{{.locale.Tr "repo.release.add_tag_msg"}}</strong></label>
</div>
</div>
{{else}}
<input type="hidden" name="add_tag_msg" value="false">
{{end}}
<div class="prerelease field">
<div class="ui checkbox">
<input type="checkbox" name="prerelease" {{if .prerelease}}checked{{end}}>
<label><strong>{{.locale.Tr "repo.release.prerelease_desc"}}</strong></label>
</div>
</div>
<span class="help">{{.locale.Tr "repo.release.prerelease_helper"}}</span>
<div class="divider gt-mt-0"></div>
<div class="gt-df gt-je">
{{if .PageIsEditRelease}}
<a class="ui small button" href="{{.RepoLink}}/releases">
{{.locale.Tr "repo.release.cancel"}}
</a>
<a class="ui small red button delete-button" data-url="{{$.RepoLink}}/releases/delete" data-id="{{.ID}}">
{{$.locale.Tr "repo.release.delete_release"}}
</a>
{{if .IsDraft}}
<button class="ui small button" type="submit" name="draft" value="{{.locale.Tr "repo.release.save_draft"}}">{{.locale.Tr "repo.release.save_draft"}}</button>
<button class="ui small primary button">
{{.locale.Tr "repo.release.publish"}}
</button>
{{else}}
<button class="ui small primary button">
{{.locale.Tr "repo.release.edit_release"}}
</button>
{{end}}
{{else}}
<button class="ui small primary button">
{{.locale.Tr "repo.release.publish"}}
</button>
{{end}}
</div>
</div>
</div>
</form>
</div>
</div>
{{if .PageIsEditRelease}}
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.release.deletion"}}
</div>
<div class="content">
<p>{{.locale.Tr "repo.release.deletion_desc"}}</p>
</div>
{{template "base/modal_actions_confirm" .}}
</div>
{{end}}
{{template "base/footer" .}}