Auto-resize coins count

Coins count will still break lines if the value can be fit in multiple lines (for accessibility), but it won't escape it's box and damage page design.
This commit is contained in:
Celestora 2022-03-24 17:03:43 +02:00
parent 1ea6b96c52
commit 13dab88c9e
3 changed files with 19 additions and 7 deletions

View file

@ -347,16 +347,22 @@
<center>{tr("also_you_can_transfer_points", $thisUser->getCoins(), rawurlencode($csrfToken))|noescape}</center> <center>{tr("also_you_can_transfer_points", $thisUser->getCoins(), rawurlencode($csrfToken))|noescape}</center>
</div> </div>
<div style="width: 22%; float: right;"> <div style="width: 22%; float: right;">
<p style="margin: 0; font-size: medium; text-align: center;"> <div style="margin: 0; font-size: medium; text-align: center; font-weight: 900;">
<b> {_on_your_account}
{_on_your_account}<br/> <div style="width: 100%; height: 60px; font-weight: 100;" id="balance">{$thisUser->getCoins()}</div>
<span style="font-size: 50px;">{$thisUser->getCoins()}</span><br/> {_points_count}<br/>
{_points_count}<br/><br/> <small><a href="?act=finance.top-up">[{_have_voucher}?]</a></small>
<small><a href="?act=finance.top-up">[{_have_voucher}?]</a></small>
</b>
</p> </p>
</div> </div>
{script "js/node_modules/textfit/textFit.min.js"}
<script>
let balance = document.querySelector("#balance");
balance.style.width = Math.ceil(balance.parentNode.getBoundingClientRect().width) + "px";
textFit(balance, { alignVert: true });
</script>
{elseif $isFinanceTU} {elseif $isFinanceTU}
<p>{_voucher_explanation} {_voucher_explanation_ex}</p> <p>{_voucher_explanation} {_voucher_explanation_ex}</p>

View file

@ -14,6 +14,7 @@
"react-dom-factories": "^1.0.2", "react-dom-factories": "^1.0.2",
"requirejs": "^2.3.6", "requirejs": "^2.3.6",
"soundjs": "^1.0.1", "soundjs": "^1.0.1",
"textfit": "^2.4.0",
"umbrellajs": "^3.1.0" "umbrellajs": "^3.1.0"
} }
} }

View file

@ -271,6 +271,11 @@ soundjs@^1.0.1:
resolved "https://registry.yarnpkg.com/soundjs/-/soundjs-1.0.1.tgz#99970542d28d0df2a1ebd061ae75c961a98c8180" resolved "https://registry.yarnpkg.com/soundjs/-/soundjs-1.0.1.tgz#99970542d28d0df2a1ebd061ae75c961a98c8180"
integrity sha512-MgFPvmKYfpcNiE3X5XybNvScie3DMQlZgmNzUn4puBcpw64f4LqjH/fhM8Sb/eTJ8hK57Crr7mWy0bfJOqPj6Q== integrity sha512-MgFPvmKYfpcNiE3X5XybNvScie3DMQlZgmNzUn4puBcpw64f4LqjH/fhM8Sb/eTJ8hK57Crr7mWy0bfJOqPj6Q==
textfit@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/textfit/-/textfit-2.4.0.tgz#80cba8006bfb9c3d9d552739257957bdda95c79c"
integrity sha512-/x4aoY5+/tJmu+iwpBH1yw75TFp86M6X15SvaaY/Eep7YySQYtqdOifEtfvVyMwzl7SZ+G4RQw00FD9g5R6i1Q==
trim-extra-html-whitespace@1.3.0: trim-extra-html-whitespace@1.3.0:
version "1.3.0" version "1.3.0"
resolved "https://registry.yarnpkg.com/trim-extra-html-whitespace/-/trim-extra-html-whitespace-1.3.0.tgz#b47efb0d1a5f2a56a85cc45cea525651e93404cf" resolved "https://registry.yarnpkg.com/trim-extra-html-whitespace/-/trim-extra-html-whitespace-1.3.0.tgz#b47efb0d1a5f2a56a85cc45cea525651e93404cf"