diff options
| author | wxiaoguang <wxiaoguang@gmail.com> | 2023-08-26 07:35:10 +0800 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-08-26 01:35:10 +0200 |
| commit | 576644d81555cfcd7c865d444285cad64cc0b9ec (patch) | |
| tree | a5a90985c2477c96abeab09d19f3ed12e463caef /web_src | |
| parent | 8b5c081d766bc7be725b07a8abfb2d8f39c45fd3 (diff) | |
| download | gitea-576644d81555cfcd7c865d444285cad64cc0b9ec.tar.gz gitea-576644d81555cfcd7c865d444285cad64cc0b9ec.zip | |
Simplify helper CSS classes and avoid abuse (#26728)
Removed CSS helper classes (some of them are not useful while some of
them are abused often)
* `gt-db`: in most cases it could be replaced by `gt-df` and the flex
layout should be encouraged. Other cases: either it does need the
`gt-df` (eg: by using `div` directly) or it is an abuse (eg: the warning
message in a form)
* `gt-di`: it doesn't seem useful, or it could be replaced by `gt-dib`
in most cases.
* `gt-dif`: not useful, it could be replaced by `flex-text-inline` or
`gt-df`
* `gt-js`: never used
* All `<i class="icon gt-df gt-ac gt-jc">` could be written as `<i
class="icon">`
## Some UI samples
### Admin Notice
### Admin Stacktrace
### Org Home
### Org Team Repo
### Release List
### User Setting Application Token Scope
Co-authored-by: Giteabot <teabot@gitea.io>
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/css/helpers.css | 4 | ||||
| -rw-r--r-- | web_src/css/repo/release-tag.css | 5 | ||||
| -rw-r--r-- | web_src/js/components/DashboardRepoList.vue | 2 |
3 files changed, 5 insertions, 6 deletions
diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 17a89ebfb7..bd1fb992ac 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -2,14 +2,10 @@ Gitea's tailwind-style CSS helper classes have `gt-` prefix. Gitea's private styles use `g-` prefix. */ -.gt-db { display: block !important; } .gt-df { display: flex !important; } -.gt-di { display: inline !important; } -.gt-dif { display: inline-flex !important; } .gt-dib { display: inline-block !important; } .gt-ac { align-items: center !important; } .gt-jc { justify-content: center !important; } -.gt-js { justify-content: flex-start !important; } .gt-je { justify-content: flex-end !important; } .gt-sb { justify-content: space-between !important; } .gt-fc { flex-direction: column !important; } diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css index 33ff2cddd9..70925f5a0e 100644 --- a/web_src/css/repo/release-tag.css +++ b/web_src/css/repo/release-tag.css @@ -23,8 +23,11 @@ .repository.releases #release-list > li .meta { margin-top: 4px; - text-align: right; position: relative; + text-align: right; + display: flex; + flex-direction: column; + gap: 1em; } .repository.releases #release-list > li .detail { diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue index bc6cc6a2c4..f1ea937f05 100644 --- a/web_src/js/components/DashboardRepoList.vue +++ b/web_src/js/components/DashboardRepoList.vue @@ -17,7 +17,7 @@ <div class="ui attached segment repos-search"> <div class="ui fluid right action left icon input" :class="{loading: isLoading}"> <input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos"> - <i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i> + <i class="icon"><svg-icon name="octicon-search" :size="16"/></i> <div class="ui dropdown icon button" :title="textFilter"> <svg-icon name="octicon-filter" :size="16"/> <div class="menu"> |