From ad34d221139a43f1ac9e884906a604bf0a44e585 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 24 Apr 2024 05:34:25 +0200 Subject: [PATCH] Tweak repo buttons on mobile and labeled button border-radius (#30503) (#30525) Backport of https://github.com/go-gitea/gitea/pull/30503 to v1.22, the only change excluded is the border-radius changes which aren't necessary on this branch because the button css was not migrated. Fixes: https://github.com/go-gitea/gitea/issues/30514 Fixes: https://github.com/go-gitea/gitea/pull/30288#issuecomment-2057466623 - Fix border-radius regression from https://github.com/go-gitea/gitea/pull/30475 - Fix and simplify hover state - Move the modal HTML so it does not interfere with the CSS - Make the star and unwatch text show on mobile. There is still plenty of space, below is iPhone 12 viewport size Screenshot 2024-04-15 at 20 34 03 Screenshot 2024-04-15 at 20 31 42 Screenshot 2024-04-15 at 20 31 47 --- templates/repo/header.tmpl | 36 +++++++++++++++---------------- templates/repo/star_unstar.tmpl | 2 +- templates/repo/watch_unwatch.tmpl | 2 +- web_src/css/modules/button.css | 7 ++++++ web_src/css/modules/label.css | 2 +- web_src/css/repo/header.css | 14 +++++++----- 6 files changed, 37 insertions(+), 26 deletions(-) diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 5e2774dfa1a..bb344bf3d48 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -91,28 +91,28 @@ > {{svg "octicon-repo-forked"}}{{ctx.Locale.Tr "repo.fork"}} - {{CountFmt .NumForks}} + {{end}} {{end}} diff --git a/templates/repo/star_unstar.tmpl b/templates/repo/star_unstar.tmpl index 1cdb98bf272..0f09d8b4925 100644 --- a/templates/repo/star_unstar.tmpl +++ b/templates/repo/star_unstar.tmpl @@ -4,7 +4,7 @@ {{if $.IsStaringRepo}}{{$buttonText = ctx.Locale.Tr "repo.unstar"}}{{end}} {{CountFmt .Repository.NumStars}} diff --git a/templates/repo/watch_unwatch.tmpl b/templates/repo/watch_unwatch.tmpl index 64be9714166..465cd91c2b3 100644 --- a/templates/repo/watch_unwatch.tmpl +++ b/templates/repo/watch_unwatch.tmpl @@ -4,7 +4,7 @@ {{if $.IsWatchingRepo}}{{$buttonText = ctx.Locale.Tr "repo.unwatch"}}{{end}} {{CountFmt .Repository.NumWatches}} diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index faeed8c9a1b..63e00a02b45 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -138,6 +138,13 @@ It needs some tricks to tweak the left/right borders with active state */ background: var(--color-hover); } +.ui.labeled.button > .label:hover { + background: var(--color-hover); +} +.ui.labeled.button > .button:hover + .label { + border-left-color: var(--color-secondary-dark-2); +} + /* primary */ .ui.primary.labels .label, diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index 0512c5fddbb..9af0a149edd 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -107,7 +107,7 @@ a.ui.label:hover { a.ui.basic.label:hover { text-decoration: none; color: var(--color-text); - border-color: var(--color-light-border); + border-color: var(--color-secondary-dark-2); background: var(--color-hover); } diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css index 55e704ed10b..b70691435f5 100644 --- a/web_src/css/repo/header.css +++ b/web_src/css/repo/header.css @@ -36,11 +36,6 @@ gap: 0.25em; } -.repo-buttons .ui.labeled.button > .label:hover { - color: var(--color-primary-light-2); - background: var(--color-light); -} - .repo-buttons button[disabled] ~ .label { opacity: var(--opacity-disabled); color: var(--color-text-dark); @@ -67,3 +62,12 @@ .repo-buttons .ui.labeled.button.disabled > .button { pointer-events: none !important; } + +@media (max-width: 767.98px) { + .repo-buttons .ui.button, + .repo-buttons .ui.label { + padding-left: 8px; + padding-right: 8px; + margin: 0; + } +}