From 3746a625f55d24fc48a0198c8108bdebfd4edeb3 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 16 Apr 2024 17:46:12 +0200 Subject: [PATCH] Tweak repo buttons on mobile and labeled button border-radius (#30503) 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 --------- Co-authored-by: Giteabot --- templates/repo/header.tmpl | 36 +++++++++++++++---------------- templates/repo/star_unstar.tmpl | 2 +- templates/repo/watch_unwatch.tmpl | 2 +- web_src/css/modules/button.css | 10 +++++++++ web_src/css/modules/label.css | 2 +- web_src/css/repo/header.css | 14 +++++++----- 6 files changed, 40 insertions(+), 26 deletions(-) diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 5e2774dfa1ad5..bb344bf3d48f3 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 1cdb98bf2721d..0f09d8b4925a6 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 64be97141666d..465cd91c2b377 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 87b9ddf292d0e..4e133852f1cca 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -63,6 +63,8 @@ } .ui.labeled.button > .button { margin: 0; + border-top-right-radius: 0; + border-bottom-right-radius: 0; } .ui.labeled.button > .label { display: flex; @@ -70,6 +72,14 @@ margin: 0 0 0 -1px !important; font-size: 1em; border-color: var(--color-light-border); + border-top-left-radius: 0; + border-bottom-left-radius: 0; +} +.ui.labeled.button > .label:hover { + background: var(--color-hover); +} +.ui.labeled.button > .button:hover + .label { + border-left-color: var(--color-secondary-dark-2); } .ui.button > .icon:not(.button) { diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index 2032b2c84bbb5..1e42668aa1a2c 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 55e704ed10be7..b70691435f598 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; + } +}