mirror of
https://github.com/go-gitea/gitea.git
synced 2025-04-26 12:42:09 +02:00
Fix various trivial frontend problems (#34263)
1. Fix #20606 2. Fix #34246 3. Fix missing spaces, fix misspells, no visual change. 4. Fix missing "not-mobile", fix #34265 --------- Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
parent
58d2a87c6c
commit
e625250ffc
@ -35,7 +35,7 @@ func AvatarHTML(src string, size int, class, name string) template.HTML {
|
||||
}
|
||||
|
||||
// use empty alt, otherwise if the image fails to load, the width will follow the "alt" text's width
|
||||
return template.HTML(`<img loading="lazy" alt="" class="` + class + `" src="` + src + `" title="` + html.EscapeString(name) + `" width="` + sizeStr + `" height="` + sizeStr + `"/>`)
|
||||
return template.HTML(`<img loading="lazy" alt class="` + class + `" src="` + src + `" title="` + html.EscapeString(name) + `" width="` + sizeStr + `" height="` + sizeStr + `"/>`)
|
||||
}
|
||||
|
||||
// Avatar renders user avatars. args: user, size (int), class (string)
|
||||
|
@ -351,5 +351,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="tw-hidden" src="{{AssetUrlPrefix}}/img/loading.png">
|
||||
{{template "base/footer" .}}
|
||||
|
@ -2,7 +2,7 @@
|
||||
<div role="main" aria-label="{{.Title}}" class="page-content install post-install tw-h-full">
|
||||
<div class="home tw-text-center tw-h-full tw-flex tw-flex-col tw-justify-center"><!-- the "home" class makes the links green -->
|
||||
<!-- the "cup" has a handler, so move it a little leftward to make it visually in the center -->
|
||||
<div class="tw-ml-[-30px]"><img width="160" src="{{AssetUrlPrefix}}/img/loading.png" alt="" aria-hidden="true"></div>
|
||||
<div class="tw-ml-[-30px]"><img width="160" src="{{AssetUrlPrefix}}/img/loading.png" alt aria-hidden="true"></div>
|
||||
<div class="tw-my-[2em] tw-text-[18px]">
|
||||
<a id="goto-user-login" href="{{AppSubUrl}}/user/login">{{ctx.Locale.Tr "install.installing_desc"}}</a>
|
||||
</div>
|
||||
|
@ -22,7 +22,7 @@
|
||||
{{if .blobBase}}
|
||||
<span class="side">
|
||||
<p class="side-header">{{ctx.Locale.Tr "repo.diff.file_before"}}</p>
|
||||
<span class="before-container"><img class="image-before"></span>
|
||||
<span class="before-container"><img alt class="image-before"></span>
|
||||
<p>
|
||||
<span class="bounds-info-before">
|
||||
{{ctx.Locale.Tr "repo.diff.file_image_width"}}: <span class="text bounds-info-width"></span>
|
||||
@ -37,7 +37,7 @@
|
||||
{{if .blobHead}}
|
||||
<span class="side">
|
||||
<p class="side-header">{{ctx.Locale.Tr "repo.diff.file_after"}}</p>
|
||||
<span class="after-container"><img class="image-after"></span>
|
||||
<span class="after-container"><img alt class="image-after"></span>
|
||||
<p>
|
||||
<span class="bounds-info-after">
|
||||
{{ctx.Locale.Tr "repo.diff.file_image_width"}}: <span class="text bounds-info-width"></span>
|
||||
@ -55,9 +55,9 @@
|
||||
<div class="ui bottom attached tab image-diff-container" data-tab="diff-swipe-{{.file.NameHash}}">
|
||||
<div class="diff-swipe">
|
||||
<div class="swipe-frame">
|
||||
<span class="before-container"><img class="image-before"></span>
|
||||
<span class="before-container"><img alt class="image-before"></span>
|
||||
<span class="swipe-container">
|
||||
<span class="after-container"><img class="image-after"></span>
|
||||
<span class="after-container"><img alt class="image-after"></span>
|
||||
</span>
|
||||
<span class="swipe-bar">
|
||||
<span class="handle top-handle"></span>
|
||||
@ -70,8 +70,8 @@
|
||||
<div class="diff-overlay">
|
||||
<input type="range" min="0" max="100" value="50">
|
||||
<div class="overlay-frame">
|
||||
<span class="before-container"><img class="image-before"></span>
|
||||
<span class="after-container"><img class="image-after"></span>
|
||||
<span class="before-container"><img alt class="image-before"></span>
|
||||
<span class="after-container"><img alt class="image-after"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,6 +1,6 @@
|
||||
{{$avatarLink := (.RelAvatarLink ctx)}}
|
||||
{{if $avatarLink}}
|
||||
<img class="ui avatar tw-align-middle" src="{{$avatarLink}}" width="24" height="24" alt="" aria-hidden="true">
|
||||
<img class="ui avatar tw-align-middle" src="{{$avatarLink}}" width="24" height="24" alt aria-hidden="true">
|
||||
{{else if $.IsMirror}}
|
||||
{{svg "octicon-mirror" 24}}
|
||||
{{else if $.IsFork}}
|
||||
|
@ -50,7 +50,7 @@
|
||||
<div class="field">
|
||||
<label for="color">{{ctx.Locale.Tr "repo.issues.label_color"}}</label>
|
||||
<div class="column js-color-picker-input">
|
||||
<input name="color" value="#70c24a"placeholder="#c320f6" required maxlength="7">
|
||||
<input name="color" value="#70c24a" placeholder="#c320f6" required maxlength="7">
|
||||
{{template "repo/issue/label_precolors"}}
|
||||
</div>
|
||||
</div>
|
||||
|
@ -28,8 +28,8 @@
|
||||
{{end}}
|
||||
<div class="tw-flex tw-flex-col tw-gap-2">
|
||||
<progress class="milestone-progress-big" value="{{.Milestone.Completeness}}" max="100"></progress>
|
||||
<div class="tw-flex tw-gap-4">
|
||||
<div classs="tw-flex tw-items-center">
|
||||
<div class="flex-text-block tw-gap-4">
|
||||
<div class="flex-text-inline">
|
||||
{{$closedDate:= DateUtils.TimeSince .Milestone.ClosedDateUnix}}
|
||||
{{if .IsClosed}}
|
||||
{{svg "octicon-clock"}} {{ctx.Locale.Tr "repo.milestones.closed" $closedDate}}
|
||||
@ -46,7 +46,7 @@
|
||||
{{end}}
|
||||
{{end}}
|
||||
</div>
|
||||
<div class="tw-mr-2">{{ctx.Locale.Tr "repo.milestones.completeness" .Milestone.Completeness}}</div>
|
||||
<div>{{ctx.Locale.Tr "repo.milestones.completeness" .Milestone.Completeness}}</div>
|
||||
{{if .TotalTrackedTime}}
|
||||
<div data-tooltip-content='{{ctx.Locale.Tr "tracked_time_summary"}}'>
|
||||
{{svg "octicon-clock"}}
|
||||
|
@ -615,7 +615,7 @@
|
||||
<div class="timeline-item-group">
|
||||
<div class="timeline-item event" id="{{.HashTag}}">
|
||||
<a class="timeline-avatar"{{if gt .Poster.ID 0}} href="{{.Poster.HomeLink}}"{{end}}>
|
||||
<img src="{{.Poster.AvatarLink ctx}}" width="40" height="40">
|
||||
<img alt src="{{.Poster.AvatarLink ctx}}" width="40" height="40">
|
||||
</a>
|
||||
<span class="badge grey">{{svg "octicon-x" 16}}</span>
|
||||
<span class="text grey muted-links">
|
||||
|
@ -9,12 +9,12 @@
|
||||
<div class="ui stackable middle very relaxed page grid">
|
||||
<div id="repo_migrating" class="sixteen wide tw-text-center centered column" data-migrating-repo-link="{{.Link}}">
|
||||
<div>
|
||||
<img src="{{AssetUrlPrefix}}/img/loading.png">
|
||||
<img alt src="{{AssetUrlPrefix}}/img/loading.png">
|
||||
</div>
|
||||
</div>
|
||||
<div id="repo_migrating_failed_image" class="sixteen wide tw-text-center centered column tw-hidden">
|
||||
<div>
|
||||
<img src="{{AssetUrlPrefix}}/img/failed.png">
|
||||
<img alt src="{{AssetUrlPrefix}}/img/failed.png">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -21,7 +21,7 @@
|
||||
{{else if not .IsTextFile}}
|
||||
<div class="view-raw">
|
||||
{{if .IsImageFile}}
|
||||
<img src="{{$.RawFileLink}}">
|
||||
<img alt="{{$.RawFileLink}}" src="{{$.RawFileLink}}">
|
||||
{{else if .IsVideoFile}}
|
||||
<video controls src="{{$.RawFileLink}}">
|
||||
<strong>{{ctx.Locale.Tr "repo.video_not_supported_in_browser"}}</strong>
|
||||
|
@ -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}}">
|
||||
{{svg (Iif $.IsStaringRepo "octicon-star-fill" "octicon-star")}}
|
||||
<span aria-hidden="true">{{$buttonText}}</span>
|
||||
<span class="not-mobile" aria-hidden="true">{{$buttonText}}</span>
|
||||
</button>
|
||||
<a hx-boost="false" class="ui basic label" href="{{$.RepoLink}}/stars">
|
||||
{{CountFmt .Repository.NumStars}}
|
||||
|
@ -98,7 +98,7 @@
|
||||
{{else if not .IsTextSource}}
|
||||
<div class="view-raw">
|
||||
{{if .IsImageFile}}
|
||||
<img src="{{$.RawFileLink}}">
|
||||
<img alt="{{$.RawFileLink}}" src="{{$.RawFileLink}}">
|
||||
{{else if .IsVideoFile}}
|
||||
<video controls src="{{$.RawFileLink}}">
|
||||
<strong>{{ctx.Locale.Tr "repo.video_not_supported_in_browser"}}</strong>
|
||||
|
@ -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 aria-hidden="true">{{$buttonText}}</span>
|
||||
<span class="not-mobile" aria-hidden="true">{{$buttonText}}</span>
|
||||
</button>
|
||||
<a hx-boost="false" class="ui basic label" href="{{.RepoLink}}/watchers">
|
||||
{{CountFmt .Repository.NumWatches}}
|
||||
|
@ -5,23 +5,23 @@
|
||||
{{if eq .HookType "gitea"}}
|
||||
{{svg "gitea-gitea" $size "img"}}
|
||||
{{else if eq .HookType "gogs"}}
|
||||
<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/gogs.ico">
|
||||
<img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/gogs.ico">
|
||||
{{else if eq .HookType "slack"}}
|
||||
<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/slack.png">
|
||||
<img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/slack.png">
|
||||
{{else if eq .HookType "discord"}}
|
||||
<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/discord.png">
|
||||
<img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/discord.png">
|
||||
{{else if eq .HookType "dingtalk"}}
|
||||
<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/dingtalk.ico">
|
||||
<img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/dingtalk.ico">
|
||||
{{else if eq .HookType "telegram"}}
|
||||
<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/telegram.png">
|
||||
<img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/telegram.png">
|
||||
{{else if eq .HookType "msteams"}}
|
||||
<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/msteams.png">
|
||||
<img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/msteams.png">
|
||||
{{else if eq .HookType "feishu"}}
|
||||
{{svg "gitea-feishu" $size "img"}}
|
||||
{{else if eq .HookType "matrix"}}
|
||||
{{svg "gitea-matrix" $size "img"}}
|
||||
{{else if eq .HookType "wechatwork"}}
|
||||
<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/wechatwork.png">
|
||||
<img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/wechatwork.png">
|
||||
{{else if eq .HookType "packagist"}}
|
||||
<img width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/packagist.png">
|
||||
<img alt width="{{$size}}" height="{{$size}}" src="{{AssetUrlPrefix}}/img/packagist.png">
|
||||
{{end}}
|
||||
|
@ -91,7 +91,7 @@
|
||||
{{range $push.Commits}}
|
||||
{{$commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
|
||||
<div class="flex-text-block">
|
||||
<img class="ui avatar" src="{{$push.AvatarLink ctx .AuthorEmail}}" title="{{.AuthorName}}" width="16" height="16">
|
||||
<img alt class="ui avatar" src="{{$push.AvatarLink ctx .AuthorEmail}}" title="{{.AuthorName}}" width="16" height="16">
|
||||
<a class="ui sha label" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
|
||||
<span class="text truncate">
|
||||
{{ctx.RenderUtils.RenderCommitMessage .Message ($repo.ComposeCommentMetas ctx)}}
|
||||
|
@ -2,7 +2,10 @@
|
||||
/* fonts */
|
||||
--fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial;
|
||||
--fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);
|
||||
--fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
|
||||
/* GitHub explicitly sets font names like: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla";
|
||||
Actually "Twemoji Mozilla" emoji font is widely used by browsers like Firefox, Pale Moon, and it is more likely up-to-dated than the system emoji font.
|
||||
So not setting emoji font seems to be the best choice, here we just use a non-existing dummy font name and let browsers choose. */
|
||||
--fonts-emoji: -emoji-fallback;
|
||||
/* font weights - use between 400 and 600 for general purposes. Avoid 700 as it is perceived too bold */
|
||||
--font-weight-light: 300;
|
||||
--font-weight-normal: 400;
|
||||
|
@ -138,7 +138,7 @@ function initDropdownUserRemoteSearch(el: Element) {
|
||||
// the content is provided by backend IssuePosters handler
|
||||
processedResults.length = 0;
|
||||
for (const item of resp.results) {
|
||||
let html = `<img class="ui avatar tw-align-middle" src="${htmlEscape(item.avatar_link)}" aria-hidden="true" alt="" width="20" height="20"><span class="gt-ellipsis">${htmlEscape(item.username)}</span>`;
|
||||
let html = `<img class="ui avatar tw-align-middle" src="${htmlEscape(item.avatar_link)}" aria-hidden="true" alt width="20" height="20"><span class="gt-ellipsis">${htmlEscape(item.username)}</span>`;
|
||||
if (item.full_name) html += `<span class="search-fullname tw-ml-2">${htmlEscape(item.full_name)}</span>`;
|
||||
if (selectedUsername.toLowerCase() === item.username.toLowerCase()) selectedUsername = item.username;
|
||||
processedResults.push({value: item.username, name: html});
|
||||
|
@ -34,7 +34,7 @@ export async function attachTribute(element: HTMLElement) {
|
||||
menuItemTemplate: (item: TributeItem) => {
|
||||
return `
|
||||
<div class="tribute-item">
|
||||
<img src="${htmlEscape(item.original.avatar)}" width="21" height="21"/>
|
||||
<img alt src="${htmlEscape(item.original.avatar)}" width="21" height="21"/>
|
||||
<span class="name">${htmlEscape(item.original.name)}</span>
|
||||
${item.original.fullname && item.original.fullname !== '' ? `<span class="fullname">${htmlEscape(item.original.fullname)}</span>` : ''}
|
||||
</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user