Improve CSS helper naming (#28769)

* `gt-w-100` => `gt-w-full` to match tailwind
* clarify `gt-hidden` priority

diff --git a/templates/admin/self_check.tmpl b/templates/admin/self_check.tmpl
index 0f1ca68e006bd72fb0d213c32cf6392469fd1b80..6bca01ec655476ccbaba1acb70f073ef243a69ef 100644 (file)
--- a/templates/admin/self_check.tmpl
+++ b/templates/admin/self_check.tmpl
@@ -20,7 +20,7 @@
                        {{if .DatabaseCheckInconsistentCollationColumns}}
                                <div class="ui red message">
                                        {{ctx.Locale.Tr "admin.self_check.database_inconsistent_collation_columns" .DatabaseCheckResult.DatabaseCollation}}
-                                       <ul class="gt-w-100">
+                                       <ul class="gt-w-full">
                                        {{range .DatabaseCheckInconsistentCollationColumns}}
                                                <li>{{.}}</li>
                                        {{end}}

diff --git a/templates/devtest/fomantic-modal.tmpl b/templates/devtest/fomantic-modal.tmpl
index a64390c93ced442831a25f60b33e714c40f70531..eda169a043c2fdcc36c2216b8dd2c43f38217a64 100644 (file)
--- a/templates/devtest/fomantic-modal.tmpl
+++ b/templates/devtest/fomantic-modal.tmpl
@@ -5,7 +5,7 @@
        <div id="test-modal-form-1" class="ui mini modal">
                <div class="header">Form dialog (layout 1)</div>
                <form class="content" method="post">
-                       <div class="ui input gt-w-100"><input name="user_input"></div>
+                       <div class="ui input gt-w-full"><input name="user_input"></div>
                        {{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
                </form>
        </div>
@@ -14,7 +14,7 @@
                <div class="header">Form dialog (layout 2)</div>
                <form method="post">
                        <div class="content">
-                               <div class="ui input gt-w-100"><input name="user_input"></div>
+                               <div class="ui input gt-w-full"><input name="user_input"></div>
                                {{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
                        </div>
                </form>
@@ -24,7 +24,7 @@
                <div class="header">Form dialog (layout 3)</div>
                <form method="post">
                        <div class="content">
-                               <div class="ui input gt-w-100"><input name="user_input"></div>
+                               <div class="ui input gt-w-full"><input name="user_input"></div>
                        </div>
                        {{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}
                </form>
@@ -33,7 +33,7 @@
        <div id="test-modal-form-4" class="ui mini modal">
                <div class="header">Form dialog (layout 4)</div>
                <div class="content">
-                       <div class="ui input gt-w-100"><input name="user_input"></div>
+                       <div class="ui input gt-w-full"><input name="user_input"></div>
                </div>
                <form method="post">
                        {{template "base/modal_actions_confirm" (dict "ModalButtonTypes" "confirm")}}

diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 1224bbe84c416aa90bd5f5dd3526a64ce3b459f3..be7c7e80f2bf8d48c6e13bf69ea642778cba188a 100644 (file)
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -203,7 +203,7 @@
                                                        {{if $showFileViewToggle}}
                                                                {{/* for image or CSV, it can have a horizontal scroll bar, there won't be review comment context menu (position absolute) which would be clipped by "overflow" */}}
                                                                <div id="diff-rendered-{{$file.NameHash}}" class="file-body file-code {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}} gt-overflow-x-scroll">
-                                                                       <table class="chroma gt-w-100">
+                                                                       <table class="chroma gt-w-full">
                                                                                {{if $isImage}}
                                                                                        {{template "repo/diff/image_diff" dict "file" . "root" $ "blobBase" $blobBase "blobHead" $blobHead "sniffedTypeBase" $sniffedTypeBase "sniffedTypeHead" $sniffedTypeHead}}
                                                                                {{else}}

diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl
index 3cc853b351314691f703a0679a5ebfc7196c022e..1863ba39d762205f82f534158423ccd698d38f00 100644 (file)
--- a/templates/repo/issue/card.tmpl
+++ b/templates/repo/issue/card.tmpl
@@ -6,7 +6,7 @@
                        {{end}}
                </div>
        {{end}}
-       <div class="content gt-p-0 gt-w-100">
+       <div class="content gt-p-0 gt-w-full">
                <div class="gt-df gt-items-start">
                        <div class="issue-card-icon">
                                {{template "shared/issueicon" .}}

diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 27b32139bae3bbd23ed3eed613425dee51810f21..da94ebb4862ed01c5a1c8fb9a9b59676a40f9e42 100644 (file)
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -12,8 +12,6 @@ Gitea's private styles use `g-` prefix.
 .gt-f1 { flex: 1 !important; }
 .gt-fw { flex-wrap: wrap !important; }
 .gt-vm { vertical-align: middle !important; }
-.gt-w-100 { width: 100% !important; }
-.gt-h-100 { height: 100% !important; }
 
 .gt-mono {
   font-family: var(--fonts-monospace) !important;
@@ -69,15 +67,17 @@ Gitea's private styles use `g-` prefix.
 .gt-self-start { align-self: flex-start !important; }
 .gt-self-end { align-self: flex-end !important; }
 .gt-no-underline { text-decoration-line: none !important; }
-.gt-w-auto { width: auto !important; }
 .gt-normal-case { text-transform: none !important; }
 .gt-italic { font-style: italic !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-h-full { height: 100% !important; }
+.gt-w-auto { width: auto !important; }
+.gt-w-screen { width: 100vw !important; }
+.gt-w-full { width: 100% !important; }
 
 .gt-float-left { float: left !important; }
 .gt-float-right { float: right !important; }
@@ -268,7 +268,7 @@ Gitea's private styles use `g-` prefix.
 .gt-font-18 { font-size: 18px !important }
 
 /*
-gt-hidden must be placed after all other "display: xxx !important" classes to win the chance
+gt-hidden must win all other "display: xxx !important" classes to get the chance to "hide" an element.
 do not use:
 * "[hidden]" attribute: it's too weak, can not be applied to an element with "display: flex"
 * ".hidden" class: it has been polluted by Fomantic UI in many cases
@@ -278,4 +278,4 @@ only use:
 * this ".gt-hidden" class
 * showElem/hideElem/toggleElem functions in "utils/dom.js"
 */
-.gt-hidden { display: none !important; }
+.gt-hidden.gt-hidden { display: none !important; }