From afdab9d8d495590f215f9a2a54d925ed72ad75d0 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 12 Sep 2022 11:08:46 +0200 Subject: [PATCH] Remove fomantic image module (#21145) Remove this small, but unnecessary [module](https://fomantic-ui.com/elements/image.html) and use `img` selector over previous `.image`. Did a few tests, could not notice any visual regression. Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: Lauris BH --- modules/templates/helper.go | 6 +- templates/base/head_navbar.tmpl | 2 +- .../repo/issue/view_content/attachments.tmpl | 8 +- templates/repo/release/list.tmpl | 2 +- templates/repo/settings/tags.tmpl | 4 +- templates/status/404.tmpl | 2 +- templates/status/500.tmpl | 2 +- tests/e2e/example.test.e2e.js | 2 +- tests/e2e/utils_e2e.js | 4 +- web_src/fomantic/build/semantic.css | 342 ------------------ web_src/fomantic/semantic.json | 1 - web_src/less/_base.less | 15 +- web_src/less/_explore.less | 2 +- web_src/less/_repository.less | 14 +- web_src/less/_review.less | 6 +- web_src/less/features/gitgraph.less | 2 +- 16 files changed, 32 insertions(+), 382 deletions(-) diff --git a/modules/templates/helper.go b/modules/templates/helper.go index 48b62403a0..fd7018a39d 100644 --- a/modules/templates/helper.go +++ b/modules/templates/helper.go @@ -631,7 +631,7 @@ func SVG(icon string, others ...interface{}) template.HTML { // Avatar renders user avatars. args: user, size (int), class (string) func Avatar(item interface{}, others ...interface{}) template.HTML { - size, class := parseOthers(avatars.DefaultAvatarPixelSize, "ui avatar image vm", others...) + size, class := parseOthers(avatars.DefaultAvatarPixelSize, "ui avatar vm", others...) switch t := item.(type) { case *user_model.User: @@ -662,7 +662,7 @@ func AvatarByAction(action *activities_model.Action, others ...interface{}) temp // RepoAvatar renders repo avatars. args: repo, size(int), class (string) func RepoAvatar(repo *repo_model.Repository, others ...interface{}) template.HTML { - size, class := parseOthers(avatars.DefaultAvatarPixelSize, "ui avatar image", others...) + size, class := parseOthers(avatars.DefaultAvatarPixelSize, "ui avatar", others...) src := repo.RelAvatarLink() if src != "" { @@ -673,7 +673,7 @@ func RepoAvatar(repo *repo_model.Repository, others ...interface{}) template.HTM // AvatarByEmail renders avatars by email address. args: email, name, size (int), class (string) func AvatarByEmail(email, name string, others ...interface{}) template.HTML { - size, class := parseOthers(avatars.DefaultAvatarPixelSize, "ui avatar image", others...) + size, class := parseOthers(avatars.DefaultAvatarPixelSize, "ui avatar", others...) src := avatars.GenerateEmailAvatarFastLink(email, size*setting.Avatar.RenderedSizeFactor) if src != "" { diff --git a/templates/base/head_navbar.tmpl b/templates/base/head_navbar.tmpl index 459beb5515..8cd3b0a4ae 100644 --- a/templates/base/head_navbar.tmpl +++ b/templates/base/head_navbar.tmpl @@ -5,7 +5,7 @@ {{end}}
- + {{if .IsSigned}} diff --git a/templates/repo/issue/view_content/attachments.tmpl b/templates/repo/issue/view_content/attachments.tmpl index 150779531d..86696ec62b 100644 --- a/templates/repo/issue/view_content/attachments.tmpl +++ b/templates/repo/issue/view_content/attachments.tmpl @@ -11,9 +11,9 @@ {{if not (containGeneric $.Content .UUID)}} {{$hasThumbnails = true}} {{end}} - {{svg "octicon-file"}} + {{svg "octicon-file"}} {{else}} - {{svg "octicon-desktop-download"}} + {{svg "octicon-desktop-download"}} {{end}} {{.Name}} @@ -26,12 +26,12 @@ {{if $hasThumbnails}}
-
+
{{- range .Attachments -}} {{if FilenameIsImage .Name}} {{if not (containGeneric $.Content .UUID)}} - + {{end}} {{end}} diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl index 1f04743eaf..d87d51f26c 100644 --- a/templates/repo/release/list.tmpl +++ b/templates/repo/release/list.tmpl @@ -168,7 +168,7 @@ - {{svg "octicon-package" 16 "mr-2"}}{{.Name}} + {{svg "octicon-package" 16 "mr-2"}}{{.Name}} {{end}} diff --git a/templates/repo/settings/tags.tmpl b/templates/repo/settings/tags.tmpl index 1c7e915c66..56ce278e58 100644 --- a/templates/repo/settings/tags.tmpl +++ b/templates/repo/settings/tags.tmpl @@ -94,14 +94,14 @@ {{$userIDs := .AllowlistUserIDs}} {{range $.Users}} {{if contain $userIDs .ID}} - {{avatar . 26}} {{.GetDisplayName}} + {{avatar . 26}} {{.GetDisplayName}} {{end}} {{end}} {{if $.Owner.IsOrganization}} {{$teamIDs := .AllowlistTeamIDs}} {{range $.Teams}} {{if contain $teamIDs .ID}} - {{.Name}} + {{.Name}} {{end}} {{end}} {{end}} diff --git a/templates/status/404.tmpl b/templates/status/404.tmpl index 571124016b..8dd4cfb8ae 100644 --- a/templates/status/404.tmpl +++ b/templates/status/404.tmpl @@ -2,7 +2,7 @@
{{if .IsRepo}}{{template "repo/header" .}}{{end}}
-

404

+

404


{{.locale.Tr "error404" | Safe}} diff --git a/templates/status/500.tmpl b/templates/status/500.tmpl index 4aaf8f50f0..cdedd947a0 100644 --- a/templates/status/500.tmpl +++ b/templates/status/500.tmpl @@ -1,6 +1,6 @@ {{template "base/head" .}}

-

500

+

500


{{if .ErrorMsg}} diff --git a/tests/e2e/example.test.e2e.js b/tests/e2e/example.test.e2e.js index bd19ceb8fc..b0aa2b7a65 100644 --- a/tests/e2e/example.test.e2e.js +++ b/tests/e2e/example.test.e2e.js @@ -23,7 +23,7 @@ test('Test Register Form', async ({page}, workerInfo) => { await page.click('form button.ui.green.button:visible'); // Make sure we routed to the home page. Else login failed. await expect(page.url()).toBe(`${workerInfo.project.use.baseURL}/`); - await expect(page.locator('.dashboard-navbar span>img.ui.avatar.image')).toBeVisible(); + await expect(page.locator('.dashboard-navbar span>img.ui.avatar')).toBeVisible(); await expect(page.locator('.ui.positive.message.flash-success')).toHaveText('Account was successfully created.'); save_visual(page); diff --git a/tests/e2e/utils_e2e.js b/tests/e2e/utils_e2e.js index b5b9ce2751..50806f851f 100644 --- a/tests/e2e/utils_e2e.js +++ b/tests/e2e/utils_e2e.js @@ -52,8 +52,8 @@ export async function save_visual(page) { fullPage: true, timeout: 20000, mask: [ - page.locator('.dashboard-navbar span>img.ui.avatar.image'), - page.locator('.ui.dropdown.jump.item.tooltip span>img.ui.avatar.image'), + page.locator('.dashboard-navbar span>img.ui.avatar'), + page.locator('.ui.dropdown.jump.item.tooltip span>img.ui.avatar'), ], }); } diff --git a/web_src/fomantic/build/semantic.css b/web_src/fomantic/build/semantic.css index 6ea20c3a8c..dd6637981b 100644 --- a/web_src/fomantic/build/semantic.css +++ b/web_src/fomantic/build/semantic.css @@ -24344,348 +24344,6 @@ i.icon.youtube.play:before { font-family: 'brand-icons'; } -/******************************* - Site Overrides -*******************************/ -/*! - * # Fomantic-UI - Image - * http://github.com/fomantic/Fomantic-UI/ - * - * - * Released under the MIT license - * http://opensource.org/licenses/MIT - * - */ - -/******************************* - Image -*******************************/ - -.ui.image { - position: relative; - display: inline-block; - vertical-align: middle; - max-width: 100%; - background-color: transparent; -} - -img.ui.image { - display: block; -} - -.ui.image svg, -.ui.image img { - display: block; - max-width: 100%; - height: auto; -} - -/******************************* - States -*******************************/ - -.ui.hidden.images, -.ui.ui.hidden.image { - display: none; -} - -.ui.hidden.transition.images, -.ui.hidden.transition.image { - display: block; - visibility: hidden; -} - -.ui.images > .hidden.transition { - display: inline-block; - visibility: hidden; -} - -.ui.disabled.images, -.ui.disabled.image { - cursor: default; - opacity: var(--opacity-disabled); -} - -/******************************* - Variations -*******************************/ - -/*-------------- - Inline - ---------------*/ - -.ui.inline.image, -.ui.inline.image svg, -.ui.inline.image img { - display: inline-block; -} - -/*------------------ - Vertical Aligned - -------------------*/ - -.ui.top.aligned.image, -.ui.top.aligned.image svg, -.ui.top.aligned.image img { - display: inline-block; - vertical-align: top; -} - -.ui.middle.aligned.image, -.ui.middle.aligned.image svg, -.ui.middle.aligned.image img { - display: inline-block; - vertical-align: middle; -} - -.ui.bottom.aligned.image, -.ui.bottom.aligned.image svg, -.ui.bottom.aligned.image img { - display: inline-block; - vertical-align: bottom; -} - -.ui.top.aligned.images .image, -.ui.images .ui.top.aligned.image { - align-self: flex-start; -} - -.ui.middle.aligned.images .image, -.ui.images .ui.middle.aligned.image { - align-self: center; -} - -.ui.bottom.aligned.images .image, -.ui.images .ui.bottom.aligned.image { - align-self: flex-end; -} - -/*-------------- - Rounded - ---------------*/ - -.ui.rounded.images .image, -.ui.rounded.image, -.ui.rounded.images .image > *, -.ui.rounded.image > * { - border-radius: 0.3125em; -} - -/*-------------- - Bordered - ---------------*/ - -.ui.bordered.images .image, -.ui.bordered.images img, -.ui.bordered.images svg, -.ui.bordered.image img, -.ui.bordered.image svg, -img.ui.bordered.image { - border: 1px solid rgba(0, 0, 0, 0.1); -} - -/*-------------- - Circular - ---------------*/ - -.ui.circular.images, -.ui.circular.image { - overflow: hidden; -} - -.ui.circular.images .image, -.ui.circular.image, -.ui.circular.images .image > *, -.ui.circular.image > * { - border-radius: 500rem; -} - -/*-------------- - Fluid - ---------------*/ - -.ui.fluid.images, -.ui.fluid.image, -.ui.fluid.images img, -.ui.fluid.images svg, -.ui.fluid.image svg, -.ui.fluid.image img { - display: block; - width: 100%; - height: auto; -} - -/*-------------- - Avatar - ---------------*/ - -.ui.avatar.images .image, -.ui.avatar.images img, -.ui.avatar.images svg, -.ui.avatar.image img, -.ui.avatar.image svg, -.ui.avatar.image { - margin-right: 0.25em; - display: inline-block; - width: 2em; - height: 2em; - border-radius: 500rem; -} - -/*------------------- - Spaced - --------------------*/ - -.ui.spaced.image { - display: inline-block !important; - margin-left: 0.5em; - margin-right: 0.5em; -} - -.ui[class*="left spaced"].image { - margin-left: 0.5em; - margin-right: 0; -} - -.ui[class*="right spaced"].image { - margin-left: 0; - margin-right: 0.5em; -} - -/*------------------- - Floated - --------------------*/ - -.ui.floated.image, -.ui.floated.images { - float: left; - margin-right: 1em; - margin-bottom: 1em; -} - -.ui.right.floated.images, -.ui.right.floated.image { - float: right; - margin-right: 0; - margin-bottom: 1em; - margin-left: 1em; -} - -.ui.floated.images:last-child, -.ui.floated.image:last-child { - margin-bottom: 0; -} - -.ui.centered.image { - display: block; - margin-left: auto; - margin-right: auto; -} - -.ui.centered.images { - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-items: stretch; - justify-content: center; -} - -/*-------------- - Sizes ----------------*/ - -.ui.medium.images .image, -.ui.medium.images img, -.ui.medium.images svg, -.ui.medium.image { - width: 300px; - height: auto; - font-size: 1rem; -} - -.ui.mini.images .image, -.ui.mini.images img, -.ui.mini.images svg, -.ui.mini.image { - width: 35px; - height: auto; - font-size: 0.78571429rem; -} - -.ui.tiny.images .image, -.ui.tiny.images img, -.ui.tiny.images svg, -.ui.tiny.image { - width: 80px; - height: auto; - font-size: 0.85714286rem; -} - -.ui.small.images .image, -.ui.small.images img, -.ui.small.images svg, -.ui.small.image { - width: 150px; - height: auto; - font-size: 0.92857143rem; -} - -.ui.large.images .image, -.ui.large.images img, -.ui.large.images svg, -.ui.large.image { - width: 450px; - height: auto; - font-size: 1.14285714rem; -} - -.ui.big.images .image, -.ui.big.images img, -.ui.big.images svg, -.ui.big.image { - width: 600px; - height: auto; - font-size: 1.28571429rem; -} - -.ui.huge.images .image, -.ui.huge.images img, -.ui.huge.images svg, -.ui.huge.image { - width: 800px; - height: auto; - font-size: 1.42857143rem; -} - -.ui.massive.images .image, -.ui.massive.images img, -.ui.massive.images svg, -.ui.massive.image { - width: 960px; - height: auto; - font-size: 1.71428571rem; -} - -/******************************* - Groups - *******************************/ - -.ui.images { - font-size: 0; - margin: 0 -0.25rem 0; -} - -.ui.images .image, -.ui.images > img, -.ui.images > svg { - display: inline-block; - margin: 0 0.25rem 0.5rem; -} - -/******************************* - Theme Overrides -*******************************/ - /******************************* Site Overrides *******************************/ diff --git a/web_src/fomantic/semantic.json b/web_src/fomantic/semantic.json index a94adab85c..3c6f3b7435 100644 --- a/web_src/fomantic/semantic.json +++ b/web_src/fomantic/semantic.json @@ -35,7 +35,6 @@ "grid", "header", "icon", - "image", "input", "item", "label", diff --git a/web_src/less/_base.less b/web_src/less/_base.less index bed672a35a..31f71d3c00 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -692,12 +692,9 @@ a.ui.card:hover, border-color: var(--color-secondary); } -.ui.avatar.images .image, -.ui.avatar.images img, -.ui.avatar.images svg, -.ui.avatar.image img, -.ui.avatar.image svg, -.ui.avatar.image, +.ui.avatar img, +.ui.avatar svg, +.ui.avatar.img, .ui.cards > .card img.avatar, .ui.cards > .card .avatar img, .ui.card img.avatar, @@ -758,10 +755,6 @@ a.ui.card:hover, padding-left: 0; } - .brand .ui.mini.image { - width: 30px; - } - .top.menu a.item:hover, .top.menu .dropdown.item:hover, .top.menu .dropdown.item.active { @@ -1686,7 +1679,7 @@ a.ui.label:hover { } } - .ui.avatar.image { + .ui.avatar { height: 18px; width: 18px; display: block; diff --git a/web_src/less/_explore.less b/web_src/less/_explore.less index 3a31fe44d8..b07b33461e 100644 --- a/web_src/less/_explore.less +++ b/web_src/less/_explore.less @@ -75,7 +75,7 @@ padding-top: 25px; } - .ui.avatar.image { + img.ui.avatar { width: 40px; height: 40px; } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index 219597190d..f5be0b34e6 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -846,8 +846,8 @@ display: none; } - .avatar.image, - .avatar.image img { + img.avatar, + .avatar img { width: 20px; height: 20px; margin: 0 .25rem; @@ -908,8 +908,8 @@ line-height: 34px; /* this must be same as .badge height, to avoid overflow */ clear: both; // reset the "float right shabox", in the future, use flexbox instead - > .avatar.image, - > .avatar.image img { + > img.avatar, + > .avatar img { position: relative; top: -2px; } @@ -1125,7 +1125,7 @@ margin-left: 36px; } - .avatar.image { + img.avatar { width: 28px; height: 28px; } @@ -2497,7 +2497,7 @@ #search-user-box { .results { .result { - .image { + img { float: left; margin-right: 8px; width: 2em; @@ -3305,7 +3305,7 @@ td.blob-excerpt { display: flex; margin-bottom: auto; - img.avatar.image { + img.avatar { height: 24px; width: 24px; } diff --git a/web_src/less/_review.less b/web_src/less/_review.less index 2fa8efd67e..e3b88ed928 100644 --- a/web_src/less/_review.less +++ b/web_src/less/_review.less @@ -90,10 +90,10 @@ float: none; margin: 0 .5rem 0 0; flex-shrink: 0; + } - &.image { - margin: 0 !important; - } + img.avatar { + margin: 0 !important; } .comment-content { diff --git a/web_src/less/features/gitgraph.less b/web_src/less/features/gitgraph.less index efb6071e49..f6b1be5ba6 100644 --- a/web_src/less/features/gitgraph.less +++ b/web_src/less/features/gitgraph.less @@ -134,7 +134,7 @@ padding-bottom: 1px; } - .author .ui.avatar.image { + .author img.ui.avatar { width: auto; height: 18px; max-width: none;