kumi/moner.ooo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: enhance accessibility and UI feedback

Browse source 
Added a noscript alert message for users with JavaScript disabled, informing them about the limitations and manual controls available. Improved UI spacing with an additional margin in the conversion button section. Adjusted CSS padding for better visual alignment. Expanded Webpack safelist to include alert classes for proper styling.
This commit is contained in:
Kumi 2024-08-10 16:43:57 +02:00
parent 77c41c08c2
commit 227d56a2bd
Signed by: kumi
GPG key ID: ECBCC9082395383F
3 changed files with 10 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
index.php
View file

@ -167,7 +167,7 @@ foreach (array_reverse($preferred_currencies) as $currency) {
<input class="input-group-text" id="basic-addon-xmr" type="text" value="XMR" aria-label="Monero" disabled>
</div>
<div class="equals-box">
<div class="equals-box mb-3">
<button id="convertXMRToFiat" type="submit" name="direction" value="0" class="btn btn-arrow">
<span class="equals-text">&darr;</span>
</button>
@ -194,6 +194,13 @@ foreach (array_reverse($preferred_currencies) as $currency) {
</div>
</form>
<noscript>
<div class="alert alert-warning" role="alert">
<p>Looks like you have JavaScript disabled. You can still use this tool, but you won't be able to use the &#128203; buttons to automatically copy the results to your clipboard.</p>
<p>Use the &darr; button to convert XMR to fiat, or the &uarr; button to convert fiat to XMR.</p>
</div>
</noscript>
<hr class="gold" />
<small class="cursor-default text-white text-info" lang="<?php echo $lang_meta; ?>">
<?php echo $info;

1
src/css/custom.css
View file

@ -51,6 +51,7 @@ input.form-control {
color: #e9ecef;
font-weight: 800;
font-size: 42px;
padding-bottom: 1;
}
.btn-arrow {

2
webpack.config.js
View file

@ -31,7 +31,7 @@ module.exports = {
paths: glob.sync([
path.join(__dirname, 'index.php')
]),
safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow', 'btn-equals', 'btn-arrow']
safelist: ['tooltip', 'fade', 'show', 'bs-tooltip-top', 'tooltip-inner', 'tooltip-arrow', 'btn-equals', 'btn-arrow', 'alert', 'alert-warning']
})
]
};