Prettify timeline 3 (#11139)

* Fix timeline comments sections borders

* Fix files dropzone right alignment

* Update review comment form and controls

* Clear segment style from comment form tabs

* Remove segment class from pulls tab

* Fix Time Tracker - Add Time button border

* Fix buttons right alignment

* Markdown tab minimal height

* Fix DropZone hover effect

* Fix Lint + remove unused controls class

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: zeripath <art27@cantab.net>

4 files changed, 59 insertions, 47 deletions

diff --git a/templates/repo/issue/comment_tab.tmpl b/templates/repo/issue/comment_tab.tmpl
index be113e539a..77537edf73 100644
--- a/templates/repo/issue/comment_tab.tmpl
+++ b/templates/repo/issue/comment_tab.tmpl
@@ -1,17 +1,19 @@
+<div class="ui top tabular menu" data-write="write" data-preview="preview">
+	<a class="active item" data-tab="write">{{.i18n.Tr "write"}}</a>
+	<a class="item" data-tab="preview" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.RepoLink}}">{{.i18n.Tr "preview"}}</a>
+</div>
 <div class="field">
-	<div class="ui top attached tabular menu" data-write="write" data-preview="preview">
-		<a class="active item" data-tab="write">{{.i18n.Tr "write"}}</a>
-		<a class="item" data-tab="preview" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.RepoLink}}">{{.i18n.Tr "preview"}}</a>
-	</div>
-	<div class="ui bottom attached active tab segment" data-tab="write">
+	<div class="ui bottom active tab" data-tab="write">
 		<textarea id="content" class="edit_area js-quick-submit" name="content" tabindex="4" data-id="issue-{{.RepoName}}" data-url="{{.Repository.APIURL}}/markdown" data-context="{{.Repo.RepoLink}}">
 {{if .BodyQuery}}{{.BodyQuery}}{{else if .IssueTemplate}}{{.IssueTemplate}}{{else if .PullRequestTemplate}}{{.PullRequestTemplate}}{{else}}{{.content}}{{end}}</textarea>
 	</div>
-	<div class="ui bottom attached tab segment markdown" data-tab="preview">
+	<div class="ui bottom tab markdown" data-tab="preview">
 		{{.i18n.Tr "loading"}}
 	</div>
 </div>
 {{if .IsAttachmentEnabled}}
+<div class="field">
 	<div class="files"></div>
-	<div class="ui basic button dropzone" id="dropzone" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-max-file="{{.AttachmentMaxFiles}}" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
+	<div class="ui dropzone" id="dropzone" data-upload-url="{{AppSubUrl}}/attachments" data-accepts="{{.AttachmentAllowedTypes}}" data-max-file="{{.AttachmentMaxFiles}}" data-max-size="{{.AttachmentMaxSize}}" data-default-message="{{.i18n.Tr "dropzone.default_message"}}" data-invalid-input-type="{{.i18n.Tr "dropzone.invalid_input_type"}}" data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}" data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}"></div>
+</div>
 {{end}}
diff --git a/templates/repo/issue/view.tmpl b/templates/repo/issue/view.tmpl
index 7fcc1f2647..6abf84cab9 100644
--- a/templates/repo/issue/view.tmpl
+++ b/templates/repo/issue/view.tmpl
@@ -20,7 +20,7 @@
 		{{if .Issue.IsPull}}
 			{{template "repo/issue/view_title" .}}
 			{{template "repo/pulls/tab_menu" .}}
-			<div class="ui bottom attached tab pull segment active" data-tab="request-{{.ID}}">
+			<div class="ui bottom attached tab pull active" data-tab="request-{{.ID}}">
 				{{template "repo/issue/view_content" .}}
 			</div>
 		{{else}}
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 2e42c75772..9f3f61ee43 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -87,21 +87,23 @@
 							{{template "repo/issue/comment_tab" .}}
 							{{.CsrfTokenHtml}}
 							<input id="status" name="status" type="hidden">
-							<div class="text right">
-								{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
-									{{if .Issue.IsClosed}}
-										<div id="status-button" class="ui green basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
-											{{.i18n.Tr "repo.issues.reopen_issue"}}
-										</div>
-									{{else}}
-										<div id="status-button" class="ui red basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.close_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.close_comment_issue"}}" data-status-val="close">
-											{{.i18n.Tr "repo.issues.close_issue"}}
-										</div>
+							<div class="field footer">
+								<div class="text right">
+									{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
+										{{if .Issue.IsClosed}}
+											<div id="status-button" class="ui green basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
+												{{.i18n.Tr "repo.issues.reopen_issue"}}
+											</div>
+										{{else}}
+											<div id="status-button" class="ui red basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.close_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.close_comment_issue"}}" data-status-val="close">
+												{{.i18n.Tr "repo.issues.close_issue"}}
+											</div>
+										{{end}}
 									{{end}}
-								{{end}}
-								<button class="ui green button" tabindex="5">
-									{{.i18n.Tr "repo.issues.create_comment"}}
-								</button>
+									<button class="ui green button" tabindex="5">
+										{{.i18n.Tr "repo.issues.create_comment"}}
+									</button>
+								</div>
 							</div>
 						</form>
 					</div>
@@ -136,21 +138,23 @@
 								{{template "repo/issue/comment_tab" .}}
 								{{.CsrfTokenHtml}}
 								<input id="status" name="status" type="hidden">
-								<div class="text right">
-									{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
-										{{if .Issue.IsClosed}}
-											<div id="status-button" class="ui green basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
-												{{.i18n.Tr "repo.issues.reopen_issue"}}
-											</div>
-										{{else}}
-											<div id="status-button" class="ui red basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.close_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.close_comment_issue"}}" data-status-val="close">
-												{{.i18n.Tr "repo.issues.close_issue"}}
-											</div>
+								<div class="field footer">
+									<div class="text right">
+										{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .DisableStatusChange)}}
+											{{if .Issue.IsClosed}}
+												<div id="status-button" class="ui green basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.reopen_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.reopen_comment_issue"}}" data-status-val="reopen">
+													{{.i18n.Tr "repo.issues.reopen_issue"}}
+												</div>
+											{{else}}
+												<div id="status-button" class="ui red basic button" tabindex="6" data-status="{{.i18n.Tr "repo.issues.close_issue"}}" data-status-and-comment="{{.i18n.Tr "repo.issues.close_comment_issue"}}" data-status-val="close">
+													{{.i18n.Tr "repo.issues.close_issue"}}
+												</div>
+											{{end}}
 										{{end}}
-									{{end}}
-									<button class="ui green button" tabindex="5">
-										{{.i18n.Tr "repo.issues.create_comment"}}
-									</button>
+										<button class="ui green button" tabindex="5">
+											{{.i18n.Tr "repo.issues.create_comment"}}
+										</button>
+									</div>
 								</div>
 							</form>
 						</div>
@@ -171,19 +175,22 @@
 
 <div class="hide" id="edit-content-form">
 	<div class="ui comment form">
-		<div class="ui top attached tabular menu">
+		<div class="ui top tabular menu">
 			<a class="active write item">{{$.i18n.Tr "write"}}</a>
 			<a class="preview item" data-url="{{$.Repository.APIURL}}/markdown" data-context="{{$.RepoLink}}">{{$.i18n.Tr "preview"}}</a>
 		</div>
-		<div class="ui bottom attached active write tab segment">
-			<textarea tabindex="1" name="content"></textarea>
-		</div>
-		<div class="ui bottom attached tab preview segment markdown">
-			{{$.i18n.Tr "loading"}}
+		<div class="field">
+			<div class="ui bottom active tab write">
+				<textarea tabindex="1" name="content"></textarea>
+			</div>
+			<div class="ui bottom tab preview markdown">
+				{{$.i18n.Tr "loading"}}
+			</div>
 		</div>
 		{{if .IsAttachmentEnabled}}
+		<div class="field">
 			<div class="comment-files"></div>
-			<div class="ui basic button dropzone" id="comment-dropzone"
+			<div class="ui dropzone" id="comment-dropzone"
 				data-upload-url="{{AppSubUrl}}/attachments"
 				data-remove-url="{{AppSubUrl}}/attachments/delete"
 				data-csrf="{{.CsrfToken}}" data-accepts="{{.AttachmentAllowedTypes}}"
@@ -193,10 +200,13 @@
 				data-file-too-big="{{.i18n.Tr "dropzone.file_too_big"}}"
 				data-remove-file="{{.i18n.Tr "dropzone.remove_file"}}">
 			</div>
+		</div>
 		{{end}}
-		<div class="text right edit buttons">
-			<div class="ui basic blue cancel button" tabindex="3">{{.i18n.Tr "repo.issues.cancel"}}</div>
-			<div class="ui green save button" tabindex="2">{{.i18n.Tr "repo.issues.save"}}</div>
+		<div class="field footer">
+			<div class="text right edit">
+				<div class="ui basic blue cancel button" tabindex="3">{{.i18n.Tr "repo.issues.cancel"}}</div>
+				<div class="ui green save button" tabindex="2">{{.i18n.Tr "repo.issues.save"}}</div>
+			</div>
 		</div>
 	</div>
 </div>
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 0f34231b17..bcc69a48b8 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -304,7 +304,6 @@
 							{{end}}
 							<div class="ui buttons two fluid start-add">
 								<button onclick="this.disabled=true;window.toggleStopwatch()" class="ui button poping up start" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
-								<button onclick="window.timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
 								<div class="ui mini modal">
 									<div class="header">{{.i18n.Tr "repo.issues.add_time"}}</div>
 									<div class="content">
@@ -319,6 +318,7 @@
 										<div class="ui red cancel button">{{.i18n.Tr "repo.issues.add_time_cancel"}}</div>
 									</div>
 								</div>
+								<button onclick="window.timeAddManual()" class="ui button green poping up add-time" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
 							</div>
 						{{end}}
 					</div>