mirror of
https://github.com/openvk/openvk
synced 2024-11-14 19:19:14 +03:00
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:
parent
1ea6b96c52
commit
13dab88c9e
3 changed files with 19 additions and 7 deletions
|
@ -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>
|
||||||
|
|
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in a new issue