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>release/v1.15
parent
4099e4f1b6
commit
f24392391e
|
@ -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}}
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue