Consolidate the two review boxes into one (#24738)

View diff:
https://github.com/go-gitea/gitea/pull/24738/files?diff=unified&w=1

Improve layout and functionality in review area:

<img width="439" alt="Screenshot 2023-05-15 at 20 10 01"
src="https://github.com/go-gitea/gitea/assets/115237/be10452b-5829-4927-8801-7b26a57b3dbd">

Remove the "Reviewers" timeline box that appears before the merge box.
it's a duplicate of the top-right review area and all functionality of
it has been moved to the other box:

<img width="868" alt="Screenshot 2023-05-15 at 19 39 31"
src="https://github.com/go-gitea/gitea/assets/115237/35489445-e54b-40d3-b3cf-38d029478f96">

Increase timeline item vertical padding from 12px to 16px:

<img width="449" alt="Screenshot 2023-05-15 at 19 43 50"
src="https://github.com/go-gitea/gitea/assets/115237/919c4f9d-a485-4f51-b08c-2c0fc714a413">

---------

Co-authored-by: Giteabot <teabot@gitea.io>

templates/explore/repo_list.tmpl

@@ -38,7 +38,7 @@
 						{{end}}
 					</div>
 				</div>
-				<div class="metas gt-df gt-ac text grey">
+				<div class="gt-font-13 gt-df gt-ac text grey">
 					{{if .PrimaryLanguage}}
 						<a class="muted" href="{{$.Link}}?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}">
 							<span class="gt-df gt-ac gt-mr-3"><i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>

templates/package/view.tmpl

@@ -2,9 +2,7 @@
 <div role="main" aria-label="{{.Title}}" class="page-content repository view issue packages">
 	{{template "user/overview/header" .}}
 	<div class="ui container">
-		<div>
+		<div class="issue-title-header">
-			<div class="ui stackable grid">
-				<div class="sixteen wide column title">
 			<div class="issue-title">
 				<h1>{{.PackageDescriptor.Package.Name}} ({{.PackageDescriptor.Version.Version}})</h1>
 			</div>
@@ -16,9 +14,9 @@
 					{{.locale.Tr "packages.published_by" $timeStr .PackageDescriptor.Creator.HomeLink (.PackageDescriptor.Creator.GetDisplayName | Escape) | Safe}}
 				{{end}}
 			</div>
-					<div class="ui divider"></div>
 		</div>
-				<div class="twelve wide column">
+		<div class="issue-content">
+			<div class="issue-content-left">
 				{{template "package/content/alpine" .}}
 				{{template "package/content/cargo" .}}
 				{{template "package/content/chef" .}}
@@ -41,8 +39,7 @@
 				{{template "package/content/swift" .}}
 				{{template "package/content/vagrant" .}}
 			</div>
-				<div class="four wide column">
+			<div class="issue-content-right ui segment">
-					<div class="ui segment metas">
 				<strong>{{.locale.Tr "packages.details"}}</strong>
 				<div class="ui relaxed list">
 					<div class="item">{{svg .PackageDescriptor.Package.Type.SVGName 16 "gt-mr-3"}} {{.PackageDescriptor.Package.Type.Name}}</div>
@@ -115,6 +112,4 @@
 		</div>
 	</div>
 </div>
-	</div>
-</div>
 {{template "base/footer" .}}

templates/repo/issue/new_form.tmpl

@@ -1,15 +1,15 @@
-<form class="ui comment form stackable grid" id="new-issue" action="{{.Link}}" method="post">
+<form class="issue-content ui comment form" id="new-issue" action="{{.Link}}" method="post">
 	{{.CsrfTokenHtml}}
 	{{if .Flash}}
 		<div class="sixteen wide column">
 			{{template "base/alert" .}}
 		</div>
 	{{end}}
-	<div class="twelve wide column">
+	<div class="issue-content-left">
 		<div class="ui comments">
 			<div class="comment">
-				{{template "shared/user/avatarlink" dict "Context" $.Context "user" .SignedUser}}
+				{{avatar $.Context .SignedUser 40}}
-				<div class="ui segment content">
+				<div class="ui segment content gt-my-0">
 					<div class="field">
 						<input name="title" id="issue_title" placeholder="{{.locale.Tr "repo.milestones.title"}}" value="{{if .TitleQuery}}{{.TitleQuery}}{{else if .IssueTemplateTitle}}{{.IssueTemplateTitle}}{{else}}{{.title}}{{end}}" tabindex="3" autofocus required maxlength="255" autocomplete="off">
 						{{if .PageIsComparePull}}
@@ -48,8 +48,7 @@
 		</div>
 	</div>
 
-	<div class="four wide column">
+	<div class="issue-content-right ui segment">
-		<div class="ui segment metas">
 		{{template "repo/issue/branch_selector_field" .}}
 
 		<input id="label_ids" name="label_ids" type="hidden" value="{{.label_ids}}">
@@ -190,5 +189,4 @@
 		{{end}}
 	</div>
 	<input type="hidden" name="redirect_after_creation" value="{{.redirect_after_creation}}">
-	</div>
 </form>

templates/repo/issue/view_content.tmpl

@@ -1,4 +1,4 @@
-<div class="ui stackable grid">
+<div class="issue-content">
 	<!-- I know, there is probably a better way to do this (moved from sidebar.tmpl, original author: 6543 @ 2021-02-28) -->
 	<!-- Agree, there should be a better way, eg: introduce window.config.pageData (original author: wxiaoguang @ 2021-09-05) -->
 	<input type="hidden" id="repolink" value="{{$.RepoRelPath}}">
@@ -7,7 +7,7 @@
 	<input type="hidden" id="type" value="{{.IssueType}}">
 
 	{{$createdStr:= TimeSinceUnix .Issue.CreatedUnix $.locale}}
-	<div class="twelve wide column comment-list prevent-before-timeline">
+	<div class="issue-content-left comment-list prevent-before-timeline">
 		<div class="ui timeline">
 			<div id="{{.Issue.HashTag}}" class="timeline-item comment first">
 				{{if .Issue.OriginalAuthor}}

templates/repo/issue/view_content/pull.tmpl

@@ -1,100 +1,3 @@
-{{if or .PullReviewers .OriginalReviews}}
-	<div class="comment box timeline-item gt-pt-3 gt-pb-0">
-		<div class="content">
-			<div class="ui segment">
-				<h4>{{$.locale.Tr "repo.issues.review.reviewers"}}</h4>
-				{{range .PullReviewers}}
-					{{$createdStr:= TimeSinceUnix .Review.UpdatedUnix $.locale}}
-					<div class="ui divider"></div>
-					<div class="review-item">
-						<div class="review-item-left">
-							<span class="gt-mr-3 text {{.Review.HTMLTypeColorName}}">
-								{{svg (printf "octicon-%s" .Review.Type.Icon)}}
-							</span>
-							{{if .User}}
-								<a href="{{.User.HomeLink}}">
-									{{avatar $.Context .User 20}}
-								</a>
-							{{end}}
-							<span class="gt-ml-2">
-								{{if .User}}
-									<a href="{{.User.HomeLink}}">{{.User.GetDisplayName}}</a>
-								{{else if .Team}}
-									<span class="ui text">{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}</span>
-								{{end}}
-								{{if eq .Review.Type 1}}
-									{{$.locale.Tr "repo.issues.review.approve" $createdStr | Safe}}
-								{{else if eq .Review.Type 2}}
-									{{$.locale.Tr "repo.issues.review.comment" $createdStr | Safe}}
-								{{else if eq .Review.Type 3}}
-									{{$.locale.Tr "repo.issues.review.reject" $createdStr | Safe}}
-								{{else if eq .Review.Type 4}}
-									{{$.locale.Tr "repo.issues.review.wait" $createdStr | Safe}}
-								{{else}}
-									{{$.locale.Tr "repo.issues.review.comment" $createdStr | Safe}}
-								{{end}}
-							</span>
-						</div>
-						<div class="review-item-right">
-							{{if .Review.Stale}}
-								<span class="ui text grey" data-tooltip-content="{{$.locale.Tr "repo.issues.is_stale"}}">
-									{{svg "octicon-hourglass" 16 "icon"}}
-								</span>
-							{{end}}
-							{{if (and $.Permission.IsAdmin (or (eq .Review.Type 1) (eq .Review.Type 3)) (not $.Issue.IsClosed))}}
-								<a href="#" class="ui muted icon gt-df gt-ac dismiss-review-btn" data-review-id="dismiss-review-{{.Review.ID}}" data-tooltip-content="{{$.locale.Tr "repo.issues.dismiss_review"}}">
-									{{svg "octicon-x" 20}}
-								</a>
-								<div class="ui small modal" id="dismiss-review-modal">
-									<div class="header">
-										{{$.locale.Tr "repo.issues.dismiss_review"}}
-									</div>
-									<div class="content">
-										<div class="ui warning message">
-											{{$.locale.Tr "repo.issues.dismiss_review_warning"}}
-										</div>
-										<form class="ui form dismiss-review-form" id="dismiss-review-{{.Review.ID}}" action="{{$.RepoLink}}/issues/dismiss_review" method="post">
-											{{$.CsrfTokenHtml}}
-											<input type="hidden" name="review_id" value="{{.Review.ID}}">
-											<div class="field">
-												<label for="message">{{$.locale.Tr "action.review_dismissed_reason"}}</label>
-												<input id="message" name="message">
-											</div>
-											<div class="text right actions">
-												<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
-												<button class="ui red button" type="submit">{{$.locale.Tr "ok"}}</button>
-											</div>
-										</form>
-									</div>
-								</div>
-							{{end}}
-							{{if .CanChange}}
-								<a href="#" class="ui icon muted gt-df gt-ac re-request-review{{if .Checked}} checked{{end}}" data-issue-id="{{$.Issue.ID}}" data-tooltip-content="{{if .Checked}}{{$.locale.Tr "repo.issues.remove_request_review"}}{{else}}{{$.locale.Tr "repo.issues.re_request_review"}}{{end}}" data-id="{{.ItemID}}" data-update-url="{{$.RepoLink}}/issues/request_review">{{if .Checked}}{{svg "octicon-trash"}}{{else}}{{svg "octicon-sync"}}{{end}}</a>
-							{{end}}
-						</div>
-					</div>
-				{{end}}
-				{{range .OriginalReviews}}
-					{{$createdStr:= TimeSinceUnix .UpdatedUnix $.locale}}
-					<div class="ui divider"></div>
-					<div class="review-item">
-						<div class="review-item-left">
-							<span class="gt-mr-3 text {{.Review.HTMLTypeColorName}}">
-								{{svg (printf "octicon-%s" .Type.Icon)}}
-							</span>
-							<a href="{{$.Repository.OriginalURL}}" data-tooltip-content="{{$.locale.Tr "repo.migrated_from_fake" ($.Repository.GetOriginalURLHostname|Escape) | Safe}}">
-								<span class="text black">
-									{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
-									{{.OriginalAuthor}}
-								</span>
-							</a>
-						</div>
-					</div>
-				{{end}}
-			</div>
-		</div>
-	</div>
-{{end}}
 {{if and .Issue.PullRequest.HasMerged (not .IsPullBranchDeletable)}}
 {{/* Then the merge box will not be displayed because this page already contains enough information */}}
 {{else}}

templates/repo/issue/view_content/sidebar.tmpl

@@ -1,9 +1,6 @@
-<div class="four wide column">
+<div class="issue-content-right ui segment">
-	<div class="ui segment metas">
 	{{template "repo/issue/branch_selector_field" .}}
-
 	{{if .Issue.IsPull}}
-
 		<input id="reviewer_id" name="reviewer_id" type="hidden" value="{{.reviewer_id}}">
 		<div class="ui {{if or (not .Reviewers) (not .CanChooseReviewer) .Repository.IsArchived}}disabled{{end}} floating jump select-reviewers-modify dropdown">
 			<a class="text gt-df gt-ac muted">
@@ -52,35 +49,65 @@
 			<span class="no-select item {{if or .OriginalReviews .PullReviewers}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_reviewers"}}</span>
 			<div class="selected">
 				{{range .PullReviewers}}
