Add another "randomize" button on small screens

parent aabb7a8f
......@@ -171,16 +171,19 @@ let randomElement = function(selector) {
return elems[Math.trunc(Math.random() * elems.length)];
}
document.getElementById('randomize').onclick = function(e) {
randomElement('input[name="bg-color"]').checked = true;
do {
randomElement('input[name="fg-color"]').checked = true;
} while (document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value
== document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value);
randomElement('input[name="font"]').checked = true;
randomElement('input[name="icon"]').checked = true;
document.getElementById('step2value').value = document.getElementById('step2value').innerText = sampleTexts[Math.trunc(Math.random() * sampleTexts.length)];
if (document.getElementById('signature').value.match(/(\t$|^$)/))
document.getElementById('signature').value = sampleSignatures[Math.trunc(Math.random() * sampleSignatures.length)];
draw();
let randomButtons = document.querySelectorAll('.randomize');
for (let i = 0; i < randomButtons.length; ++i) {
randomButtons[i].onclick = function(e) {
randomElement('input[name="bg-color"]').checked = true;
do {
randomElement('input[name="fg-color"]').checked = true;
} while (document.querySelector('.colorpicker input[type="radio"][name="bg-color"]:checked').value
== document.querySelector('.colorpicker input[type="radio"][name="fg-color"]:checked').value);
randomElement('input[name="font"]').checked = true;
randomElement('input[name="icon"]').checked = true;
document.getElementById('step2value').value = document.getElementById('step2value').innerText = sampleTexts[Math.trunc(Math.random() * sampleTexts.length)];
if (document.getElementById('signature').value.match(/(\t$|^$)/))
document.getElementById('signature').value = sampleSignatures[Math.trunc(Math.random() * sampleSignatures.length)];
draw();
}
}
......@@ -170,7 +170,7 @@ div#inputs > div:first-child {
border-bottom: 1px solid #dde5f1;
}
div#inputs > div:first-child > button#randomize {
div#inputs > div:first-child > button.randomize {
width: 60%;
}
......@@ -239,7 +239,7 @@ body {
margin-top: 7vw;
}
h2.title-small {
h2.title-small, main .randomize {
display: none;
}
}
......
......@@ -23,7 +23,7 @@
</nav>
<div id="inputs">
<div>
<button id="randomize" class="white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
<button class="randomize white-button">CHOISIR AU HASARD <span class="fa fa-random"></span></button>
</div>
<div id="step1">
<h2 class="title-small">Choisissez 2 couleurs</h2>
......@@ -217,6 +217,7 @@
<main>
<div>
<canvas id="output" width="600" height="413"></canvas>
<a class="randomize white-button"><span class="fa fa-random"></span></a>
<a id="tweet-button" class="blue-button" target="_blank" href="https://twitter.com/intent/tweet?text=Soutenez La Quadrature du Net !">Tweet <span class="fa fa-twitter"></span></a>
<a id="save-image" class="white-button" download="lqdn-slogan.png">Enregistrer <span class="fa fa-save"></span></a>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment