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>

9 files changed, 76 insertions, 62 deletions

diff --git a/templates/repo/diff/comment_form.tmpl b/templates/repo/diff/comment_form.tmpl
index 1389ed73d4..a286725722 100644
--- a/templates/repo/diff/comment_form.tmpl
+++ b/templates/repo/diff/comment_form.tmpl
@@ -2,7 +2,7 @@
 	{{if $.hidden}}
 		<button class="comment-form-reply ui green labeled icon tiny button"><i class="reply icon"></i> {{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
 	{{end}}
-	<form class="ui form {{if $.hidden}}hide comment-form comment-form-reply{{end}}" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
+	<form class="ui form {{if $.hidden}}hide{{end}} comment-form comment-form-reply" action="{{$.root.Issue.HTMLURL}}/files/reviews/comments" method="post">
 	{{$.root.CsrfTokenHtml}}
 		<input type="hidden" name="latest_commit_id" value="{{$.root.AfterCommitID}}"/>
 		<input type="hidden" name="side" value="{{if $.Side}}{{$.Side}}{{end}}">
@@ -11,30 +11,30 @@
 		<input type="hidden" name="diff_start_cid">
 		<input type="hidden" name="diff_end_cid">
 		<input type="hidden" name="diff_base_cid">
-		<div class="ui top attached tabular menu" {{if not $.hidden}}onload="assingMenuAttributes(this)" {{end}}data-write="write" data-preview="preview">
+		<div class="ui top tabular menu" {{if not $.hidden}}onload="assingMenuAttributes(this)" {{end}}data-write="write" data-preview="preview">
 			<a class="active item" data-tab="write">{{$.root.i18n.Tr "write"}}</a>
 			<a class="item" data-tab="preview" data-url="{{$.root.Repository.APIURL}}/markdown" data-context="{{$.root.RepoLink}}">{{$.root.i18n.Tr "preview"}}</a>
 		</div>
-		<div class="ui bottom attached active tab segment" data-tab="write">
-			<div class="field">
+		<div class="field">
+			<div class="ui active tab" data-tab="write">
 				<textarea name="content" placeholder="{{$.root.i18n.Tr "repo.diff.comment.placeholder"}}"></textarea>
 			</div>
+			<div class="ui tab markdown" data-tab="preview">
+			{{.i18n.Tr "loading"}}
+			</div>
 		</div>
-		<div class="ui bottom attached tab segment markdown" data-tab="preview">
-		{{.i18n.Tr "loading"}}
-		</div>
-		<div class="footer">
+		<div class="field footer">
 			<span class="markdown-info">{{svg "octicon-markdown" 16}} {{$.root.i18n.Tr "repo.diff.comment.markdown_info"}}</span>
-			<div class="ui right floated">
+			<div class="ui right">
 				{{if $.reply}}
-					<input type="hidden" name="reply" value="{{$.reply}}">
 					<button class="ui submit green tiny button btn-reply" onclick="window.submitReply(this);">{{$.root.i18n.Tr "repo.diff.comment.reply"}}</button>
+					<input type="hidden" name="reply" value="{{$.reply}}">
 				{{else}}
 					{{if $.root.CurrentReview}}
 						<button name="is_review" value="true" type="submit"
 								class="ui submit green tiny button btn-add-comment">{{$.root.i18n.Tr "repo.diff.comment.add_review_comment"}}</button>
 					{{else}}
-						<button name="is_review" value="true"  type="submit"
+						<button name="is_review" value="true" type="submit"
 								class="ui submit green tiny button btn-start-review">{{$.root.i18n.Tr "repo.diff.comment.start_review"}}</button>
 						<button type="submit"
 								class="ui submit tiny basic button btn-add-single">{{$.root.i18n.Tr "repo.diff.comment.add_single_comment"}}</button>
diff --git a/templates/repo/editor/upload.tmpl b/templates/repo/editor/upload.tmpl
index f1ca5b756f..7794c2a2d3 100644
--- a/templates/repo/editor/upload.tmpl
+++ b/templates/repo/editor/upload.tmpl
@@ -27,7 +27,7 @@
 			</div>
 			<div class="field">
 				<div class="files"></div>
-				<div class="ui basic button dropzone" id="dropzone" data-upload-url="{{.RepoLink}}/upload-file" data-remove-url="{{.RepoLink}}/upload-remove" data-csrf="{{.CsrfToken}}" data-accepts="{{.UploadAllowedTypes}}" data-max-file="{{.UploadMaxFiles}}" data-max-size="{{.UploadMaxSize}}" 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="{{.RepoLink}}/upload-file" data-remove-url="{{.RepoLink}}/upload-remove" data-csrf="{{.CsrfToken}}" data-accepts="{{.UploadAllowedTypes}}" data-max-file="{{.UploadMaxFiles}}" data-max-size="{{.UploadMaxSize}}" 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>
 			{{template "repo/editor/commit_form" .}}
 		</form>
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>
diff --git a/templates/repo/pulls/commits.tmpl b/templates/repo/pulls/commits.tmpl
index d084f9bc5a..422295f55b 100644
--- a/templates/repo/pulls/commits.tmpl
+++ b/templates/repo/pulls/commits.tmpl
@@ -11,7 +11,7 @@
 		<div class="ui divider"></div>
 		{{template "repo/issue/view_title" .}}
 		{{template "repo/pulls/tab_menu" .}}
-		<div class="ui bottom attached tab pull segment active">
+		<div class="ui bottom attached tab pull active">
 			{{template "repo/commits_table" .}}
 		</div>
 	</div>
diff --git a/templates/repo/pulls/files.tmpl b/templates/repo/pulls/files.tmpl
index c882c0c38e..4caebf0b56 100644
--- a/templates/repo/pulls/files.tmpl
+++ b/templates/repo/pulls/files.tmpl
@@ -12,7 +12,7 @@
 		{{template "repo/issue/view_title" .}}
 		{{template "repo/pulls/tab_menu" .}}
 		{{template "base/alert" .}}
-		<div class="ui bottom attached tab pull segment active">
+		<div class="ui bottom attached tab pull active">
 			{{template "repo/diff/box" .}}
 		</div>
 	</div>
diff --git a/templates/repo/release/new.tmpl b/templates/repo/release/new.tmpl
index c45c5b20bf..2312a614a2 100644
--- a/templates/repo/release/new.tmpl
+++ b/templates/repo/release/new.tmpl
@@ -49,8 +49,10 @@
 					<textarea name="content">{{.content}}</textarea>
 				</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}}
 			</div>
 			<div class="ui container">