Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fix UI for release tag page / wiki page / subscription page (#25948)

Browse source 
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">
This commit is contained in:
puni9869 2023-07-25 23:23:16 +05:30 committed by GitHub
parent 5446d65b0a
commit 5a56f9699c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 26 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
templates/repo/release/new.tmpl
View file

@ -12,9 +12,9 @@
{{end}} {{end}}
</h2> </h2>
{{template "base/alert" .}} {{template "base/alert" .}}
<form class="ui form stackable grid" action="{{.Link}}" method="post"> <form class="ui form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}} {{.CsrfTokenHtml}}
<div class="ui seven wide column target"> <div class="ui seven wide target">
<div class="inline field {{if .Err_TagName}}error{{end}}"> <div class="inline field {{if .Err_TagName}}error{{end}}">
{{if .PageIsEditRelease}} {{if .PageIsEditRelease}}
<b>{{.tag_name}}</b><span class="at">@</span><strong>{{.tag_target}}</strong> <b>{{.tag_name}}</b><span class="at">@</span><strong>{{.tag_target}}</strong>
@ -44,7 +44,7 @@
{{end}} {{end}}
</div> </div>
</div> </div>
<div class="eleven wide column gt-pt-0"> <div class="eleven wide gt-pt-0">
<div class="field {{if .Err_Title}}error{{end}}"> <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"> <input name="title" aria-label="{{.locale.Tr "repo.release.title"}}" placeholder="{{.locale.Tr "repo.release.title"}}" value="{{.title}}" autofocus maxlength="255">
</div> </div>
@ -83,9 +83,9 @@
</div> </div>
{{end}} {{end}}
</div> </div>
<div class="ui container">
<div class="divider"></div> <div class="divider"></div>
<div class="ui text right"> <div class="ui">
<div>
{{if not .PageIsEditRelease}} {{if not .PageIsEditRelease}}
<div class="tag-message field"> <div class="tag-message field">
<div class="ui checkbox"> <div class="ui checkbox">
@ -103,30 +103,27 @@
</div> </div>
</div> </div>
<span class="help">{{.locale.Tr "repo.release.prerelease_helper"}}</span> <span class="help">{{.locale.Tr "repo.release.prerelease_helper"}}</span>
<div class="field"> <div class="divider gt-mt-0"></div>
<div class="gt-df gt-je">
{{if .PageIsEditRelease}} {{if .PageIsEditRelease}}
<a class="ui button" href="{{.RepoLink}}/releases"> <a class="ui small button" href="{{.RepoLink}}/releases">
{{.locale.Tr "repo.release.cancel"}} {{.locale.Tr "repo.release.cancel"}}
</a> </a>
<a class="ui red button delete-button" data-url="{{$.RepoLink}}/releases/delete" data-id="{{.ID}}"> <a class="ui small red button delete-button" data-url="{{$.RepoLink}}/releases/delete" data-id="{{.ID}}">
{{$.locale.Tr "repo.release.delete_release"}} {{$.locale.Tr "repo.release.delete_release"}}
</a> </a>
{{if .IsDraft}} {{if .IsDraft}}
<button class="ui button" type="submit" name="draft" value="{{.locale.Tr "repo.release.save_draft"}}">{{.locale.Tr "repo.release.save_draft"}}</button> <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 primary button"> <button class="ui small primary button">
{{.locale.Tr "repo.release.publish"}} {{.locale.Tr "repo.release.publish"}}
</button> </button>
{{else}} {{else}}
<button class="ui primary button"> <button class="ui small primary button">
{{.locale.Tr "repo.release.edit_release"}} {{.locale.Tr "repo.release.edit_release"}}
</button> </button>
{{end}} {{end}}
{{else}} {{else}}
{{if not .tag_name}} <button class="ui small primary button">
<button class="ui button" type="submit" name="tag_only" value="{{.locale.Tr "repo.release.add_tag"}}">{{.locale.Tr "repo.release.add_tag"}}</button>
{{end}}
<button class="ui button" type="submit" name="draft" value="{{.locale.Tr "repo.release.save_draft"}}">{{.locale.Tr "repo.release.save_draft"}}</button>
<button class="ui primary button">
{{.locale.Tr "repo.release.publish"}} {{.locale.Tr "repo.release.publish"}}
</button> </button>
{{end}} {{end}}

5
templates/repo/wiki/new.tmpl
View file

@ -6,8 +6,8 @@
<div class="ui header"> <div class="ui header">
{{.locale.Tr "repo.wiki.new_page"}} {{.locale.Tr "repo.wiki.new_page"}}
{{if .PageIsWikiEdit}} {{if .PageIsWikiEdit}}
<div class="ui right"> <div class="ui right gt-mb-3">
<a class="ui green small button" href="{{.RepoLink}}/wiki?action=_new">{{.locale.Tr "repo.wiki.new_page_button"}}</a> <a class="ui green tiny button" href="{{.RepoLink}}/wiki?action=_new">{{.locale.Tr "repo.wiki.new_page_button"}}</a>
</div> </div>
{{end}} {{end}}
</div> </div>
@ -37,6 +37,7 @@
<div class="field gt-mt-4"> <div class="field gt-mt-4">
<input name="message" aria-label="{{.locale.Tr "repo.wiki.default_commit_message"}}" placeholder="{{.locale.Tr "repo.wiki.default_commit_message"}}"> <input name="message" aria-label="{{.locale.Tr "repo.wiki.default_commit_message"}}" placeholder="{{.locale.Tr "repo.wiki.default_commit_message"}}">
</div> </div>
<div class="divider"></div>
<div class="text right"> <div class="text right">
<button class="ui green button"> <button class="ui green button">
{{.locale.Tr "repo.wiki.save_page"}} {{.locale.Tr "repo.wiki.save_page"}}

8
templates/user/notification/notification_subscriptions.tmpl
View file

@ -11,8 +11,8 @@
</div> </div>
<div class="ui bottom attached active tab segment"> <div class="ui bottom attached active tab segment">
{{if eq .Status 1}} {{if eq .Status 1}}
<div class="ui stackable grid"> <div class="gt-df gt-sb">
<div class="six wide column"> <div class="gt-df">
<div class="small-menu-items ui compact tiny menu"> <div class="small-menu-items ui compact tiny menu">
<a class="{{if eq .State "all"}}active {{end}}item" href="{{$.Link}}?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}"> <a class="{{if eq .State "all"}}active {{end}}item" href="{{$.Link}}?sort={{$.SortType}}&state=all&issueType={{$.IssueType}}&labels={{$.Labels}}">
{{.locale.Tr "all"}} {{.locale.Tr "all"}}
@ -27,8 +27,8 @@
</a> </a>
</div> </div>
</div> </div>
<div class="seven wide right aligned right floated column"> <div class="gt-df gt-sb">
<div class="ui right aligned secondary filter stackable menu labels"> <div class="ui right aligned secondary filter menu labels">
<!-- Type --> <!-- Type -->
<div class="ui dropdown type jump item"> <div class="ui dropdown type jump item">
<span class="text"> <span class="text">

4
web_src/css/repo/release-tag.css
View file

@ -132,3 +132,7 @@
.repository.new.release .field .attachment_edit { .repository.new.release .field .attachment_edit {
width: 450px !important; width: 450px !important;
} }
.repository.new.release .markup {
min-height: 240px;
}

1
web_src/css/repo/wiki.css
View file

@ -9,6 +9,7 @@
.repository.wiki .markup { .repository.wiki .markup {
overflow: visible; overflow: visible;
min-height: 340px;
} }
.repository.wiki .wiki-content-parts .markup { .repository.wiki .wiki-content-parts .markup {