domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

Improve avatar uploading / resizing / compressing, remove Fomantic card module (#24653)

Browse source 
Fixes: #8972
Fixes: #24263

And I think it also (partially) fix #24263 (no need to convert) ,
because users could upload any supported image format if it isn't larger
than AVATAR_MAX_ORIGIN_SIZE


The main idea: 

* if the uploaded file size is not larger than AVATAR_MAX_ORIGIN_SIZE,
use the origin
* if the resized size is larger than the origin, use the origin

Screenshots:

JPG:

<details>


![image](70e98bb0-ecb9-4c4e-a89f-4a37d4e37f8e)

</details>

APNG:

<details>


![image](9055135b-5e2d-4152-bd72-596fcb7c6671)


![image](50364caf-f7f6-4241-a289-e485fe4cd582)

</details>

WebP (animated)

<details>


![image](f642eb85-498a-49a5-86bf-0a7b04089ae0)

</details>

The only exception: if a WebP image is larger than MaxOriginSize and it
is animated, then current `webp` package can't decode it, so only in
this case it isn't supported. IMO no need to support such case: why a
user would upload a 1MB animated webp as avatar? crazy .....

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
wxiaoguang 2023-05-14 02:59:11 +08:00 • committed by GitHub
parent 9f1d377b87
commit 82224c54e0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 304 additions and 1505 deletions
Download patch file Download diff file Expand all files Collapse all files

64
web_src/css/base.css
View file

@ -1046,62 +1046,6 @@ a.label,
box-shadow: -1px -1px 0 0 var(--color-secondary);
}
.ui.cards > .card,
.ui.card {
background: var(--color-card);
border: 1px solid var(--color-secondary);
box-shadow: none;
}
.ui.cards > .card > .content,
.ui.card > .content {
border-color: var(--color-secondary);
}
.ui.cards > .card > .extra,
.ui.card > .extra,
.ui.cards > .card > .extra a:not(.ui),
.ui.card > .extra a:not(.ui) {
color: var(--color-text);
}
.ui.cards > .card > .extra a:not(.ui):hover,
.ui.card > .extra a:not(.ui):hover {
color: var(--color-primary);
}
.ui.cards > .card > .content > .header,
.ui.card > .content > .header {
color: var(--color-text);
}
.ui.cards > .card > .content > .description,
.ui.card > .content > .description {
color: var(--color-text);
}
.ui.cards > .card .meta > a:not(.ui),
.ui.card .meta > a:not(.ui) {
color: var(--color-text-light-2);
}
.ui.cards > .card .meta > a:not(.ui):hover,
.ui.card .meta > a:not(.ui):hover {
color: var(--color-text);
}
.ui.cards a.card:hover,
a.ui.card:hover {
border: 1px solid var(--color-secondary);
background: var(--color-card);
}
.ui.cards > .card > .extra,
.ui.card > .extra {
color: var(--color-text);
border-top-color: var(--color-secondary-light-1) !important;
}
.ui.comments .comment .text {
margin: 0;
}
@ -1183,12 +1127,10 @@ a.ui.card:hover {
img.ui.avatar,
.ui.avatar img,
.ui.avatar svg,
.ui.cards > .card img.avatar,
.ui.cards > .card .avatar img,
.ui.card img.avatar,
.ui.card .avatar img {
.ui.avatar svg {
border-radius: var(--border-radius);
object-fit: contain;
aspect-ratio: 1;
}
.ui.divided.list > .item {