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

Fix PR/Issue titles on mobile (#13292)

Browse source 
* Start fixing Issue & PR title on mobile

Signed-off-by: kolaente <k@knt.li>

* Make sure the save & cancel buttons float right

Signed-off-by: kolaente <k@knt.li>

* Fix edit buttons and title input on mobile

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
This commit is contained in:
kolaente 2020-10-24 18:48:08 +02:00 • committed by GitHub
parent 4099e4f1b6
commit f24392391e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 85 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
templates/repo/issue/view_title.tmpl
View file

@ -1,19 +1,21 @@
<div class="sixteen wide column title">
<div class="ui grid">
<h1 class="twelve wide column">
<div class="issue-title" id="issue-title-wrapper">
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
<div class="edit-button">
<div id="edit-title" class="ui basic green not-in-edit button">{{.i18n.Tr "repo.issues.edit"}}</div>
</div>
{{end}}
<h1>
<span class="index">#{{.Issue.Index}}</span> <span id="issue-title">{{RenderEmoji .Issue.Title}}</span>
<div id="edit-title-input" class="ui input" style="display: none">
<input value="{{.Issue.Title}}" maxlength="255">
</div>
</h1>
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
<div class="four wide column">
<div class="edit-zone text right">
<div id="edit-title" class="ui basic green not-in-edit button">{{.i18n.Tr "repo.issues.edit"}}</div>
<div id="cancel-edit-title" class="ui basic blue in-edit button" style="display: none">{{.i18n.Tr "repo.issues.cancel"}}</div>
<div id="save-edit-title" class="ui green in-edit button" style="display: none" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.i18n.Tr "repo.issues.save"}}</div>
</div>
</div>
<div class="edit-buttons">
<div id="cancel-edit-title" class="ui basic blue in-edit button" style="display: none">{{.i18n.Tr "repo.issues.cancel"}}</div>
<div id="save-edit-title" class="ui green in-edit button" style="display: none" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.i18n.Tr "repo.issues.save"}}</div>
</div>
{{end}}
</div>
{{if .HasMerged}}

1
web_src/js/index.js
View file

@ -792,6 +792,7 @@ async function initRepository() {
$('#pull-desc').toggle();
$('#pull-desc-edit').toggle();
$('.in-edit').toggle();
$('#issue-title-wrapper').toggleClass('edit-active');
$editInput.focus();
return false;
};

96
web_src/less/_repository.less
View file

@ -632,36 +632,86 @@
.title {
padding-bottom: 0 !important;
h1 {
font-weight: 300;
font-size: 2.3rem;
margin-bottom: 5px;
.issue-title {
margin-bottom: .5rem;
.ui.input {
font-size: .5em;
vertical-align: top;
width: 50%;
min-width: 600px;
&.edit-active {
display: flex;
align-items: center;
input {
font-size: 1.5em;
padding: 6px 10px;
h1 {
display: flex;
width: 100%;
}
@media only screen and (max-width: 768px) {
flex-direction: column;
h1 {
margin-right: 0;
margin-bottom: 1rem;
padding-right: 0;
.ui.input input {
width: calc(100% - 2rem);
}
}
.edit-buttons {
padding-bottom: 1rem;
width: 100%;
.button {
width: 100%;
margin-right: .5rem;
&:last-child {
margin-right: 0;
}
}
}
}
}
}
.index {
font-weight: 300;
color: #aaaaaa;
letter-spacing: -1px;
}
h1 {
font-weight: 300;
font-size: 2.3rem;
margin: 0;
padding-right: .5rem;
.label {
margin-right: 10px;
}
.ui.input {
font-size: .5em;
width: 100%;
.edit-zone {
margin-top: 10px;
input {
font-size: 1.5em;
padding: 6px 1rem;
}
}
}
.edit-button {
float: right;
padding-left: 1rem;
}
.edit-buttons {
display: flex;
}
.index {
font-weight: 300;
color: #aaaaaa;
letter-spacing: -1px;
}
.label {
margin-right: 10px;
}
.edit-zone {
margin-top: 10px;
}
}
}