Tweak repo buttons on mobile and labeled button border-radius (#30503)

Fixes: #30514 Fixes: #30288 (comment) - Fix border-radius regression from #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 <img width="696" alt="Screenshot 2024-04-15 at 20 34 03" src="https://github.com/go-gitea/gitea/assets/115237/af90bb00-4671-4973-a255-8eb44ee6ba8d"> <img width="230" alt="Screenshot 2024-04-15 at 20 31 42" src="https://github.com/go-gitea/gitea/assets/115237/986ef533-7a01-4bb0-8dcd-fd19e4259e84"> <img width="233" alt="Screenshot 2024-04-15 at 20 31 47" src="https://github.com/go-gitea/gitea/assets/115237/5b825dd8-0ccc-4d56-9d8f-774abb935b68"> --------- Co-authored-by: Giteabot <teabot@gitea.io>
go-gitea · Apr 16, 2024 · 3746a62 · 3746a62
1 parent a658e2f
commit 3746a62
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 26 deletions.
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
@@ -91,28 +91,28 @@
 							>
 								{{svg "octicon-repo-forked"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.fork"}}</span>
 							</a>
-							<div class="ui small modal" id="fork-repo-modal">
-								<div class="header">
-									{{ctx.Locale.Tr "repo.already_forked" .Name}}
-								</div>
-								<div class="content tw-text-left">
-									<div class="ui list">
-										{{range $.UserAndOrgForks}}
-											<div class="ui item tw-py-2">
-												<a href="{{.Link}}">{{svg "octicon-repo-forked" 16 "tw-mr-2"}}{{.FullName}}</a>
-											</div>
-										{{end}}
-									</div>
-									{{if $.CanSignedUserFork}}
-									<div class="divider"></div>
-									<a href="{{$.RepoLink}}/fork">{{ctx.Locale.Tr "repo.fork_to_different_account"}}</a>
-									{{end}}
-								</div>
-							</div>
 							<a class="ui basic label" href="{{.Link}}/forks">
 								{{CountFmt .NumForks}}
 							</a>
 						</div>
+						<div class="ui small modal" id="fork-repo-modal">
+							<div class="header">
+								{{ctx.Locale.Tr "repo.already_forked" .Name}}
+							</div>
+							<div class="content tw-text-left">
+								<div class="ui list">
+									{{range $.UserAndOrgForks}}
+										<div class="ui item tw-py-2">
+											<a href="{{.Link}}">{{svg "octicon-repo-forked" 16 "tw-mr-2"}}{{.FullName}}</a>
+										</div>
+									{{end}}
+								</div>
+								{{if $.CanSignedUserFork}}
+								<div class="divider"></div>
+								<a href="{{$.RepoLink}}/fork">{{ctx.Locale.Tr "repo.fork_to_different_account"}}</a>
+								{{end}}
+							</div>
+						</div>
 					{{end}}
 				</div>
 			{{end}}

diff --git 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}}
 		<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}} aria-label="{{$buttonText}}">
 			{{if $.IsStaringRepo}}{{svg "octicon-star-fill"}}{{else}}{{svg "octicon-star"}}{{end}}
-			<span class="not-mobile" aria-hidden="true">{{$buttonText}}</span>
+			<span aria-hidden="true">{{$buttonText}}</span>
 		</button>
 		<a hx-boost="false" class="ui basic label" href="{{$.RepoLink}}/stars">
 			{{CountFmt .Repository.NumStars}}

diff --git 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}}
 		<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}} aria-label="{{$buttonText}}">
 			{{svg "octicon-eye"}}
-			<span class="not-mobile" aria-hidden="true">{{$buttonText}}</span>
+			<span aria-hidden="true">{{$buttonText}}</span>
 		</button>
 		<a hx-boost="false" class="ui basic label" href="{{.RepoLink}}/watchers">
 			{{CountFmt .Repository.NumWatches}}

diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css
@@ -63,13 +63,23 @@
 }
 .ui.labeled.button > .button {
   margin: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
 }
 .ui.labeled.button > .label {
   display: flex;
   align-items: center;
   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
@@ -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
@@ -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;
+  }
+}