From f24392391eaaa19bb42cb59772a03d2dace3b77c Mon Sep 17 00:00:00 2001 From: kolaente Date: Sat, 24 Oct 2020 18:48:08 +0200 Subject: [PATCH] Fix PR/Issue titles on mobile (#13292) * Start fixing Issue & PR title on mobile Signed-off-by: kolaente * Make sure the save & cancel buttons float right Signed-off-by: kolaente * Fix edit buttons and title input on mobile Co-authored-by: Lunny Xiao --- templates/repo/issue/view_title.tmpl | 20 +++--- web_src/js/index.js | 1 + web_src/less/_repository.less | 96 +++++++++++++++++++++------- 3 files changed, 85 insertions(+), 32 deletions(-) diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl index a916f7ca17..336b8850c2 100644 --- a/templates/repo/issue/view_title.tmpl +++ b/templates/repo/issue/view_title.tmpl @@ -1,19 +1,21 @@
-
-

+
+ {{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} +
+
{{.i18n.Tr "repo.issues.edit"}}
+
+ {{end}} +

#{{.Issue.Index}} {{RenderEmoji .Issue.Title}}

{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}} -
-
-
{{.i18n.Tr "repo.issues.edit"}}
- - -
-
+
+ + +
{{end}}
{{if .HasMerged}} diff --git a/web_src/js/index.js b/web_src/js/index.js index 489651e3b1..c25bce1d00 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -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; }; diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 0c8939181f..46d8376c13 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -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; + } } }