Fix PR/Issue titles on mobile (#13292)
* 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:
parent
4099e4f1b6
commit
f24392391e
3 changed files with 85 additions and 32 deletions
|
@ -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}}
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Reference in a new issue