Clarify "text-align" CSS helpers, fix clone button padding (#25763)

Changes:

* Rename gt-tl/gt-tc/gt-tr to gt-text-left/gt-text-center/gt-text-right
* The gt-ab and gt-br-0 are removed because they are not needed anymore
* Fix the clone dropdown button padding by ":not(.icon)"

Before:

<details>

![image](https://github.com/go-gitea/gitea/assets/2114189/eb030633-622c-4ca7-8e88-ce010d9f51a6)

</details>

After:

<details>

![image](https://github.com/go-gitea/gitea/assets/2114189/64c09403-bf21-439c-88f1-780b34ccab6b)

</details>

Fixes #25758

Co-authored-by: Giteabot <teabot@gitea.io>

diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
index 79e18678d4df3214735623f140e756acc7cb1c21..fc8bf60811003e5b62384cabfdd13ada5c01e802 100644 (file)
--- a/templates/projects/list.tmpl
+++ b/templates/projects/list.tmpl
@@ -1,5 +1,5 @@
 {{if .CanWriteProjects}}
-       <div class="gt-tr">
+       <div class="gt-text-right">
                <a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.projects.new"}}</a>
        </div>
        <div class="divider"></div>

diff --git a/templates/repo/clone_buttons.tmpl b/templates/repo/clone_buttons.tmpl
index e451c0afd67c1116d483178c2622cd7b94195d1a..8f5b63128a21813fbd189ef670fa3ff1a822f0cd 100644 (file)
--- a/templates/repo/clone_buttons.tmpl
+++ b/templates/repo/clone_buttons.tmpl
@@ -9,7 +9,7 @@
                SSH
        </button>
 {{end}}
-<input id="repo-clone-url" size="20" class="js-clone-url gt-br-0" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
+<input id="repo-clone-url" size="20" class="js-clone-url" value="{{$.CloneButtonOriginLink.HTTPS}}" readonly>
 <button class="ui basic small compact icon button" id="clipboard-btn" data-tooltip-content="{{.locale.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{.locale.Tr "copy_url"}}">
        {{svg "octicon-copy" 14}}
 </button>

diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl
index 8f8e9fa0e81b8af3fbd4a9ef33df5ef3c7a570a6..e4aad30fa7cf18ca59f51f35a962c203811e3c48 100644 (file)
--- a/templates/repo/commit_page.tmpl
+++ b/templates/repo/commit_page.tmpl
@@ -189,7 +189,7 @@
                                </div>
                </div>
                {{if .Commit.Signature}}
-                       <div class="ui bottom attached message gt-tl gt-df gt-ac gt-sb commit-header-row gt-fw {{$class}}">
+                       <div class="ui bottom attached message gt-text-left gt-df gt-ac gt-sb commit-header-row gt-fw {{$class}}">
                                <div class="gt-df gt-ac">
                                        {{if .Verification.Verified}}
                                                {{if ne .Verification.SigningUser.ID 0}}

diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index aeb1e6a90e62a0ac1a8edd759bafb9164f372c71..b119c319489168ef3c5c232e68f09e1e346031c5 100644 (file)
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -121,7 +121,7 @@
                                                                <div class="header">
                                                                        {{$.locale.Tr "repo.already_forked" .Name}}
                                                                </div>
-                                                               <div class="content gt-tl">
+                                                               <div class="content gt-text-left">
                                                                        <div class="ui list">
                                                                                {{range $.UserAndOrgForks}}
                                                                                        <div class="ui item gt-py-3">

diff --git a/templates/repo/migrate/migrate.tmpl b/templates/repo/migrate/migrate.tmpl
index 0e15da84255ba5218c54b41edcc6d2c64c9c63ba..eb177946473ad5a06b90f42a6258c9c0031c8c57 100644 (file)
--- a/templates/repo/migrate/migrate.tmpl
+++ b/templates/repo/migrate/migrate.tmpl
@@ -16,10 +16,10 @@
                                                        {{svg (printf "gitea-%s" .Name) 184}}
                                                {{end}}
                                                <div class="content">
-                                                       <div class="header gt-tc">
+                                                       <div class="header gt-text-center">
                                                                {{.Title}}
                                                        </div>
-                                                       <div class="description gt-tc">
+                                                       <div class="description gt-text-center">
                                                                {{(printf "repo.migrate.%s.description" .Name) | $.locale.Tr}}
                                                        </div>
                                                </div>

diff --git a/templates/repo/unicode_escape_prompt.tmpl b/templates/repo/unicode_escape_prompt.tmpl
index 12eff6aebe3afdf9723f2dde1d2df7d8b5d3af00..961e2370a782fd1b8a70776c854e6463d5124985 100644 (file)
--- a/templates/repo/unicode_escape_prompt.tmpl
+++ b/templates/repo/unicode_escape_prompt.tmpl
@@ -1,6 +1,6 @@
 {{if .EscapeStatus}}
        {{if .EscapeStatus.HasInvisible}}
-               <div class="ui error message unicode-escape-prompt gt-tl">
+               <div class="ui error message unicode-escape-prompt gt-text-left">
                        <button class="close icon hide-panel button" data-panel-closest=".message">{{svg "octicon-x" 16 "close inside"}}</button>
                        <div class="header">
                                {{$.root.locale.Tr "repo.invisible_runes_header"}}
@@ -11,7 +11,7 @@
                        {{end}}
                </div>
        {{else if .EscapeStatus.HasAmbiguous}}
-               <div class="ui warning message unicode-escape-prompt gt-tl">
+               <div class="ui warning message unicode-escape-prompt gt-text-left">
                        <button class="close icon hide-panel button" data-panel-closest=".message">{{svg "octicon-x" 16 "close inside"}}</button>
                        <div class="header">
                                {{$.root.locale.Tr "repo.ambiguous_runes_header"}}

diff --git a/templates/user/auth/captcha.tmpl b/templates/user/auth/captcha.tmpl
index 62a3779e55285fe7009b8a56bf235ce90b1e70fe..a71d3bc53888bfba0de11fbf08406704f4290dcc 100644 (file)
--- a/templates/user/auth/captcha.tmpl
+++ b/templates/user/auth/captcha.tmpl
@@ -22,7 +22,7 @@
                <div id="captcha" data-captcha-type="m-captcha" class="m-captcha" data-sitekey="{{.McaptchaSitekey}}" data-instance-url="{{.McaptchaURL}}"></div>
        </div>
 {{else if eq .CaptchaType "cfturnstile"}}
-       <div class="inline field captcha-field gt-tc">
+       <div class="inline field captcha-field gt-text-center">
                <div id="captcha" data-captcha-type="cf-turnstile" data-sitekey="{{.CfTurnstileSitekey}}"></div>
        </div>
 {{end}}{{end}}

diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index a24d35e97938dad58e8bd5e861d6cc3772ec8aef..73f2ebe79bd443fe74af7b822ad359e47fc31286 100644 (file)
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -8,10 +8,6 @@ Gitea's private styles use `g-` prefix.
 .gt-dif { display: inline-flex !important; }
 .gt-dib { display: inline-block !important; }
 .gt-ac { align-items: center !important; }
-.gt-ab { align-items: baseline !important; }
-.gt-tc { text-align: center !important; }
-.gt-tl { text-align: left !important; }
-.gt-tr { text-align: right !important; } /* TODO: rename these to "gt-text-right", etc. there are only a few */
 .gt-jc { justify-content: center !important; }
 .gt-js { justify-content: flex-start !important; }
 .gt-je { justify-content: flex-end !important; }
@@ -22,7 +18,6 @@ Gitea's private styles use `g-` prefix.
 .gt-vm { vertical-align: middle !important; }
 .gt-w-100 { width: 100% !important; }
 .gt-h-100 { height: 100% !important; }
-.gt-br-0 { border-radius: 0 !important; }
 
 .gt-mono {
   font-family: var(--fonts-monospace) !important;
@@ -90,6 +85,10 @@ Gitea's private styles use `g-` prefix.
 .gt-float-right { float: right !important; }
 .gt-clear-both { clear: both !important; }
 
+.gt-text-center { text-align: center !important; }
+.gt-text-left { text-align: left !important; }
+.gt-text-right { text-align: right !important; }
+
 .gt-font-light { font-weight: var(--font-weight-light) !important; }
 .gt-font-normal { font-weight: var(--font-weight-normal) !important; }
 .gt-font-medium { font-weight: var(--font-weight-medium) !important; }

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 55d10098e9a1e45c05d2d18e3416d37253296372..3862436701957538250f3e1145bdaf9cbe7cebb8 100644 (file)
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -190,6 +190,7 @@
 
 .repository #clone-panel #repo-clone-url {
   width: 320px;
+  border-radius: 0;
 }
 
 @media (min-width: 768px) and (max-width: 991.98px) {
@@ -2655,7 +2656,7 @@
   height: 30px;
 }
 
-.repo-button-row .button.dropdown {
+.repo-button-row .button.dropdown:not(.icon) {
   padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */
 }
 

diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index a99b29141d3f8694d01302c3524abea82ee72667..8ee5ce25bfc9e740292968a5bd47047d2a5b4d27 100644 (file)
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -237,7 +237,7 @@ export function initGlobalDropzone() {
           // Create a "Copy Link" element, to conveniently copy the image
           // or file link as Markdown to the clipboard
           const copyLinkElement = document.createElement('div');
-          copyLinkElement.className = 'gt-tc';
+          copyLinkElement.className = 'gt-text-center';
           // The a element has a hardcoded cursor: pointer because the default is overridden by .dropzone
           copyLinkElement.innerHTML = `<a href="#" style="cursor: pointer;">${svg('octicon-copy', 14, 'copy link')} Copy link</a>`;
           copyLinkElement.addEventListener('click', (e) => {

diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js
index fc916aea1920a4852655529a48b3d6e0c1ab7dcc..3ada166c5b0097e92f44dd5fd9a01c905d83d6bc 100644 (file)
--- a/web_src/js/features/repo-issue-content.js
+++ b/web_src/js/features/repo-issue-content.js
@@ -24,7 +24,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
       </div>
     </div>
   </div>
-  <div class="comment-diff-data gt-tl gt-p-3 is-loading"></div>
+  <div class="comment-diff-data gt-text-left gt-p-3 is-loading"></div>
 </div>`);
   $dialog.appendTo($('body'));
   $dialog.find('.dialog-header-options').dropdown({