From 576644d81555cfcd7c865d444285cad64cc0b9ec Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sat, 26 Aug 2023 07:35:10 +0800
Subject: 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


![image](https://github.com/go-gitea/gitea/assets/2114189/d02010d4-dc7d-463f-bc99-dcc9b6e2e2ac)

### Admin Stacktrace


![image](https://github.com/go-gitea/gitea/assets/2114189/4045695c-a8c4-4e37-b720-e77a61b1e965)

### Org Home


![image](https://github.com/go-gitea/gitea/assets/2114189/069f02d0-76ad-4052-8a80-700d7e501d40)

### Org Team Repo


![image](https://github.com/go-gitea/gitea/assets/2114189/dc8d6106-bb6b-4f60-83ac-06cb28df3ab5)

### Release List


![image](https://github.com/go-gitea/gitea/assets/2114189/0845e8a5-d1a9-487a-9d25-3c200ad54c17)


### User Setting Application Token Scope


![image](https://github.com/go-gitea/gitea/assets/2114189/fffbde27-432b-49c6-827e-17b8cd3457ff)

Co-authored-by: Giteabot <teabot@gitea.io>
---
 web_src/css/helpers.css                     | 4 ----
 web_src/css/repo/release-tag.css            | 5 ++++-
 web_src/js/components/DashboardRepoList.vue | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

(limited to 'web_src')

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">
-- 
cgit v1.2.3