femsci/forgejo
femsci/forgejo
1
0
Fork 0
forked from NYANDEV/forgejo
Code Pull requests Activity

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="sixteen wide column title">
<div class="ui grid"> <div class="issue-title" id="issue-title-wrapper">
<h1 class="twelve wide column"> {{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> <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"> <div id="edit-title-input" class="ui input" style="display: none">
<input value="{{.Issue.Title}}" maxlength="255"> <input value="{{.Issue.Title}}" maxlength="255">
</div> </div>
</h1> </h1>
{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
<div class="four wide column"> <div class="edit-buttons">
<div class="edit-zone text right"> <div id="cancel-edit-title" class="ui basic blue in-edit button" style="display: none">{{.i18n.Tr "repo.issues.cancel"}}</div>
<div id="edit-title" class="ui basic green not-in-edit button">{{.i18n.Tr "repo.issues.edit"}}</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 id="cancel-edit-title" class="ui basic blue in-edit button" style="display: none">{{.i18n.Tr "repo.issues.cancel"}}</div> </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>
{{end}} {{end}}
</div> </div>
{{if .HasMerged}} {{if .HasMerged}}

1
web_src/js/index.js
View file

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

96
web_src/less/_repository.less
View file

@ -632,36 +632,86 @@
.title { .title {
padding-bottom: 0 !important; padding-bottom: 0 !important;
h1 { .issue-title {
font-weight: 300; margin-bottom: .5rem;
font-size: 2.3rem;
margin-bottom: 5px;
.ui.input { &.edit-active {
font-size: .5em; display: flex;
vertical-align: top; align-items: center;
width: 50%;
min-width: 600px;
input { h1 {
font-size: 1.5em; display: flex;
padding: 6px 10px; 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 { h1 {
font-weight: 300; font-weight: 300;
color: #aaaaaa; font-size: 2.3rem;
letter-spacing: -1px; margin: 0;
} padding-right: .5rem;
.label { .ui.input {
margin-right: 10px; font-size: .5em;
} width: 100%;
.edit-zone { input {
margin-top: 10px; 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;
}
} }
} }