AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 82 Pull requests 20 Projects Releases 1 Wiki Activity

Improve how scaling is done
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful
Details

Browse source 
During code review a much better way was pointed out to do the emoji scaling, by using `em`.

*key uses 2em for emoji, which is smaller than Akkoma has. I now kept the 38px for Akkoma,
but when "zoom" (ie x2, x3, x4, tada) happens, we set to 2em and zoom from there.
This commit is contained in:
ilja space 2024-11-01 14:25:22 +01:00
parent 25681cf5f6
commit 177d96f977
2 changed files with 2 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/status_body/status_body.scss
View file

@ -13,7 +13,6 @@
}
.emoji {
--_still_image-label-scale: 0.5;
/* NOTE: We also use this value hard-coded in src/components/status_content/mfm.scss */
--emoji-size: 38px;
}

29
src/components/status_content/mfm.scss
View file

@ -63,46 +63,24 @@
.mfm-x2 {
--mfm-zoom-size: 200%;
/*
emoji is normally 38px (see src/components/status_body/status_body.scss
we want x2 to be ~100px, so we enlarge (100px/38px) ~= 2.63
*/
.emoji {
--mfm-emoji-zoom-size: 2.63;
}
}
.mfm-x3 {
--mfm-zoom-size: 400%;
/*
emoji is normally 38px (see src/components/status_body/status_body.scss
we want x3 to be ~150px, so we enlarge (150px/38px) ~= 3.95
*/
.emoji {
--mfm-emoji-zoom-size: 3.95;
}
}
.mfm-x4 {
--mfm-zoom-size: 600%;
/*
emoji is normally 38px (see src/components/status_body/status_body.scss
we want x4 to be ~200px, so we enlarge (200px/38px) ~= 5.26
*/
.emoji {
--mfm-emoji-zoom-size: 5.26;
}
}
.mfm-x2,
.mfm-x3,
.mfm-x4,
.mfm-tada {
font-size: var(--mfm-zoom-size);
.emoji {
--nested-emoji-base-size: calc(var(--emoji-size) * var(--mfm-emoji-zoom-size));
height: var(--nested-emoji-base-size);
--emoji-size: 2em;
}
font-size: var(--mfm-zoom-size);
.mfm-x2,
.mfm-x3,
@ -110,9 +88,6 @@
.mfm-tada {
/* only half effective */
font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
.emoji {
height: calc(var(--nested-emoji-base-size) * var(--mfm-emoji-zoom-size) / 2);
}
.mfm-x2,
.mfm-x3,