From 21d496364a5e654ba535d06269f6c6679b5c2d74 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 10 Nov 2020 19:28:07 +0100 Subject: [PATCH] Fix tooltips and issue dependency styles (#13458) - Convert all tooltips to JS-based ones, fixing overflow issues - Restyle issue dependencies/dependants - Move popup styles to base style - CSS Helper tweaks - Unify pseudo element selectors and lint for it Fixes: https://github.com/go-gitea/gitea/issues/13400 --- .stylelintrc | 2 +- templates/admin/user/edit.tmpl | 2 +- templates/repo/commits_table.tmpl | 2 +- templates/repo/create.tmpl | 2 +- .../repo/issue/view_content/sidebar.tmpl | 64 +++++++------ templates/repo/release/list.tmpl | 4 +- templates/repo/view_file.tmpl | 2 +- web_src/less/_base.less | 49 +++++++--- web_src/less/_markdown.less | 8 +- web_src/less/_repository.less | 59 +++++++----- web_src/less/_review.less | 2 +- web_src/less/features/animations.less | 2 +- web_src/less/helpers.less | 14 ++- web_src/less/standalone/swagger.less | 4 +- web_src/less/themes/theme-arc-green.less | 94 +++++++------------ 15 files changed, 164 insertions(+), 146 deletions(-) diff --git a/.stylelintrc b/.stylelintrc index 427d89b5bc..1d95b964bd 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -11,5 +11,5 @@ rules: no-descending-specificity: null number-leading-zero: never rule-empty-line-before: null - selector-pseudo-element-colon-notation: null + selector-pseudo-element-colon-notation: double shorthand-property-no-redundant-values: true diff --git a/templates/admin/user/edit.tmpl b/templates/admin/user/edit.tmpl index a0edd68e48..e29b18f5be 100644 --- a/templates/admin/user/edit.tmpl +++ b/templates/admin/user/edit.tmpl @@ -90,7 +90,7 @@
-
+
diff --git a/templates/repo/commits_table.tmpl b/templates/repo/commits_table.tmpl index 89355f0653..623df6f63e 100644 --- a/templates/repo/commits_table.tmpl +++ b/templates/repo/commits_table.tmpl @@ -17,7 +17,7 @@
- + {{else if .IsDiffCompare}} {{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}} diff --git a/templates/repo/create.tmpl b/templates/repo/create.tmpl index 6b9a2bca36..39759bcc4c 100644 --- a/templates/repo/create.tmpl +++ b/templates/repo/create.tmpl @@ -73,7 +73,7 @@
-
+
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl index dad4f7e125..4165ba49e6 100644 --- a/templates/repo/issue/view_content/sidebar.tmpl +++ b/templates/repo/issue/view_content/sidebar.tmpl @@ -434,32 +434,35 @@ {{if (and (not .BlockedByDependencies) (not .BlockingDependencies))}} {{.i18n.Tr "repo.issues.dependency.title"}}
-

{{if .Issue.IsPull}} +

+ {{if .Issue.IsPull}} {{.i18n.Tr "repo.issues.dependency.pr_no_dependencies"}} {{else}} {{.i18n.Tr "repo.issues.dependency.issue_no_dependencies"}} - {{end}}

+ {{end}} +

{{end}} {{if .BlockingDependencies}} - - {{.i18n.Tr "repo.issues.dependency.blocks_short"}} + + {{.i18n.Tr "repo.issues.dependency.blocks_short"}}
{{range .BlockingDependencies}} -
- #{{.Issue.Index}} - {{.Issue.Title | RenderEmoji}} -
{{.Repository.OwnerName}}/{{.Repository.Name}}
-
+
+
+ + #{{.Issue.Index}} {{.Issue.Title | RenderEmoji}} + +
+ {{.Repository.OwnerName}}/{{.Repository.Name}} +
+
+
{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}} - - + + {{svg "octicon-trashcan" 16}} {{end}}
@@ -469,24 +472,25 @@ {{end}} {{if .BlockedByDependencies}} - - {{.i18n.Tr "repo.issues.dependency.blocked_by_short"}} + + {{.i18n.Tr "repo.issues.dependency.blocked_by_short"}}
{{range .BlockedByDependencies}} -
- #{{.Issue.Index}} - {{.Issue.Title | RenderEmoji}} -
{{.Repository.OwnerName}}/{{.Repository.Name}}
-
+
+
+ + #{{.Issue.Index}} {{.Issue.Title | RenderEmoji}} + +
+ {{.Repository.OwnerName}}/{{.Repository.Name}} +
+
+
{{if and $.CanCreateIssueDependencies (not $.Repository.IsArchived)}} - - + + {{svg "octicon-trashcan" 16}} {{end}}
diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl index 71d40fdb23..a05d671b15 100644 --- a/templates/repo/release/list.tmpl +++ b/templates/repo/release/list.tmpl @@ -152,7 +152,9 @@ {{if .Attachments}} {{range .Attachments}}
  • - {{svg "octicon-info"}} + + {{svg "octicon-info"}} + {{svg "octicon-package" 16 "mr-2"}}{{.Name}} {{.Size | FileSize}} diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl index a849fa1f84..2ad31f8c37 100644 --- a/templates/repo/view_file.tmpl +++ b/templates/repo/view_file.tmpl @@ -22,7 +22,7 @@
    • {{end}} {{if .LFSLock}} -
    +
    {{svg "octicon-lock" 16 "mr-2"}} {{.LFSLockOwner}}
    diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 3f1d5a5a54..65d274b670 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -362,10 +362,6 @@ a:hover, background-color: transparent; } - &.nopadding { - padding: 0; - } - &.menu, &.vertical.menu, &.segment { @@ -506,14 +502,6 @@ a:hover, &.middle { vertical-align: middle; } - - &.nopadding { - padding: 0; - } - - &.nomargin { - margin: 0; - } } .message { @@ -952,7 +940,7 @@ footer { background: rgba(0, 0, 0, .2); } - .ui.menu.new-menu:after { + .ui.menu.new-menu::after { position: absolute; margin-top: -15px; display: block; @@ -1049,12 +1037,12 @@ i.icon.centerlock { span { &.bottom-line { - &:after { + &::after { border-bottom: 1px solid #eaecef; } } - &:after { + &::after { content: attr(data-line-number); line-height: 20px !important; padding: 0 10px; @@ -1271,6 +1259,37 @@ i.icon.centerlock { } } +.ui.popup { + background-color: var(--color-body); + color: var(--color-secondary-dark-6); + border-color: var(--color-secondary); +} + +.ui.popup::before { + box-shadow: 1px 1px 0 0 var(--color-secondary); +} + +.ui.bottom.popup::before, +.ui.top.popup::before, +.ui.right.center.popup::before, +.ui.left.center.popup::before { + background-color: var(--color-body); +} + +.ui.bottom.left.popup::before, +.ui.bottom.right.popup::before, +.ui.bottom.center.popup::before { + box-shadow: -1px -1px 0 0 var(--color-secondary); +} + +.ui.left.center.popup::before { + box-shadow: 1px -1px 0 0 var(--color-secondary); +} + +.ui.right.center.popup::before { + box-shadow: -1px 1px 0 0 var(--color-secondary); +} + .ui.popup .ui.label { margin-bottom: .4em; } diff --git a/web_src/less/_markdown.less b/web_src/less/_markdown.less index 335a2ebd47..868fe5c146 100644 --- a/web_src/less/_markdown.less +++ b/web_src/less/_markdown.less @@ -403,10 +403,10 @@ border: 0; } - pre code:before, - pre code:after, - pre tt:before, - pre tt:after { + pre code::before, + pre code::after, + pre tt::before, + pre tt::after { content: normal; } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index ef6bb329d1..5c18ae3857 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -113,24 +113,31 @@ .item { padding: 0; + white-space: nowrap; + } + + .title { + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + } + + @media (max-width: 1200px) { + .title { + max-width: 150px; + } + } + + @media (max-width: 1000px) { + .title { + max-width: 100px; + } } .label.color { padding: 0 8px; margin-right: 5px; } - - a { - margin: 2px 0; - - .text { - color: #444444; - - &:hover { - color: #000000; - } - } - } } #deadlineForm input { @@ -520,7 +527,7 @@ border-radius: 3px; #avatar-arrow; - &:after { + &::after { border-right-color: #ffffff; } @@ -590,7 +597,7 @@ margin-left: 4em; #avatar-arrow; - &:after { + &::after { border-right-color: #ffffff; } @@ -771,7 +778,7 @@ } .comment-list { - &:not(.prevent-before-timeline):before { + &:not(.prevent-before-timeline)::before { display: block; content: ""; position: absolute; @@ -791,7 +798,7 @@ margin-left: 40px; padding-left: 16px; - &:before { //ciara + &::before { //ciara display: block; content: ""; position: absolute; @@ -1068,7 +1075,7 @@ max-width: 150px; background-color: #ffffff; - &:before { + &::before { content: ' '; display: inline-block; height: 100%; @@ -1222,7 +1229,7 @@ .form { #avatar-arrow; - &:after { + &::after { border-right-color: #ffffff; } } @@ -1362,7 +1369,7 @@ .content { #avatar-arrow; - &:after { + &::after { border-right-color: #ffffff; } } @@ -1596,7 +1603,7 @@ padding-right: 2px; } - > div:after { + > div::after { clear: both; content: ""; display: block; @@ -2799,7 +2806,7 @@ box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important; } -.comment:target .header:before { +.comment:target .header::before { border-right-color: var(--color-primary) !important; filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important; } @@ -2917,8 +2924,8 @@ #avatar-arrow { - &:before, - &:after { + &::before, + &::after { right: 100%; top: 20px; border: solid transparent; @@ -2929,13 +2936,13 @@ pointer-events: none; } - &:before { + &::before { border-right-color: var(--color-secondary); border-width: 9px; margin-top: -9px; } - &:after { + &::after { border-right-color: var(--color-box-header); border-width: 8px; margin-top: -8px; @@ -3323,7 +3330,7 @@ td.blob-excerpt { background: none !important; @media only screen and (max-width: 1200px) { - &:after { + &::after { background: none !important; } } diff --git a/web_src/less/_review.less b/web_src/less/_review.less index eb216970ee..df6da056c8 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -96,7 +96,7 @@ padding-top: 6px; } - &:after { + &::after { clear: both; content: ""; display: block; diff --git a/web_src/less/features/animations.less b/web_src/less/features/animations.less index 8ee923a97d..0b50440bf3 100644 --- a/web_src/less/features/animations.less +++ b/web_src/less/features/animations.less @@ -12,7 +12,7 @@ overflow: hidden !important; } -.is-loading:after { +.is-loading::after { content: ""; position: absolute; display: block; diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less index be9adfa7a4..1322ba4169 100644 --- a/web_src/less/helpers.less +++ b/web_src/less/helpers.less @@ -4,9 +4,19 @@ .js { justify-content: flex-start !important; } .je { justify-content: flex-end !important; } .sb { justify-content: space-between !important; } -.mono { font-family: var(--fonts-monospace); font-size: .9em; /* compensate for monospace fonts being usually slighty larger */ } +.fc { flex-direction: column !important; } +.f1 { flex: 1 !important; } .rounded { border-radius: var(--border-radius) !important; } -.word-break { word-wrap: break-word; word-break: break-all; } + +.mono { + font-family: var(--fonts-monospace) !important; + font-size: .9em !important; /* compensate for monospace fonts being usually slighty larger */ +} + +.word-break { + word-wrap: break-word !important; + word-break: break-all !important; +} .m-0 { margin: 0 !important; } .m-1 { margin: .125rem !important; } diff --git a/web_src/less/standalone/swagger.less b/web_src/less/standalone/swagger.less index c34469bede..cc829961d3 100644 --- a/web_src/less/standalone/swagger.less +++ b/web_src/less/standalone/swagger.less @@ -4,8 +4,8 @@ html { } *, -*:before, -*:after { +*::before, +*::after { box-sizing: inherit; } diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 5b0cbb5e96..7f989e1721 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -1105,28 +1105,28 @@ a.ui.basic.green.label:hover { border-color: var(--color-secondary); } - .header:after { + .header::after { border-right-color: var(--color-secondary); } - .merge-section.no-header:after { + .merge-section.no-header::after { border-right-color: var(--color-secondary); } - .header:before { + .header::before { border-right-color: var(--color-secondary); } - .merge-section.no-header:before { + .merge-section.no-header::before { border-right-color: #505667; } } -.repository.new.issue .comment.form .content:after { +.repository.new.issue .comment.form .content::after { border-right-color: #353945; } -.repository.new.issue .comment.form .content:before { +.repository.new.issue .comment.form .content::before { border-right-color: #353945; } @@ -1151,11 +1151,11 @@ a.ui.basic.green.label:hover { border-right-color: #505667; } -.repository .comment.form .content .form:after { +.repository .comment.form .content .form::after { border-right-color: #353945; } -.repository .comment.form .content .form:before { +.repository .comment.form .content .form::before { border-right-color: var(--color-secondary); } @@ -1354,7 +1354,7 @@ td.blob-hunk { border-color: transparent !important; @media only screen and (max-width: 1200px) { - &:after { + &::after { background: linear-gradient(to right, transparent 0%, #2a2e3a 100%); } } @@ -1430,60 +1430,60 @@ td.blob-hunk { color: #dbdbdb !important; } -.ui.checkbox .box:before, -.ui.checkbox label:before { +.ui.checkbox .box::before, +.ui.checkbox label::before { background: #2e323e; border: 1px solid var(--color-secondary); } -.ui.checkbox .box:hover:before, -.ui.checkbox label:hover:before, -.ui.checkbox .box:active:before, -.ui.checkbox label:active:before { +.ui.checkbox .box:hover::before, +.ui.checkbox label:hover::before, +.ui.checkbox .box:active::before, +.ui.checkbox label:active::before { background: #2e323e; border-color: #6a737d; } -.ui.checkbox input:focus ~ .box:before, -.ui.checkbox input:focus ~ label:before, -.ui.checkbox input:checked:focus ~ .box:before, -.ui.checkbox input:checked:focus ~ label:before { +.ui.checkbox input:focus ~ .box::before, +.ui.checkbox input:focus ~ label::before, +.ui.checkbox input:checked:focus ~ .box::before, +.ui.checkbox input:checked:focus ~ label::before { background: #2e323e; border-color: #6a737d; } -.ui.checkbox input:checked ~ .box:after, -.ui.checkbox input:checked ~ label:after { +.ui.checkbox input:checked ~ .box::after, +.ui.checkbox input:checked ~ label::after { color: #dbdbdb; } -.ui.checkbox input:checked ~ .box:before, -.ui.checkbox input:checked ~ label:before { +.ui.checkbox input:checked ~ .box::before, +.ui.checkbox input:checked ~ label::before { background: #2e323e; opacity: 1; color: #dbdbdb; border-color: #505667; } -.ui.checkbox input:checked:focus ~ .box:before, -.ui.checkbox input:checked:focus ~ label:before, -.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:before, -.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:before { +.ui.checkbox input:checked:focus ~ .box::before, +.ui.checkbox input:checked:focus ~ label::before, +.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box::before, +.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before { background: #2e323e; border-color: #6a737d; } -.ui.checkbox input:checked:focus ~ .box:after, -.ui.checkbox input:checked:focus ~ label:after, -.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box:after, -.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label:after { +.ui.checkbox input:checked:focus ~ .box::after, +.ui.checkbox input:checked:focus ~ label::after, +.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ .box::after, +.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::after { background: #2e323e; color: #dbdbdb; } -.ui.checkbox input:focus ~ .box:after, +.ui.checkbox input:focus ~ .box::after, .ui.checkbox input:focus ~ label, -.ui.checkbox input:focus ~ label:after { +.ui.checkbox input:focus ~ label::after { color: #9a9a9a; } @@ -1572,7 +1572,7 @@ td.blob-hunk { } .bottom-line, -.bottom-line:after { +.bottom-line::after { border-color: #4e525e !important; } @@ -1966,30 +1966,6 @@ a.ui.labels .label:hover { } } -.ui.loading.segment:before { - background: #353945; -} - -.ui.popup { - background-color: #383c4a; - color: var(--color-secondary-dark-6); - border-color: var(--color-secondary); -} - -.ui.popup:before { - box-shadow: 1px 1px 0 0 var(--color-secondary); -} - -.ui.popup.top:before, -.ui.popup.bottom:before { - background-color: #383c4a; -} - -.ui.bottom.left.popup:before, -.ui.bottom.right.popup:before { - box-shadow: -1px -1px 0 0 var(--color-secondary); -} - .markdown:not(code) h1 { border-bottom-color: #888; } @@ -2095,7 +2071,7 @@ img[src$="/img/matrix.svg"] { filter: invert(84%) hue-rotate(180deg); } -.is-loading:after { +.is-loading::after { border-color: #4a4c58 #4a4c58 #d7d7da #d7d7da; }