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 <lauris@nix.lv>tags/v1.18.0-rc0
@@ -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 != "" { |
@@ -5,7 +5,7 @@ | |||
{{end}} | |||
<div class="item brand" style="justify-content: space-between;"> | |||
<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}"> | |||
<img class="ui mini image" width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true"> | |||
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true"> | |||
</a> | |||
{{if .IsSigned}} | |||
<a href="{{AppSubUrl}}/notifications" class="tooltip mobile-only" data-content='{{.locale.Tr "notifications"}}'> |
@@ -11,9 +11,9 @@ | |||
{{if not (containGeneric $.Content .UUID)}} | |||
{{$hasThumbnails = true}} | |||
{{end}} | |||
<span class="ui image">{{svg "octicon-file"}}</span> | |||
{{svg "octicon-file"}} | |||
{{else}} | |||
<span class="ui image">{{svg "octicon-desktop-download"}}</span> | |||
{{svg "octicon-desktop-download"}} | |||
{{end}} | |||
<span><strong>{{.Name}}</strong></span> | |||
</a> | |||
@@ -26,12 +26,12 @@ | |||
{{if $hasThumbnails}} | |||
<div class="ui clearing divider"></div> | |||
<div class="ui small images thumbnails"> | |||
<div class="ui small thumbnails"> | |||
{{- range .Attachments -}} | |||
{{if FilenameIsImage .Name}} | |||
{{if not (containGeneric $.Content .UUID)}} | |||
<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}"> | |||
<img class="ui image" src="{{.DownloadURL}}" title='{{$.ctx.locale.Tr "repo.issues.attachment.open_tab" .Name}}'> | |||
<img src="{{.DownloadURL}}" title='{{$.ctx.locale.Tr "repo.issues.attachment.open_tab" .Name}}'> | |||
</a> | |||
{{end}} | |||
{{end}} |
@@ -168,7 +168,7 @@ | |||
</span> | |||
</span> | |||
<a target="_blank" rel="noopener noreferrer" href="{{.DownloadURL}}"> | |||
<strong><span class="ui image" title='{{.Name}}'>{{svg "octicon-package" 16 "mr-2"}}</span>{{.Name}}</strong> | |||
<strong>{{svg "octicon-package" 16 "mr-2"}}{{.Name}}</strong> | |||
</a> | |||
</li> | |||
{{end}} |
@@ -94,14 +94,14 @@ | |||
{{$userIDs := .AllowlistUserIDs}} | |||
{{range $.Users}} | |||
{{if contain $userIDs .ID}} | |||
<a class="ui basic image label" href="{{.HomeLink}}">{{avatar . 26}} {{.GetDisplayName}}</a> | |||
<a class="ui basic label" href="{{.HomeLink}}">{{avatar . 26}} {{.GetDisplayName}}</a> | |||
{{end}} | |||
{{end}} | |||
{{if $.Owner.IsOrganization}} | |||
{{$teamIDs := .AllowlistTeamIDs}} | |||
{{range $.Teams}} | |||
{{if contain $teamIDs .ID}} | |||
<a class="ui basic image label" href="{{$.Owner.OrganisationLink}}/teams/{{PathEscape .LowerName}}">{{.Name}}</a> | |||
<a class="ui basic label" href="{{$.Owner.OrganisationLink}}/teams/{{PathEscape .LowerName}}">{{.Name}}</a> | |||
{{end}} | |||
{{end}} | |||
{{end}} |
@@ -2,7 +2,7 @@ | |||
<div class="page-content ui container center full-screen-width {{if .IsRepo}}repository{{end}}"> | |||
{{if .IsRepo}}{{template "repo/header" .}}{{end}} | |||
<div class="ui container center"> | |||
<p style="margin-top: 100px"><img class="ui centered image" src="{{AssetUrlPrefix}}/img/404.png" alt="404"/></p> | |||
<p style="margin-top: 100px"><img src="{{AssetUrlPrefix}}/img/404.png" alt="404"/></p> | |||
<div class="ui divider"></div> | |||
<br> | |||
<p>{{.locale.Tr "error404" | Safe}} |
@@ -1,6 +1,6 @@ | |||
{{template "base/head" .}} | |||
<div class="page-content ui container full-screen-width center"> | |||
<p style="margin-top: 100px"><img class="ui centered image" src="{{AssetUrlPrefix}}/img/500.png" alt="500"/></p> | |||
<p style="margin-top: 100px"><img src="{{AssetUrlPrefix}}/img/500.png" alt="500"/></p> | |||
<div class="ui divider"></div> | |||
<br> | |||
{{if .ErrorMsg}} |
@@ -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); |
@@ -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'), | |||
], | |||
}); | |||
} |
@@ -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 | |||
*******************************/ |
@@ -35,7 +35,6 @@ | |||
"grid", | |||
"header", | |||
"icon", | |||
"image", | |||
"input", | |||
"item", | |||
"label", |
@@ -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; |
@@ -75,7 +75,7 @@ | |||
padding-top: 25px; | |||
} | |||
.ui.avatar.image { | |||
img.ui.avatar { | |||
width: 40px; | |||
height: 40px; | |||
} |
@@ -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; | |||
} |
@@ -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 { |
@@ -134,7 +134,7 @@ | |||
padding-bottom: 1px; | |||
} | |||
.author .ui.avatar.image { | |||
.author img.ui.avatar { | |||
width: auto; | |||
height: 18px; | |||
max-width: none; |