You can add a text-resizing widget.
1) Extend your survey theme.
2) Add something like this to the end of
progress_bar.twig:
Code:
<div class="text-size-container">
<div class="label-container">
<span>Text size</span>
</div>
<div class="button-container">
<div class="input-group">
<button class="btn btn-outline-secondary minus" type="button" id="text-size-minus">-</button>
<button class="btn btn-outline-secondary plus" type="button" id="text-size-plus">+</button>
</div>
</div>
</div>
3) Add something like this to the end of
custom.css:
Code:
.text-size-container {
display: flex;
align-items: center;
justify-content: center;
}
.text-size-container > * {
flex-basis: auto;
}
.text-size-container .label-container {
padding-right: 0.5em;
}
.text-size-container button {
padding: .175rem .75rem;
font-weight: bold;
}
body[data-ls-font-size="100"] .text-size-container button.minus {
opacity: 0.25;
pointer-events: none;
}
body[data-ls-font-size="200"] .text-size-container button.plus {
opacity: 0.25;
pointer-events: none;
}
body[data-ls-font-size="110"] { font-size: 110% }
body[data-ls-font-size="120"] { font-size: 120% }
body[data-ls-font-size="130"] { font-size: 130% }
body[data-ls-font-size="140"] { font-size: 140% }
body[data-ls-font-size="150"] { font-size: 150% }
body[data-ls-font-size="160"] { font-size: 160% }
body[data-ls-font-size="170"] { font-size: 170% }
body[data-ls-font-size="180"] { font-size: 180% }
body[data-ls-font-size="190"] { font-size: 190% }
body[data-ls-font-size="200"] { font-size: 200% }
4) Add this to the end of
custom.js:
Code:
$(document).on('ready pjax:scriptcomplete',function(){
if(localStorage.getItem("lsFontSize") === null) {
localStorage.setItem('lsFontSize', 100);
}
$('body').attr('data-ls-font-size', localStorage.getItem('lsFontSize'));
$('.text-size-container button').on('click', function(e) {
var lsCurrentFontSize = Number(localStorage.getItem('lsFontSize'));
var sizeIncrement = 10;
if($(this).hasClass('minus')) {
sizeIncrement = -10
}
var lsNewFontSize = lsCurrentFontSize+sizeIncrement;
localStorage.setItem('lsFontSize', lsNewFontSize);
$('body').attr('data-ls-font-size', localStorage.getItem('lsFontSize'));
});
});
Topic Author
