mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-21 16:55:25 +03:00
Code Issues Projects Releases Packages Wiki Activity

Responsive font size based on content length

Browse source 
The shorter, the larger font-size
This commit is contained in:
Lim Chee Aun 2022-12-15 00:41:48 +08:00
parent e5ffdd53cf
commit 58860c334c
3 changed files with 15 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/status.css
View file

@ -191,6 +191,7 @@
}
.status.large .content {
font-size: 150%;
font-size: calc(100% + 50% / var(--content-text-weight));
}
.status.large .poll,
.status.large .actions {

9
src/components/status.jsx
View file

@ -10,6 +10,7 @@ import Loader from '../components/loader';
import Modal from '../components/modal';
import NameText from '../components/name-text';
import enhanceContent from '../utils/enhance-content';
import htmlContentLength from '../utils/html-content-length';
import shortenNumber from '../utils/shorten-number';
import states from '../utils/states';
import store from '../utils/store';
@ -695,6 +696,14 @@ function Status({
class={`content-container ${
sensitive || spoilerText ? 'has-spoiler' : ''
} ${showSpoiler ? 'show-spoiler' : ''}`}
style={
size === 'l' && {
'--content-text-weight':
Math.round(
(spoilerText.length + htmlContentLength(content)) / 140,
) || 1,
}
}
>
{!!spoilerText && sensitive && (
<>

5
src/utils/html-content-length.js Normal file
View file

@ -0,0 +1,5 @@
const div = document.createElement('div');
export default (html) => {
div.innerHTML = html;
return div.innerText.length;
};