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>

diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index a916f7ca173f7f27e4b0cc3c793d7a48f85e38f8..336b8850c28878bfa5feb3a51574ddf46ca4ac41 100644 (file)
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -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}}

diff --git a/web_src/js/index.js b/web_src/js/index.js
index 489651e3b1325590b2d6871b54a872bb01c313fe..c25bce1d005eae17857fed31601b7332c0534964 100644 (file)
--- 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 0c8939181f542e78adcc20bf3a03cb4fb188b294..46d8376c138c3388fcaa4e71eb746a2f3dd3d847 100644 (file)
--- 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;
+        }
       }
     }