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>

templates/repo/issue/view_title.tmpl

@@ -1,19 +1,21 @@
 <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>
 			<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-buttons">
-				<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>
 		{{end}}
 	</div>
 	{{if .HasMerged}}

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;
     };

web_src/less/_repository.less

@@ -632,24 +632,73 @@
     .title {
       padding-bottom: 0 !important;
 
+      .issue-title {
+        margin-bottom: .5rem;
+
+        &.edit-active {
+          display: flex;
+          align-items: center;
+
+          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;
+                }
+              }
+            }
+          }
+        }
+
         h1 {
           font-weight: 300;
           font-size: 2.3rem;
-        margin-bottom: 5px;
+          margin: 0;
+          padding-right: .5rem;
 
           .ui.input {
             font-size: .5em;
-          vertical-align: top;
+            width: 100%;
-          width: 50%;
-          min-width: 600px;
 
             input {
               font-size: 1.5em;
-            padding: 6px 10px;
+              padding: 6px 1rem;
             }
           }
         }
 
+        .edit-button {
+          float: right;
+          padding-left: 1rem;
+        }
+
+        .edit-buttons {
+          display: flex;
+        }
+
         .index {
           font-weight: 300;
           color: #aaaaaa;
@@ -664,6 +713,7 @@
           margin-top: 10px;
         }
       }
+    }
 
     .pull-desc {
       code {