Issue sidebar and misc css fixes (#15524)

- Replace remaining font icons with SVG in issue sidebar
- Rework issue due date display
- Realign avatar in timeline
- Fix font size in repo search and code explore
- Consolidate active button styles
- Fix loading form on arc-green
- Align time tracker buttons vertically

Fixes: https://github.com/go-gitea/gitea/issues/15896

diff --git a/templates/explore/code.tmpl b/templates/explore/code.tmpl
index 6332413a173a6c72057304f7167d4a6aeafbdd22..8cc1b71a7ad0a769161b2dec2e9f01a278a5f36c 100644 (file)
--- a/templates/explore/code.tmpl
+++ b/templates/explore/code.tmpl
@@ -50,7 +50,7 @@
                                                                                                                <a href="{{EscapePound $repo.HTMLURL}}/src/commit/{{$result.CommitID}}/{{EscapePound $result.Filename}}#L{{.}}"><span>{{.}}</span></a>
                                                                                                        {{end}}
                                                                                                </td>
-                                                                                               <td class="lines-code"><pre><code class="chroma"><ol class="linenums">{{.FormattedLines | Safe}}</ol></code></pre></td>
+                                                                                               <td class="lines-code chroma"><code class="code-inner">{{.FormattedLines | Safe}}</code></td>
                                                                                        </tr>
                                                                                </tbody>
                                                                        </table>

diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 30acb839b50acb4412eb4269010be5ac3b45afb2..e3530fc45ba1f20f37056a7bd7a1bf63d08cb020 100644 (file)
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -6,12 +6,12 @@
 
                        <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">
-                               <span class="text">
+                               <a class="text df ac muted">
                                        <strong>{{.i18n.Tr "repo.issues.review.reviewers"}}</strong>
                                        {{if and .CanChooseReviewer (not .Repository.IsArchived)}}
-                                               {{svg "octicon-gear"}}
+                                               {{svg "octicon-gear" 16 "ml-2"}}
                                        {{end}}
-                               </span>
+                               </a>
                                <div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/request_review">
                                        <div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_reviewer_title"}}</div>
                                        {{if .Reviewers}}
@@ -95,12 +95,12 @@
                {{end}}
 
                <div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
-                       <span class="text">
+                       <a class="text df ac muted">
                                <strong>{{.i18n.Tr "repo.issues.new.labels"}}</strong>
                                {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-                                       {{svg "octicon-gear"}}
+                                       {{svg "octicon-gear" 16 "ml-2"}}
                                {{end}}
-                       </span>
+                       </a>
                        <div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels">
                                <div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_labels_title"}}</div>
                                {{if or .Labels .OrgLabels}}
@@ -130,12 +130,12 @@
                <div class="ui divider"></div>
 
                <div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-milestone dropdown">
-                       <span class="text">
+                       <a class="text df ac muted">
                                <strong>{{.i18n.Tr "repo.issues.new.milestone"}}</strong>
                                {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-                                       {{svg "octicon-gear"}}
+                                       {{svg "octicon-gear" 16 "ml-2"}}
                                {{end}}
-                       </span>
+                       </a>
                        <div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/milestone">
                                <div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_milestone_title"}}</div>
                                {{if or .OpenMilestones .ClosedMilestones}}
@@ -193,12 +193,12 @@
                        <div class="ui divider"></div>
 
                        <div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-project dropdown">
-                               <span class="text">
+                               <a class="text df ac muted">
                                        <strong>{{.i18n.Tr "repo.issues.new.projects"}}</strong>
                                        {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-                                               {{svg "octicon-gear"}}
+                                               {{svg "octicon-gear" 16 "ml-2"}}
                                        {{end}}
-                               </span>
+                               </a>
                                <div class="menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/projects">
                                        <div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_projects"}}</div>
                                        {{if .OpenProjects}}
@@ -244,12 +244,12 @@
 
                <input id="assignee_id" name="assignee_id" type="hidden" value="{{.assignee_id}}">
                <div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-assignees-modify dropdown">
-                       <span class="text">
+                       <a class="text df ac muted">
                                <strong>{{.i18n.Tr "repo.issues.new.assignees"}}</strong>
                                {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-                                       {{svg "octicon-gear"}}
+                                       {{svg "octicon-gear" 16 "ml-2"}}
                                {{end}}
-                       </span>
+                       </a>
                        <div class="filter menu" data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/assignee">
                                <div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_assignees_title"}}</div>
                                <div class="ui icon search input">
@@ -312,12 +312,12 @@
                                        <form method="POST" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/watch">
                                                <input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}" />
                                                {{$.CsrfTokenHtml}}
-                                               <button class="fluid ui button">
+                                               <button class="fluid ui button df jc">
                                                        {{if $.IssueWatch.IsWatching}}
-                                                               {{svg "octicon-mute"}}
+                                                               {{svg "octicon-mute" 16 "mr-3"}}
                                                                {{.i18n.Tr "repo.issues.unsubscribe"}}
                                                        {{else}}
-                                                               {{svg "octicon-unmute"}}
+                                                               {{svg "octicon-unmute" 16 "mr-3"}}
                                                                {{.i18n.Tr "repo.issues.subscribe"}}
                                                        {{end}}
                                                </button>
@@ -338,34 +338,30 @@
                                                        {{$.CsrfTokenHtml}}
                                                </form>
                                                {{if  $.IsStopwatchRunning}}
-                                                       <div class="ui buttons fluid">
-                                                               <button class="ui button issue-stop-time">{{.i18n.Tr "repo.issues.stop_tracking"}}</button>
-                                                               <button class="ui negative button issue-cancel-time">{{.i18n.Tr "repo.issues.cancel_tracking"}}</button>
-                                                       </div>
+                                                       <button class="ui fluid button issue-stop-time">{{.i18n.Tr "repo.issues.stop_tracking"}}</button>
+                                                       <button class="ui fluid negative button issue-cancel-time mt-3">{{.i18n.Tr "repo.issues.cancel_tracking"}}</button>
                                                {{else}}
                                                        {{if .HasUserStopwatch}}
                                                                <div class="ui warning message">
                                                                        {{.i18n.Tr "repo.issues.tracking_already_started" .OtherStopwatchURL | Safe}}
                                                                </div>
                                                        {{end}}
-                                                       <div class="ui buttons two fluid">
-                                                               <button class="ui button poping up issue-start-time" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
-                                                               <div class="ui mini modal issue-start-time-modal">
-                                                                       <div class="header">{{.i18n.Tr "repo.issues.add_time"}}</div>
-                                                                       <div class="content">
-                                                                               <form method="POST" id="add_time_manual_form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/times/add" class="ui action input fluid">
-                                                                                       {{$.CsrfTokenHtml}}
-                                                                                       <input placeholder='{{.i18n.Tr "repo.issues.add_time_hours"}}' type="number" name="hours">
-                                                                                       <input placeholder='{{.i18n.Tr "repo.issues.add_time_minutes"}}' type="number" name="minutes" class="ui compact">
-                                                                               </form>
-                                                                       </div>
-                                                                       <div class="actions">
-                                                                               <div class="ui green approve button">{{.i18n.Tr "repo.issues.add_time_short"}}</div>
-                                                                               <div class="ui red cancel button">{{.i18n.Tr "repo.issues.add_time_cancel"}}</div>
-                                                                       </div>
+                                                       <button class="ui fluid button poping up issue-start-time" data-content='{{.i18n.Tr "repo.issues.start_tracking"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.start_tracking_short"}}</button>
+                                                       <div class="ui mini modal issue-start-time-modal">
+                                                               <div class="header">{{.i18n.Tr "repo.issues.add_time"}}</div>
+                                                               <div class="content">
+                                                                       <form method="POST" id="add_time_manual_form" action="{{$.RepoLink}}/issues/{{.Issue.Index}}/times/add" class="ui action input fluid">
+                                                                               {{$.CsrfTokenHtml}}
+                                                                               <input placeholder='{{.i18n.Tr "repo.issues.add_time_hours"}}' type="number" name="hours">
+                                                                               <input placeholder='{{.i18n.Tr "repo.issues.add_time_minutes"}}' type="number" name="minutes" class="ui compact">
+                                                                       </form>
+                                                               </div>
+                                                               <div class="actions">
+                                                                       <div class="ui green approve button">{{.i18n.Tr "repo.issues.add_time_short"}}</div>
+                                                                       <div class="ui red cancel button">{{.i18n.Tr "repo.issues.add_time_cancel"}}</div>
                                                                </div>
-                                                               <button class="ui button green poping up issue-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>
+                                                       <button class="ui fluid button green poping up issue-add-time mt-3" data-content='{{.i18n.Tr "repo.issues.add_time"}}' data-position="top center" data-variation="small inverted">{{.i18n.Tr "repo.issues.add_time_short"}}</button>
                                                {{end}}
                                        </div>
                                </div>
@@ -397,21 +393,23 @@
                <span class="text"><strong>{{.i18n.Tr "repo.issues.due_date"}}</strong></span>
                <div class="ui form" id="deadline-loader">
                        <div class="ui negative message" id="deadline-err-invalid-date" style="display: none;">
-                               <i class="close icon"></i>
+                               {{svg "octicon-x" 16 "close icon"}}
                                {{.i18n.Tr "repo.issues.due_date_invalid"}}
                        </div>
                        {{if ne .Issue.DeadlineUnix 0}}
                                <p>
-                                       {{svg "octicon-calendar"}}
-                                       {{.Issue.DeadlineUnix.FormatDate}}
-                                       {{if .Issue.IsOverdue}}
-                                               <span style="color: red;">{{.i18n.Tr "repo.issues.due_date_overdue"}}</span>
-                                       {{end}}
-                                       {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-                                               <br/>
-                                               <a class="issue-due-edit"><i class="edit icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_edit"}}</a> -
-                                               <a class="issue-due-remove"><i class="remove icon"></i>{{$.i18n.Tr "repo.issues.due_date_form_remove"}}</a>
-                                       {{end}}
+                                       <div class="df sb ac">
+                                               <div class="due-date poping up {{if .Issue.IsOverdue}}text red{{end}}" {{if .Issue.IsOverdue}}data-content="{{.i18n.Tr "repo.issues.due_date_overdue"}}"{{end}}>
+                                                       {{svg "octicon-calendar" 16 "mr-3"}}
+                                                       {{.Issue.DeadlineUnix.FormatDate}}
+                                               </div>
+                                               <div>
+                                                       {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
+                                                               <a class="issue-due-edit poping up muted" data-content="{{$.i18n.Tr "repo.issues.due_date_form_edit"}}">{{svg "octicon-pencil" 16 "mr-2"}}</a>
+                                                               <a class="issue-due-remove poping up muted" data-content="{{$.i18n.Tr "repo.issues.due_date_form_remove"}}">{{svg "octicon-trash"}}</a>
+                                                       {{end}}
+                                               </div>
+                                       </div>
                                </p>
                        {{else}}
                                <p><i>{{.i18n.Tr "repo.issues.due_date_not_set"}}</i></p>
@@ -424,9 +422,9 @@
                                                <input required placeholder="{{.i18n.Tr "repo.issues.due_date_form"}}" {{if gt .Issue.DeadlineUnix 0}}value="{{.Issue.DeadlineUnix.Format "2006-01-02"}}"{{end}} type="date" name="deadlineDate" id="deadlineDate">
                                                <button class="ui green icon button">
                                                        {{if ne .Issue.DeadlineUnix 0}}
-                                                               <i class="edit icon"></i>
+                                                               {{svg "octicon-pencil"}}
                                                        {{else}}
-                                                               <i class="plus icon"></i>
+                                                               {{svg "octicon-plus"}}
                                                        {{end}}
                                                </button>
                                        </form>
@@ -467,7 +465,7 @@
                                                                </div>
                                                                <div class="item-right df ac">
                                                                        {{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
-                                                                               <a class="delete-dependency-button poping up ci" data-id="{{.Issue.ID}}" data-type="blocking" data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
+                                                                               <a class="delete-dependency-button poping up ci muted" data-id="{{.Issue.ID}}" data-type="blocking" data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
                                                                                        {{svg "octicon-trash" 16}}
                                                                                </a>
                                                                        {{end}}
@@ -494,7 +492,7 @@
                                                                </div>
                                                                <div class="item-right df ac">
                                                                        {{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}}
-                                                                               <a class="delete-dependency-button poping up ci" data-id="{{.Issue.ID}}" data-type="blockedBy" data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
+                                                                               <a class="delete-dependency-button poping up ci muted" data-id="{{.Issue.ID}}" data-type="blockedBy" data-content="{{$.i18n.Tr "repo.issues.dependency.remove_info"}}" data-inverted="">
                                                                                        {{svg "octicon-trash" 16}}
                                                                                </a>
                                                                        {{end}}
@@ -516,7 +514,7 @@
                                                                        <div class="default text">{{.i18n.Tr "repo.issues.dependency.add"}}</div>
                                                                </div>
                                                                <button class="ui green icon button">
-                                                                       <i class="plus icon"></i>
+                                                                       {{svg "octicon-plus"}}
                                                                </button>
                                                        </div>
                                                </form>
@@ -550,12 +548,12 @@
                                                {{end}}</p>
                                        </div>
                                        <div class="actions">
-                                               <div class="ui basic red cancel inverted button">
-                                                       <i class="remove icon"></i>
+                                               <div class="ui red cancel inverted button">
+                                                       {{svg "octicon-x"}}
                                                        {{.i18n.Tr "repo.issues.dependency.cancel"}}
                                                </div>
-                                               <div class="ui basic green ok inverted button">
-                                                       <i class="checkmark icon"></i>
+                                               <div class="ui green ok inverted button">
+                                                       {{svg "octicon-check"}}
                                                        {{.i18n.Tr "repo.issues.dependency.remove"}}
                                                </div>
                                        </div>

diff --git a/templates/repo/search.tmpl b/templates/repo/search.tmpl
index 35f7cffbffcbc20ba5ac32db00bb53be3e6e654c..bd70690e061cab51ce7314438777abddca04d5a4 100644 (file)
--- a/templates/repo/search.tmpl
+++ b/templates/repo/search.tmpl
@@ -48,7 +48,7 @@
                                                                                                        <a href="{{EscapePound $.SourcePath}}/src/commit/{{$result.CommitID}}/{{EscapePound $result.Filename}}#L{{.}}"><span>{{.}}</span></a>
                                                                                                {{end}}
                                                                                        </td>
-                                                                                       <td class="lines-code"><pre><code class="chroma"><ol class="linenums">{{.FormattedLines | Safe}}</ol></code></pre></td>
+                                                                                       <td class="lines-code chroma"><code class="code-inner">{{.FormattedLines | Safe}}</code></td>
                                                                                </tr>
                                                                        </tbody>
                                                                </table>

diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl
index 29da9334932f44cfe0ee900028ce93bc76a6d044..d638fe3859b73ee977908b7fde3b8a0ce26edbd8 100644 (file)
--- a/templates/user/profile.tmpl
+++ b/templates/user/profile.tmpl
@@ -92,21 +92,27 @@
                                        </a>
                                        {{if not .DisableStars}}
                                                <a class='{{if eq .TabName "stars"}}active{{end}} item' href="{{.Owner.HomeLink}}?tab=stars">
-                                                       {{svg "octicon-star"}}  {{.i18n.Tr "user.starred"}}
-                                                       <div class="ui label">{{.Owner.NumStars}}</div>
+                                                       {{svg "octicon-star"}} {{.i18n.Tr "user.starred"}}
+                                                       {{if .Owner.NumStars}}
+                                                               <div class="ui primary label">{{.Owner.NumStars}}</div>
+                                                       {{end}}
                                                </a>
                                        {{else}}
                                                <a class='{{if eq .TabName "watching"}}active{{end}} item' href="{{.Owner.HomeLink}}?tab=watching">
-                                                       {{svg "octicon-eye"}}  {{.i18n.Tr "user.watched"}}
+                                                       {{svg "octicon-eye"}} {{.i18n.Tr "user.watched"}}
                                                </a>
                                        {{end}}
                                        <a class='{{if eq .TabName "following"}}active{{end}} item' href="{{.Owner.HomeLink}}?tab=following">
-                                               {{svg "octicon-person"}}  {{.i18n.Tr "user.following"}}
-                                               <div class="ui label">{{.Owner.NumFollowing}}</div>
+                                               {{svg "octicon-person"}} {{.i18n.Tr "user.following"}}
+                                               {{if .Owner.NumFollowing}}
+                                                       <div class="ui primary label">{{.Owner.NumFollowing}}</div>
+                                               {{end}}
                                        </a>
                                        <a class='{{if eq .TabName "followers"}}active{{end}} item' href="{{.Owner.HomeLink}}?tab=followers">
-                                               {{svg "octicon-person"}}  {{.i18n.Tr "user.followers"}}
-                                               <div class="ui label">{{.Owner.NumFollowers}}</div>
+                                               {{svg "octicon-person"}} {{.i18n.Tr "user.followers"}}
+                                               {{if .Owner.NumFollowers}}
+                                                       <div class="ui primary label">{{.Owner.NumFollowers}}</div>
+                                               {{end}}
                                        </a>
                                </div>
 

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 4fef180c4c42f7839094e73c6bc1831d71446fa5..224586b079b33fdac342f2be7349bea2ee3e6c9c 100644 (file)
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -669,10 +669,16 @@ a.ui.card:hover,
   height: auto;
 }
 
-.ui.loading.segment::before {
+.ui.loading.segment::before,
+.ui.loading.form::before {
   background: none;
 }
 
+.ui.loading.form > *,
+.ui.loading.segment > * {
+  opacity: .35;
+}
+
 .ui.loading.loading.input > i.icon svg {
   visibility: hidden;
 }
@@ -1589,11 +1595,19 @@ a.ui.label:hover {
   box-shadow: none !important;
 }
 
+.ui.button:focus,
 .ui.button:hover {
   background: var(--color-hover);
   color: var(--color-text);
 }
 
+.ui.button:active,
+.ui.active.button:active,
+.ui.active.button:hover {
+  background: var(--color-active);
+  color: var(--color-text);
+}
+
 .ui.button.no-text .icon {
   margin: 0 !important;
 }

diff --git a/web_src/less/_editor.less b/web_src/less/_editor.less
index b785189dbb3fd8606f79d6e45c4f31b4a8679173..6ddb1a3357de61aa1a3b3bfc928959f47d13d012 100644 (file)
--- a/web_src/less/_editor.less
+++ b/web_src/less/_editor.less
@@ -55,6 +55,10 @@
   background: var(--color-active);
 }
 
+.editor-statusbar {
+  color: var(--color-text-light);
+}
+
 .editor-loading {
   padding: 1rem;
   text-align: center;

diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index a79634dd8fb94a27d6a4b191d5b0a4a91a959adc..ef241661ddf136c1b245d3196a90caf5dc41a834 100644 (file)
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -815,7 +815,7 @@
         .avatar.image img {
           width: 20px;
           height: 20px;
-          margin-right: .5rem;
+          margin: 0 .25rem;
         }
 
         &:first-child:not(.commit) {

diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index a79b4e7f34733ed6aa92d5ed93973560601b01a5..3f58184f061ae01efb1881d1b474f07ef9a1105c 100644 (file)
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -24,7 +24,6 @@
 
 .word-break {
   word-wrap: break-word !important;
-  word-break: break-all !important;
 }
 
 .full-screen-width { width: 100vw !important; }

diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 93f317a371b479acf16c64b72195d62211dad62b..c493a255c746a9dc8a4f1e294451c58d65a92144 100644 (file)
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -98,7 +98,7 @@
   --color-menu: #2e323e;
   --color-card: #2e323e;
   --color-markup-table-row: #ffffff06;
-  --color-markup-code-block: #2a2e3a;
+  --color-markup-code-block: #292d39;
   --color-button: #353846;
   --color-code-bg: #2a2e3a;
   --color-shadow: #00000060;
@@ -317,19 +317,6 @@ a.ui.basic.green.label:hover {
   color: var(--color-secondary-dark-6) !important;
 }
 
-.ui.active.button:active,
-.ui.button:active,
-.ui.button:focus,
-.ui.active.button {
-  background-color: #2e3e4e;
-  color: #dbdbdb;
-}
-
-.ui.active.button:hover {
-  background-color: #475e75;
-  color: #dbdbdb;
-}
-
 .repository .navbar .active.item,
 .repository .navbar .active.item:hover {
   border-color: transparent !important;