Increase auth provider icon size on login page (#27122)

Before, 20px:
<img width="474" alt="Screenshot 2023-09-19 at 00 10 05"
src="https://github.com/go-gitea/gitea/assets/115237/4bed4edb-219d-4844-9d3c-0d747033b09f">

After, 28px:
<img width="576" alt="Screenshot 2023-09-19 at 00 20 40"
src="https://github.com/go-gitea/gitea/assets/115237/f482ac09-38ae-4c84-80d9-0bd39b7f9772">


Dropdown in account settings is unchanged at 20px:
<img width="157" alt="Screenshot 2023-09-19 at 00 09 11"
src="https://github.com/go-gitea/gitea/assets/115237/9c998cdf-eeed-4118-9262-664faaa56092">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2023-09-19 23:47:13 +02:00 committed by GitHub
parent fc09c30081
commit 1b1c55f73f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 14 additions and 12 deletions

View file

@ -22,7 +22,7 @@ import (
type Provider interface {
Name() string
DisplayName() string
IconHTML() template.HTML
IconHTML(size int) template.HTML
CustomURLSettings() *CustomURLSettings
}
@ -54,14 +54,16 @@ func (p *AuthSourceProvider) DisplayName() string {
return p.sourceName
}
func (p *AuthSourceProvider) IconHTML() template.HTML {
func (p *AuthSourceProvider) IconHTML(size int) template.HTML {
if p.iconURL != "" {
img := fmt.Sprintf(`<img class="gt-object-contain gt-mr-3" width="20" height="20" src="%s" alt="%s">`,
img := fmt.Sprintf(`<img class="gt-object-contain gt-mr-3" width="%d" height="%d" src="%s" alt="%s">`,
size,
size,
html.EscapeString(p.iconURL), html.EscapeString(p.DisplayName()),
)
return template.HTML(img)
}
return p.GothProvider.IconHTML()
return p.GothProvider.IconHTML(size)
}
// Providers contains the map of registered OAuth2 providers in Gitea (based on goth)

View file

@ -27,7 +27,7 @@ func (b *BaseProvider) DisplayName() string {
}
// IconHTML returns icon HTML for this provider
func (b *BaseProvider) IconHTML() template.HTML {
func (b *BaseProvider) IconHTML(size int) template.HTML {
svgName := "gitea-" + b.name
switch b.name {
case "gplus":
@ -35,10 +35,10 @@ func (b *BaseProvider) IconHTML() template.HTML {
case "github":
svgName = "octicon-mark-github"
}
svgHTML := svg.RenderHTML(svgName, 20, "gt-mr-3")
svgHTML := svg.RenderHTML(svgName, size, "gt-mr-3")
if svgHTML == "" {
log.Error("No SVG icon for oauth2 provider %q", b.name)
svgHTML = svg.RenderHTML("gitea-openid", 20, "gt-mr-3")
svgHTML = svg.RenderHTML("gitea-openid", size, "gt-mr-3")
}
return svgHTML
}

View file

@ -28,8 +28,8 @@ func (o *OpenIDProvider) DisplayName() string {
}
// IconHTML returns icon HTML for this provider
func (o *OpenIDProvider) IconHTML() template.HTML {
return svg.RenderHTML("gitea-openid", 20, "gt-mr-3")
func (o *OpenIDProvider) IconHTML(size int) template.HTML {
return svg.RenderHTML("gitea-openid", size, "gt-mr-3")
}
// CreateGothProvider creates a GothProvider from this Provider

View file

@ -62,7 +62,7 @@
{{range $key := .OrderedOAuth2Names}}
{{$provider := index $.OAuth2Providers $key}}
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
{{$provider.IconHTML}}
{{$provider.IconHTML 28}}
{{$.locale.Tr "sign_in_with_provider" $provider.DisplayName}}
</a>
{{end}}

View file

@ -66,7 +66,7 @@
{{range $key := .OrderedOAuth2Names}}
{{$provider := index $.OAuth2Providers $key}}
<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
{{$provider.IconHTML}}
{{$provider.IconHTML 28}}
{{$.locale.Tr "sign_in_with_provider" $provider.DisplayName}}
</a>
{{end}}

View file

@ -10,7 +10,7 @@
{{range $key := .OrderedOAuth2Names}}
{{$provider := index $.OAuth2Providers $key}}
<a class="item" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
{{$provider.IconHTML}}
{{$provider.IconHTML 20}}
{{$provider.DisplayName}}
</a>
{{end}}