From 5a5ab8ef5ac5fbdb893707933f06ff6bcd8e834a Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sat, 29 Apr 2023 19:35:59 +0800 Subject: Start cleaning the messy ".ui.left / .ui.right", improve label list page, fix stackable menu (#24393) Since 2015/2016, there is a global pollution: ".ui.left" / ".ui.right". Fomantic UI doesn't work this way, it just conflicts with many Fomantic definitions. This PR starts the cleaning work of such techinical debts. And, the "label list" page has been quite messy for long time, for example, why "li" appears in "div" ...... And fix #24296
![image](https://user-images.githubusercontent.com/2114189/235051281-54c5374c-b5fd-4b5f-9aa2-02d4bb2d9112.png) ![image](https://user-images.githubusercontent.com/2114189/235055703-2ba042e0-4db7-4e63-8646-02f390d496b5.png) ![image](https://user-images.githubusercontent.com/2114189/235056310-4f6ffdc2-5758-4927-8fb8-314d9fb72a6b.png) ![image](https://user-images.githubusercontent.com/2114189/235058400-dab1c9ec-3325-4671-8345-aee6b0b68042.png) ![image](https://user-images.githubusercontent.com/2114189/235058424-85509532-b9bc-43ad-b00f-a87184c60f22.png)
--- web_src/css/base.css | 59 +++-------- web_src/css/editor-markdown.css | 133 ------------------------- web_src/css/editor/combomarkdowneditor.css | 133 +++++++++++++++++++++++++ web_src/css/helpers.css | 8 +- web_src/css/home.css | 21 ++-- web_src/css/index.css | 5 +- web_src/css/repository-release-tag.css | 151 ----------------------------- web_src/css/repository.css | 2 +- web_src/css/repository/issue-label.css | 44 +++++++++ web_src/css/repository/release-tag.css | 151 +++++++++++++++++++++++++++++ 10 files changed, 361 insertions(+), 346 deletions(-) delete mode 100644 web_src/css/editor-markdown.css create mode 100644 web_src/css/editor/combomarkdowneditor.css delete mode 100644 web_src/css/repository-release-tag.css create mode 100644 web_src/css/repository/issue-label.css create mode 100644 web_src/css/repository/release-tag.css (limited to 'web_src') diff --git a/web_src/css/base.css b/web_src/css/base.css index 95f83ef00a..a5a3377376 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1472,10 +1472,12 @@ img.ui.avatar, color: var(--color-gold) !important; } +/* FIXME: this is a serious pollution, do not use this for "float: left" anymore */ .ui.left:not(.action) { float: left; } +/* FIXME: this is a serious pollution, do not use this for "float: right" anymore */ .ui.right:not(.action) { float: right; } @@ -2660,38 +2662,6 @@ table th[data-sortt-desc] .svg { background: var(--color-secondary-dark-1) !important; } -.labelspage { - list-style: none; - padding-top: 0; -} - -.labelspage .item { - border-bottom: 1px solid var(--color-secondary); - border-top: none; -} - -.labelspage .item a { - font-size: 12px; - padding-right: 10px; - color: var(--color-text-light); -} - -.labelspage .item a:hover { - color: var(--color-primary-light-2); -} - -.labelspage .item a.open-issues { - margin-right: 30px; -} - -.labelspage .item:last-child { - border-bottom: none; - padding-bottom: 0; -} - -.labelspage .orglabel { - opacity: 0.7; -} /* https://github.com/go-gitea/gitea/pull/11486 */ .ui.sub.header { @@ -2796,21 +2766,16 @@ table th[data-sortt-desc] .svg { height: 15px; } -@media (max-width: 767px) { - .ui.stackable.menu:not(.no-vertical-tabs) { - overflow-y: hidden; - overflow-x: auto; - flex-direction: row; - flex-wrap: nowrap !important; - } - .ui.stackable.menu:not(.no-vertical-tabs) .item { - width: initial !important; - } - .ui.stackable.menu:not(.no-vertical-tabs) > .dropdown.item { - position: initial; - } - .ui.stackable.menu:not(.no-vertical-tabs) .menu { - flex-direction: row; +.g-menu-stackable-scrollable { + overflow-y: hidden; + overflow-x: auto; +} + +@media (max-width: 767.98px) { + /* also respect Fomantic's "stackable" definition, use the same breakpoint to reset our styles */ + .g-menu-stackable-scrollable { + overflow-x: unset; + overflow-y: unset; } } diff --git a/web_src/css/editor-markdown.css b/web_src/css/editor-markdown.css deleted file mode 100644 index eb5c5d13b8..0000000000 --- a/web_src/css/editor-markdown.css +++ /dev/null @@ -1,133 +0,0 @@ -.combo-markdown-editor { - width: 100%; -} - -.combo-markdown-editor markdown-toolbar { - cursor: default; - display: flex; - align-items: center; - padding-bottom: 10px; -} - -.combo-markdown-editor .markdown-toolbar-group { - display: flex; -} - -.combo-markdown-editor .markdown-toolbar-group:last-child { - flex: 1; - justify-content: flex-end; -} - -.combo-markdown-editor .markdown-toolbar-button { - border: none; - background: none; - user-select: none; - padding: 5px; - cursor: pointer; - color: var(--color-text); -} - -.combo-markdown-editor .markdown-toolbar-button:hover { - color: var(--color-primary); -} - -.ui.form .combo-markdown-editor textarea.markdown-text-editor, -.combo-markdown-editor textarea.markdown-text-editor { - display: block; - width: 100%; - min-height: 200px; - max-height: calc(100vh - 200px); - resize: vertical; -} - -.combo-markdown-editor .CodeMirror-scroll { - max-height: calc(100vh - 200px); -} - -/* use the same styles as markup/content.css */ -.combo-markdown-editor .CodeMirror-scroll .cm-header-1 { - font-size: 2em; -} - -.combo-markdown-editor .CodeMirror-scroll .cm-header-2 { - font-size: 1.5em; -} - -.combo-markdown-editor .CodeMirror-scroll .cm-header-3 { - font-size: 1.25em; -} - -.combo-markdown-editor .CodeMirror-scroll .cm-header-4 { - font-size: 1em; -} - -.combo-markdown-editor .CodeMirror-scroll .cm-header-5 { - font-size: 0.875em; -} - -.combo-markdown-editor .CodeMirror-scroll .cm-header-6 { - font-size: 0.85em; -} - -text-expander { - display: block; - position: relative; -} - -text-expander .suggestions { - position: absolute; - min-width: 180px; - padding: 0; - margin-top: 24px; - list-style: none; - background: var(--color-box-body); - border-radius: 5px; - border: 1px solid var(--color-secondary); - box-shadow: 0 .5rem 1rem var(--color-shadow); -} - -text-expander .suggestions li { - display: flex; - align-items: center; - cursor: pointer; - padding: 4px 8px; - font-weight: 500; -} - -text-expander .suggestions li + li { - border-top: 1px solid var(--color-secondary-alpha-40); -} - -text-expander .suggestions li:first-child { - border-radius: 4px 4px 0 0; -} - -text-expander .suggestions li:last-child { - border-radius: 0 0 4px 4px; -} - -text-expander .suggestions li:only-child { - border-radius: 4px; -} - -text-expander .suggestions li:hover { - background: var(--color-hover); -} - -text-expander .suggestions .fullname { - font-weight: normal; - margin-left: 4px; - color: var(--color-text-light-1); -} - -text-expander .suggestions li[aria-selected="true"], -text-expander .suggestions li[aria-selected="true"] span { - background: var(--color-primary); - color: var(--color-primary-contrast); -} - -text-expander .suggestions img { - width: 24px; - height: 24px; - margin-right: 8px; -} diff --git a/web_src/css/editor/combomarkdowneditor.css b/web_src/css/editor/combomarkdowneditor.css new file mode 100644 index 0000000000..eb5c5d13b8 --- /dev/null +++ b/web_src/css/editor/combomarkdowneditor.css @@ -0,0 +1,133 @@ +.combo-markdown-editor { + width: 100%; +} + +.combo-markdown-editor markdown-toolbar { + cursor: default; + display: flex; + align-items: center; + padding-bottom: 10px; +} + +.combo-markdown-editor .markdown-toolbar-group { + display: flex; +} + +.combo-markdown-editor .markdown-toolbar-group:last-child { + flex: 1; + justify-content: flex-end; +} + +.combo-markdown-editor .markdown-toolbar-button { + border: none; + background: none; + user-select: none; + padding: 5px; + cursor: pointer; + color: var(--color-text); +} + +.combo-markdown-editor .markdown-toolbar-button:hover { + color: var(--color-primary); +} + +.ui.form .combo-markdown-editor textarea.markdown-text-editor, +.combo-markdown-editor textarea.markdown-text-editor { + display: block; + width: 100%; + min-height: 200px; + max-height: calc(100vh - 200px); + resize: vertical; +} + +.combo-markdown-editor .CodeMirror-scroll { + max-height: calc(100vh - 200px); +} + +/* use the same styles as markup/content.css */ +.combo-markdown-editor .CodeMirror-scroll .cm-header-1 { + font-size: 2em; +} + +.combo-markdown-editor .CodeMirror-scroll .cm-header-2 { + font-size: 1.5em; +} + +.combo-markdown-editor .CodeMirror-scroll .cm-header-3 { + font-size: 1.25em; +} + +.combo-markdown-editor .CodeMirror-scroll .cm-header-4 { + font-size: 1em; +} + +.combo-markdown-editor .CodeMirror-scroll .cm-header-5 { + font-size: 0.875em; +} + +.combo-markdown-editor .CodeMirror-scroll .cm-header-6 { + font-size: 0.85em; +} + +text-expander { + display: block; + position: relative; +} + +text-expander .suggestions { + position: absolute; + min-width: 180px; + padding: 0; + margin-top: 24px; + list-style: none; + background: var(--color-box-body); + border-radius: 5px; + border: 1px solid var(--color-secondary); + box-shadow: 0 .5rem 1rem var(--color-shadow); +} + +text-expander .suggestions li { + display: flex; + align-items: center; + cursor: pointer; + padding: 4px 8px; + font-weight: 500; +} + +text-expander .suggestions li + li { + border-top: 1px solid var(--color-secondary-alpha-40); +} + +text-expander .suggestions li:first-child { + border-radius: 4px 4px 0 0; +} + +text-expander .suggestions li:last-child { + border-radius: 0 0 4px 4px; +} + +text-expander .suggestions li:only-child { + border-radius: 4px; +} + +text-expander .suggestions li:hover { + background: var(--color-hover); +} + +text-expander .suggestions .fullname { + font-weight: normal; + margin-left: 4px; + color: var(--color-text-light-1); +} + +text-expander .suggestions li[aria-selected="true"], +text-expander .suggestions li[aria-selected="true"] span { + background: var(--color-primary); + color: var(--color-primary-contrast); +} + +text-expander .suggestions img { + width: 24px; + height: 24px; + margin-right: 8px; +} diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 0b4b47f560..ceb20db043 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -68,16 +68,22 @@ Gitea's private styles use `g-` prefix. .gt-cursor-default { cursor: default !important; } .gt-invisible { visibility: hidden !important; } .gt-items-start { align-items: flex-start !important; } -.gt-overflow-x-scroll { overflow-x: scroll !important; } .gt-pointer-events-none { pointer-events: none !important; } .gt-relative { position: relative !important; } .gt-whitespace-nowrap { white-space: nowrap !important; } .gt-whitespace-pre { white-space: pre !important; } .gt-whitespace-pre-wrap { white-space: pre-wrap !important; } +.gt-overflow-x-auto { overflow-x: auto !important; } +.gt-overflow-x-scroll { overflow-x: scroll !important; } +.gt-overflow-y-hidden { overflow-y: hidden !important; } + .gt-w-screen { width: 100vw !important; } .gt-h-screen { height: 100vh !important; } +.gt-float-left { float: left !important; } +.gt-float-right { float: right !important; } + .gt-rounded { border-radius: var(--border-radius) !important; } .gt-rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; } .gt-rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; } diff --git a/web_src/css/home.css b/web_src/css/home.css index 25643cda27..0094acc75f 100644 --- a/web_src/css/home.css +++ b/web_src/css/home.css @@ -43,39 +43,38 @@ color: var(--color-green); } -footer { +.page-footer { + display: flex; background-color: var(--color-footer); border-top: 1px solid var(--color-secondary); line-height: 39px; - flex-basis: 40px; - color: var(--color-text-light); padding: 0 20px; } -footer .right.links { +.page-footer .left-links { + flex: 1; +} + +.page-footer .right-links { min-width: 180px; /* make sure the menu dropdown doesn't overflow horizontally when language name is short */ } -footer .right.links > a { +.page-footer .right-links > a { border-left: 1px solid var(--color-secondary-dark-1); padding-left: 8px; margin-left: 5px; } -footer .ui.dropdown.language .menu { +.page-footer .ui.dropdown.language .menu { height: 500px; max-height: calc(100vh - 60px); overflow-y: auto; margin-bottom: 10px; } - @media (max-width: 880px) { - footer .ui.left, - footer .ui.right { - width: 100%; + .page-footer { display: block; text-align: center; - float: none; } } diff --git a/web_src/css/index.css b/web_src/css/index.css index e59f3eb02a..9d00566674 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -30,9 +30,10 @@ @import "./install.css"; @import "./form.css"; @import "./repository.css"; -@import "./repository-release-tag.css"; +@import "./repository/release-tag.css"; +@import "./repository/issue-label.css"; @import "./editor.css"; -@import "./editor-markdown.css"; +@import "./editor/combomarkdowneditor.css"; @import "./organization.css"; @import "./user.css"; @import "./dashboard.css"; diff --git a/web_src/css/repository-release-tag.css b/web_src/css/repository-release-tag.css deleted file mode 100644 index 6922ce5179..0000000000 --- a/web_src/css/repository-release-tag.css +++ /dev/null @@ -1,151 +0,0 @@ -.repository.releases #release-list { - border-top: 1px solid var(--color-secondary); - margin-top: 20px; - padding-top: 15px; - padding-left: 0; -} - -.repository.releases #release-list .release-list-title { - font-size: 2rem; - font-weight: normal; - margin-top: -4px; - margin-bottom: 0; -} - -.repository.releases #release-list > li { - list-style: none; -} - -.repository.releases #release-list > li .meta, -.repository.releases #release-list > li .detail { - padding-top: 30px; - padding-bottom: 40px; -} - -.repository.releases #release-list > li .meta { - text-align: right; - position: relative; -} - -.repository.releases #release-list > li .meta .label { - margin-right: 0; -} - -.repository.releases #release-list > li .meta .commit { - display: block; - margin-top: 10px; -} - -.repository.releases #release-list > li .meta .choose { - margin-top: 15px; -} - -.repository.releases #release-list > li .meta .choose .button { - margin-right: 0; -} - -.repository.releases #release-list > li .detail { - border-left: 2px solid var(--color-secondary); -} - -.repository.releases #release-list > li .detail .author img { - margin-bottom: 3px; -} - -.repository.releases #release-list > li .detail .download > a .svg { - margin-left: 5px; - margin-right: 5px; -} - -.repository.releases #release-list > li .detail .download .list { - padding-left: 0; -} - -.repository.releases #release-list > li .detail .download .list li { - list-style: none; - display: block; - padding: 8px; - border: 1px solid var(--color-secondary); - background: var(--color-light); -} - -.repository.releases #release-list > li .detail .download .list li a > .text.right { - margin-right: 5px; -} - -.repository.releases #release-list > li .detail .download .list li + li { - border-top: 0; -} - -.repository.releases #release-list > li .detail .download .list li:first-of-type { - border-radius: var(--border-radius) 0 0 var(--border-radius); -} - -.repository.releases #release-list > li .detail .download .list li:last-of-type { - border-radius: 0 var(--border-radius) var(--border-radius) 0; -} - -.repository.releases #release-list > li .detail .dot { - width: 10px; - height: 10px; - background-color: var(--color-secondary-dark-3); - z-index: 9; - position: absolute; - display: block; - left: -6px; - top: 40px; - border-radius: 100%; - border: 2.5px solid var(--color-body); -} - -.repository.tags #tags-table .tag { - padding: 8px 12px; -} - -.repository.tags #tags-table .release-tag-name { - font-size: 18px; - font-weight: normal; -} - -.repository.new.release .target { - min-width: 500px; -} - -.repository.new.release .target #tag-name { - margin-top: -4px; -} - -.repository.new.release .target .at { - margin-left: -5px; - margin-right: 5px; -} - -.repository.new.release .target .selection.dropdown { - padding-top: 10px; - padding-bottom: 10px; -} - -.repository.new.release .prerelease.field { - margin-bottom: 0; -} - -@media (max-width: 438px) { - .repository.new.release .field button, - .repository.new.release .field input { - width: 100%; - } -} - -@media (max-width: 767px) { - .repository.new.release .field button { - margin-bottom: 1em; - } -} - -.repository.new.release .field .wrap_remove { - height: 38px; -} - -.repository.new.release .field .attachment_edit { - width: 450px !important; -} diff --git a/web_src/css/repository.css b/web_src/css/repository.css index af2dd2be24..5ef7bd6c50 100644 --- a/web_src/css/repository.css +++ b/web_src/css/repository.css @@ -160,7 +160,7 @@ } .repository .ui.tabs.divider { - margin-top: 0; + margin-top: -1px; margin-bottom: 20px; } diff --git a/web_src/css/repository/issue-label.css b/web_src/css/repository/issue-label.css new file mode 100644 index 0000000000..a2eb0344a5 --- /dev/null +++ b/web_src/css/repository/issue-label.css @@ -0,0 +1,44 @@ +.issue-label-list { + list-style: none; + padding: 0; + margin: 0; +} + +.issue-label-list .item { + border-bottom: 1px solid var(--color-secondary); + display: flex; + padding: 1em 0; + margin: 0; +} + +.issue-label-list .item:first-child { + padding-top: 0; +} + +.issue-label-list .item:last-child { + border-bottom: none; + padding-bottom: 0; +} + +.issue-label-list .item .label-title { + width: 33%; +} + +.issue-label-list .item .label-issues { + width: 33%; +} + +.issue-label-list .item .label-operation { + width: 33%; + text-align: right; +} + +.issue-label-list .item a { + font-size: 12px; + padding-right: 10px; + color: var(--color-text-light); +} + +.issue-label-list .item.org-label { + opacity: 0.7; +} diff --git a/web_src/css/repository/release-tag.css b/web_src/css/repository/release-tag.css new file mode 100644 index 0000000000..6922ce5179 --- /dev/null +++ b/web_src/css/repository/release-tag.css @@ -0,0 +1,151 @@ +.repository.releases #release-list { + border-top: 1px solid var(--color-secondary); + margin-top: 20px; + padding-top: 15px; + padding-left: 0; +} + +.repository.releases #release-list .release-list-title { + font-size: 2rem; + font-weight: normal; + margin-top: -4px; + margin-bottom: 0; +} + +.repository.releases #release-list > li { + list-style: none; +} + +.repository.releases #release-list > li .meta, +.repository.releases #release-list > li .detail { + padding-top: 30px; + padding-bottom: 40px; +} + +.repository.releases #release-list > li .meta { + text-align: right; + position: relative; +} + +.repository.releases #release-list > li .meta .label { + margin-right: 0; +} + +.repository.releases #release-list > li .meta .commit { + display: block; + margin-top: 10px; +} + +.repository.releases #release-list > li .meta .choose { + margin-top: 15px; +} + +.repository.releases #release-list > li .meta .choose .button { + margin-right: 0; +} + +.repository.releases #release-list > li .detail { + border-left: 2px solid var(--color-secondary); +} + +.repository.releases #release-list > li .detail .author img { + margin-bottom: 3px; +} + +.repository.releases #release-list > li .detail .download > a .svg { + margin-left: 5px; + margin-right: 5px; +} + +.repository.releases #release-list > li .detail .download .list { + padding-left: 0; +} + +.repository.releases #release-list > li .detail .download .list li { + list-style: none; + display: block; + padding: 8px; + border: 1px solid var(--color-secondary); + background: var(--color-light); +} + +.repository.releases #release-list > li .detail .download .list li a > .text.right { + margin-right: 5px; +} + +.repository.releases #release-list > li .detail .download .list li + li { + border-top: 0; +} + +.repository.releases #release-list > li .detail .download .list li:first-of-type { + border-radius: var(--border-radius) 0 0 var(--border-radius); +} + +.repository.releases #release-list > li .detail .download .list li:last-of-type { + border-radius: 0 var(--border-radius) var(--border-radius) 0; +} + +.repository.releases #release-list > li .detail .dot { + width: 10px; + height: 10px; + background-color: var(--color-secondary-dark-3); + z-index: 9; + position: absolute; + display: block; + left: -6px; + top: 40px; + border-radius: 100%; + border: 2.5px solid var(--color-body); +} + +.repository.tags #tags-table .tag { + padding: 8px 12px; +} + +.repository.tags #tags-table .release-tag-name { + font-size: 18px; + font-weight: normal; +} + +.repository.new.release .target { + min-width: 500px; +} + +.repository.new.release .target #tag-name { + margin-top: -4px; +} + +.repository.new.release .target .at { + margin-left: -5px; + margin-right: 5px; +} + +.repository.new.release .target .selection.dropdown { + padding-top: 10px; + padding-bottom: 10px; +} + +.repository.new.release .prerelease.field { + margin-bottom: 0; +} + +@media (max-width: 438px) { + .repository.new.release .field button, + .repository.new.release .field input { + width: 100%; + } +} + +@media (max-width: 767px) { + .repository.new.release .field button { + margin-bottom: 1em; + } +} + +.repository.new.release .field .wrap_remove { + height: 38px; +} + +.repository.new.release .field .attachment_edit { + width: 450px !important; +} -- cgit v1.2.3