cotugno/gitea
2
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2024-11-15 09:58:28 -07:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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

<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">
This commit is contained in:
silverwind 2024-04-24 05:34:25 +02:00 committed by GitHub
parent 2be724c85d
commit ad34d22113
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 37 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
templates/repo/header.tmpl
View File

@ -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}}

2
templates/repo/star_unstar.tmpl
View File

@ -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}}

2
templates/repo/watch_unwatch.tmpl
View File

@ -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}}

7
web_src/css/modules/button.css
View File

@ -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,

2
web_src/css/modules/label.css
View File

@ -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);
}

14
web_src/css/repo/header.css
View File

@ -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;
}
}