Skip to content

Fix various trivial frontend problems #34263

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Apr 24, 2025
Merged

Fix various trivial frontend problems #34263

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7454bb0
fix
wxiaoguang Apr 23, 2025
0629952
Merge branch 'main' into fix-frontend-trivials
wxiaoguang Apr 23, 2025
5e11b87
add missing "not-mobile"
wxiaoguang Apr 23, 2025
388f957
Merge branch 'main' into fix-frontend-trivials
wxiaoguang Apr 23, 2025
0b04bfb
use dummy emoji font name
wxiaoguang Apr 23, 2025
2f5d7f0
Update web_src/css/base.css
wxiaoguang Apr 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion modules/templates/util_avatar.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
1 change: 0 additions & 1 deletion templates/install.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -351,5 +351,4 @@
</div>
</div>
</div>
<img class="tw-hidden" src="{{AssetUrlPrefix}}/img/loading.png">
{{template "base/footer" .}}
2 changes: 1 addition & 1 deletion templates/post-install.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 6 additions & 6 deletions templates/repo/diff/image_diff.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/icon.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}}
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/labels/label_edit_modal.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions templates/repo/issue/milestone_issues.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand All @@ -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"}}
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/view_content/comments.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions templates/repo/migrate/migrating.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/settings/lfs_file.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/star_unstar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/view_file.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/watch_unwatch.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
Expand Down
16 changes: 8 additions & 8 deletions templates/shared/webhook/icon.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}}
2 changes: 1 addition & 1 deletion templates/user/dashboard/feeds.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)}}
Expand Down
3 changes: 2 additions & 1 deletion web_src/css/base.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
/* 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";
/* "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 */
--fonts-emoji: "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
Copy link
Member

@silverwind silverwind Apr 23, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See #34246 (comment). Maybe we should set --fonts-emoji to a empty value, letting the browser choose the right font? Empty so that customization still works with the variable.

Copy link
Member

@silverwind silverwind Apr 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or better yet, just remove --fonts-emoji altogether. Users can still alter the other vars if they want to override emoji fonts.

Copy link
Contributor Author

@wxiaoguang wxiaoguang Apr 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe like this: 0b04bfb. then the var is still kept and won't cause too many changes and the var could still be customized.

Copy link
Member

@silverwind silverwind Apr 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose a dummy won't hurt but I see no real reason to retain the variable either.

Copy link
Contributor Author

@wxiaoguang wxiaoguang Apr 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are 2 reasons in my mind:

  1. There are not only one references to --fonts-emoji, I don't want to introduce too many changes or do more tests.
  2. Keeping the dummy name makes it easier to revert in the future (if anything wrong). We can fully remove the dummy name in future releases if it has been widely tested and there wouldn't be any problem.

/* 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;
Expand Down
2 changes: 1 addition & 1 deletion web_src/js/features/repo-issue-list.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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});
Expand Down
2 changes: 1 addition & 1 deletion web_src/js/features/tribute.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down