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>

modules/templates/util_avatar.go

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

templates/install.tmpl

@@ -351,5 +351,4 @@
 		</div>
 	</div>
 </div>
-<img class="tw-hidden" src="{{AssetUrlPrefix}}/img/loading.png">
 {{template "base/footer" .}}

templates/post-install.tmpl

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

templates/repo/diff/image_diff.tmpl

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

templates/repo/icon.tmpl

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

templates/repo/issue/labels/label_edit_modal.tmpl

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

templates/repo/issue/milestone_issues.tmpl

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

templates/repo/issue/view_content/comments.tmpl

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

templates/repo/migrate/migrating.tmpl

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

templates/repo/settings/lfs_file.tmpl

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

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}}">
 			{{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}}

templates/repo/view_file.tmpl

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

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

templates/shared/webhook/icon.tmpl

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

templates/user/dashboard/feeds.tmpl

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

web_src/css/base.css

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

web_src/js/features/repo-issue-list.ts

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

web_src/js/features/tribute.ts

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