From a32bfd867dc1619f3247310d16845c8b7b854e0e Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 16 May 2021 22:18:18 +0200 Subject: [PATCH] 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 --- templates/explore/code.tmpl | 2 +- .../repo/issue/view_content/sidebar.tmpl | 114 +++++++++--------- templates/repo/search.tmpl | 2 +- templates/user/profile.tmpl | 20 +-- web_src/less/_base.less | 16 ++- web_src/less/_editor.less | 4 + web_src/less/_repository.less | 2 +- web_src/less/helpers.less | 1 - web_src/less/themes/theme-arc-green.less | 15 +-- 9 files changed, 92 insertions(+), 84 deletions(-) diff --git a/templates/explore/code.tmpl b/templates/explore/code.tmpl index 6332413a1..8cc1b71a7 100644 --- a/templates/explore/code.tmpl +++ b/templates/explore/code.tmpl @@ -50,7 +50,7 @@ {{.}} {{end}} - 
    {{.FormattedLines | Safe}}
+ {{.FormattedLines | Safe}} diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index 30acb839b..e3530fc45 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -6,12 +6,12 @@
- + {{.i18n.Tr "repo.issues.review.reviewers"}} {{if and .CanChooseReviewer (not .Repository.IsArchived)}} - {{svg "octicon-gear"}} + {{svg "octicon-gear" 16 "ml-2"}} {{end}} - +
{{.i18n.Tr "repo.issues.new.add_reviewer_title"}}
{{if .Reviewers}} @@ -95,12 +95,12 @@ {{end}}
- + {{.i18n.Tr "repo.issues.new.labels"}} {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} - {{svg "octicon-gear"}} + {{svg "octicon-gear" 16 "ml-2"}} {{end}} - +
{{.i18n.Tr "repo.issues.new.add_labels_title"}}
{{if or .Labels .OrgLabels}} @@ -130,12 +130,12 @@
- + {{.i18n.Tr "repo.issues.new.milestone"}} {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} - {{svg "octicon-gear"}} + {{svg "octicon-gear" 16 "ml-2"}} {{end}} - +
{{.i18n.Tr "repo.issues.new.add_milestone_title"}}
{{if or .OpenMilestones .ClosedMilestones}} @@ -193,12 +193,12 @@
- + {{.i18n.Tr "repo.issues.new.projects"}} {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} - {{svg "octicon-gear"}} + {{svg "octicon-gear" 16 "ml-2"}} {{end}} - +
{{.i18n.Tr "repo.issues.new.clear_projects"}}
{{if .OpenProjects}} @@ -244,12 +244,12 @@
- + {{.i18n.Tr "repo.issues.new.assignees"}} {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} - {{svg "octicon-gear"}} + {{svg "octicon-gear" 16 "ml-2"}} {{end}} - +
{{.i18n.Tr "repo.issues.new.add_assignees_title"}}
@@ -312,12 +312,12 @@
{{$.CsrfTokenHtml}} - @@ -338,34 +338,30 @@ {{$.CsrfTokenHtml}}
{{if $.IsStopwatchRunning}} -
- - -
+ + {{else}} {{if .HasUserStopwatch}}
{{.i18n.Tr "repo.issues.tracking_already_started" .OtherStopwatchURL | Safe}}
{{end}} -
- -
-
{{.i18n.Tr "repo.issues.add_time"}}
-
-
- {{$.CsrfTokenHtml}} - - -
-
-
-
{{.i18n.Tr "repo.issues.add_time_short"}}
-
{{.i18n.Tr "repo.issues.add_time_cancel"}}
-
+ +
+
{{.i18n.Tr "repo.issues.add_time"}}
+
+
+ {{$.CsrfTokenHtml}} + + +
+
+
+
{{.i18n.Tr "repo.issues.add_time_short"}}
+
{{.i18n.Tr "repo.issues.add_time_cancel"}}
-
+ {{end}}
@@ -397,21 +393,23 @@ {{.i18n.Tr "repo.issues.due_date"}}
{{if ne .Issue.DeadlineUnix 0}}

- {{svg "octicon-calendar"}} - {{.Issue.DeadlineUnix.FormatDate}} - {{if .Issue.IsOverdue}} - {{.i18n.Tr "repo.issues.due_date_overdue"}} - {{end}} - {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} -
- {{$.i18n.Tr "repo.issues.due_date_form_edit"}} - - {{$.i18n.Tr "repo.issues.due_date_form_remove"}} - {{end}} +

+
+ {{svg "octicon-calendar" 16 "mr-3"}} + {{.Issue.DeadlineUnix.FormatDate}} +
+
+ {{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}} + {{svg "octicon-pencil" 16 "mr-2"}} + {{svg "octicon-trash"}} + {{end}} +
+

{{else}}

{{.i18n.Tr "repo.issues.due_date_not_set"}}

@@ -424,9 +422,9 @@ @@ -467,7 +465,7 @@
{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}} - + {{svg "octicon-trash" 16}} {{end}} @@ -494,7 +492,7 @@
{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}} - + {{svg "octicon-trash" 16}} {{end}} @@ -516,7 +514,7 @@
{{.i18n.Tr "repo.issues.dependency.add"}}
@@ -550,12 +548,12 @@ {{end}}

-
- +
+ {{svg "octicon-x"}} {{.i18n.Tr "repo.issues.dependency.cancel"}}
-
- +
+ {{svg "octicon-check"}} {{.i18n.Tr "repo.issues.dependency.remove"}}
diff --git a/templates/repo/search.tmpl b/templates/repo/search.tmpl index 35f7cffbf..bd70690e0 100644 --- a/templates/repo/search.tmpl +++ b/templates/repo/search.tmpl @@ -48,7 +48,7 @@ {{.}} {{end}} - 
    {{.FormattedLines | Safe}}
+ {{.FormattedLines | Safe}} diff --git a/templates/user/profile.tmpl b/templates/user/profile.tmpl index 29da93349..d638fe385 100644 --- a/templates/user/profile.tmpl +++ b/templates/user/profile.tmpl @@ -92,21 +92,27 @@ {{if not .DisableStars}} - {{svg "octicon-star"}} {{.i18n.Tr "user.starred"}} -
{{.Owner.NumStars}}
+ {{svg "octicon-star"}} {{.i18n.Tr "user.starred"}} + {{if .Owner.NumStars}} +
{{.Owner.NumStars}}
+ {{end}} {{else}} - {{svg "octicon-eye"}} {{.i18n.Tr "user.watched"}} + {{svg "octicon-eye"}} {{.i18n.Tr "user.watched"}} {{end}} - {{svg "octicon-person"}} {{.i18n.Tr "user.following"}} -
{{.Owner.NumFollowing}}
+ {{svg "octicon-person"}} {{.i18n.Tr "user.following"}} + {{if .Owner.NumFollowing}} +
{{.Owner.NumFollowing}}
+ {{end}} - {{svg "octicon-person"}} {{.i18n.Tr "user.followers"}} -
{{.Owner.NumFollowers}}
+ {{svg "octicon-person"}} {{.i18n.Tr "user.followers"}} + {{if .Owner.NumFollowers}} +
{{.Owner.NumFollowers}}
+ {{end}}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 4fef180c4..224586b07 100644 --- 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 b785189db..6ddb1a335 100644 --- 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 a79634dd8..ef241661d 100644 --- 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 a79b4e7f3..3f58184f0 100644 --- 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 93f317a37..c493a255c 100644 --- 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;