-						<div class="item gt-mb-2">
+					<div class="item gt-df gt-ac gt-py-3">
+						<div class="gt-df gt-ac gt-f1">
 							{{if .User}}
-								<a class="muted sidebar-item-link" href="{{.User.HomeLink}}">{{avatar $.Context .User 28 "gt-mr-3"}}{{.User.GetDisplayName}}</a>
+								<a class="muted sidebar-item-link" href="{{.User.HomeLink}}">{{avatar $.Context .User 20 "gt-mr-3"}}{{.User.GetDisplayName}}</a>
 							{{else if .Team}}
-								<span class="text">{{svg "octicon-people" 16 "teamavatar"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}</span>
+								<span class="text">{{svg "octicon-people" 20 "gt-mr-3"}}{{$.Issue.Repo.OwnerName}}/{{.Team.Name}}</span>
+							{{end}}
+						</div>
+						<div class="gt-df gt-ac gt-gap-3">
+							{{if (and $.Permission.IsAdmin (or (eq .Review.Type 1) (eq .Review.Type 3)) (not $.Issue.IsClosed))}}
+								<a href="#" class="ui muted icon gt-df gt-ac dismiss-review-btn" data-review-id="dismiss-review-{{.Review.ID}}" data-tooltip-content="{{$.locale.Tr "repo.issues.dismiss_review"}}">
+									{{svg "octicon-x" 20}}
+								</a>
+								<div class="ui small modal" id="dismiss-review-modal">
+									<div class="header">
+										{{$.locale.Tr "repo.issues.dismiss_review"}}
+									</div>
+									<div class="content">
+										<div class="ui warning message">
+											{{$.locale.Tr "repo.issues.dismiss_review_warning"}}
+										</div>
+										<form class="ui form dismiss-review-form" id="dismiss-review-{{.Review.ID}}" action="{{$.RepoLink}}/issues/dismiss_review" method="post">
+											{{$.CsrfTokenHtml}}
+											<input type="hidden" name="review_id" value="{{.Review.ID}}">
+											<div class="field">
+												<label for="message">{{$.locale.Tr "action.review_dismissed_reason"}}</label>
+												<input id="message" name="message">
+											</div>
+											<div class="text right actions">
+												<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
+												<button class="ui red button" type="submit">{{$.locale.Tr "ok"}}</button>
+											</div>
+										</form>
+									</div>
+								</div>
+							{{end}}
+							{{if .Review.Stale}}
+								<span data-tooltip-content="{{$.locale.Tr "repo.issues.is_stale"}}">
+									{{svg "octicon-hourglass" 16}}
+								</span>
 							{{end}}
-							<span class="ui right gt-df gt-ac gt-gap-3">
 							{{if .CanChange}}
 								<a href="#" class="ui muted icon re-request-review{{if .Checked}} checked{{end}}" data-tooltip-content="{{if .Checked}}{{$.locale.Tr "repo.issues.remove_request_review"}}{{else}}{{$.locale.Tr "repo.issues.re_request_review"}}{{end}}" data-issue-id="{{$.Issue.ID}}" data-id="{{.ItemID}}" data-update-url="{{$.RepoLink}}/issues/request_review">{{if .Checked}}{{svg "octicon-trash"}}{{else}}{{svg "octicon-sync"}}{{end}}</a>
 							{{end}}
 							{{svg (printf "octicon-%s" .Review.Type.Icon) 16 (printf "text %s" (.Review.HTMLTypeColorName))}}
-							</span>
+						</div>
 					</div>
 				{{end}}
 				{{range .OriginalReviews}}
-						<div class="item gt-mb-3">
+					<div class="item gt-df gt-ac gt-py-3">
-							<a href="{{$.Repository.OriginalURL}}" data-tooltip-content="{{$.locale.Tr "repo.migrated_from_fake" ($.Repository.GetOriginalURLHostname|Escape) | Safe}}">
+						<div class="gt-df gt-ac gt-f1">
-								<span class="text black">
+							<a class="muted" href="{{$.Repository.OriginalURL}}" data-tooltip-content="{{$.locale.Tr "repo.migrated_from_fake" ($.Repository.GetOriginalURLHostname|Escape) | Safe}}">
-									{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
+								{{svg (MigrationIcon $.Repository.GetOriginalURLHostname) 20 "gt-mr-3"}}
 								{{.OriginalAuthor}}
-								</span>
 							</a>
-							<span class="ui right text {{if eq .Type 1}}green
+						</div>
-								{{- else if eq .Type 2}}grey
+						<div class="gt-df gt-ac gt-gap-3">
-								{{- else if eq .Type 3}}red
+							{{svg (printf "octicon-%s" .Type.Icon) 16 (printf "text %s" (.HTMLTypeColorName))}}
-								{{- else if eq .Type 4}}yellow
+						</div>
-								{{- else}}grey{{end}} right ">
-								{{svg (printf "octicon-%s" .Type.Icon)}}
-							</span>
 					</div>
 				{{end}}
 			</div>
@@ -663,4 +690,3 @@
 		{{end}}
 	{{end}}
 </div>
-</div>

web_src/css/explore.css

@@ -28,10 +28,6 @@
   word-break: break-all;
 }
 
-.ui.repository.list .item .ui.header .metas {
-  font-size: 14px;
-}
-
 .ui.repository.list .item .time {
   font-size: 12px;
 }

web_src/css/modules/comment.css

@@ -3,7 +3,6 @@
 
 .ui.comments {
   margin: 1.5em 0;
-  max-width: 650px;
 }
 
 .ui.comments:first-child {

web_src/css/repo.css

@@ -67,45 +67,64 @@
   border: 1px var(--color-yellow) solid;
 }
 
-.repository .metas .menu {
+.issue-content {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+@media (max-width: 767.98px) {
+  .issue-content {
+    flex-direction: column;
+  }
+}
+
+.issue-content-left {
+  margin: 0 !important;
+  width: calc(100% - 316px);
+}
+
+.issue-content-right {
+  margin: 0 !important;
+  width: 300px;
+}
+
+@media (max-width: 767.98px) {
+  .issue-content-left,
+  .issue-content-right {
+    width: 100%;
+  }
+}
+
+.repository .issue-content-right .menu {
   overflow-x: auto;
   max-height: 500px;
 }
 
-.repository .metas .ui.list.assignees .item {
+.repository .issue-content-right .ui.list .dependency {
-  line-height: 2.5em;
-}
-
-.repository .metas .ui.list.assignees .teamavatar {
-  margin-top: 0.125rem;
-  margin-left: 6.75px;
-  margin-right: 8.75px;
-}
-
-.repository .metas .ui.list .dependency {
   padding: 0;
   white-space: nowrap;
 }
 
-.repository .metas .ui.list .title {
+.repository .issue-content-right .ui.list .title {
   max-width: 200px;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 @media (max-width: 1200px) {
-  .repository .metas .ui.list .title {
+  .repository .issue-content-right .ui.list .title {
     max-width: 150px;
   }
 }
 
 @media (max-width: 1000px) {
-  .repository .metas .ui.list .title {
+  .repository .issue-content-right .ui.list .title {
     max-width: 100px;
   }
 }
 
-.repository .metas #deadlineForm input {
+.repository .issue-content-right #deadlineForm input {
   width: 12.8rem;
   border-radius: 4px 0 0 4px;
   border-right: 0;
@@ -578,11 +597,7 @@
   font-size: 14px;
 }
 
-.repository.new.issue .comment.form .metas {
+.repository.new.issue .comment.form .issue-content-right .filter.menu {
-  min-width: 220px;
-}
-
-.repository.new.issue .comment.form .metas .filter.menu {
   max-height: 500px;
   overflow-x: auto;
 }
@@ -699,31 +714,6 @@
   margin-top: 1.1rem;
 }
 
-.repository.view.issue .review-item {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.review-item-left,
-.review-item-right {
-  display: flex;
-  align-items: center;
-}
-
-.review-item-right {
-  gap: 8px;
-  margin-left: 4px;
-}
-
-.repository.view.issue .review-item .divider {
-  margin: 0.5rem 0;
-}
-
-.repository.view.issue .review-item .review-content {
-  padding: 1em 0 1em 3.8em;
-}
-
 .repository.view.issue .comment-list:not(.prevent-before-timeline)::before {
   display: block;
   content: "";
@@ -761,7 +751,7 @@
 
 .repository.view.issue .comment-list .timeline-item,
 .repository.view.issue .comment-list .timeline-item-group {
-  padding: 12px 0;
+  padding: 16px 0;
 }
 
 .repository.view.issue .comment-list .timeline-item-group .timeline-item {
@@ -1132,11 +1122,6 @@
   text-decoration: line-through;
 }
 
-.repository .comment.form .ui.comments {
-  margin-top: -12px;
-  max-width: 100%;
-}
-
 .repository .comment.form .content .field:first-child {
   clear: none;
 }
@@ -1252,7 +1237,8 @@
 }
 
 .repository.compare.pull .pullrequest-form {
-  margin-bottom: 1.5rem;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 
 .repository.compare.pull .markup {