Tile input sections

This commit is contained in:
TT-392 2025-10-31 21:17:11 +01:00
parent fc0b7acc8f
commit 23a5935a7d
2 changed files with 15 additions and 6 deletions

View file

@ -74,6 +74,12 @@
border: 2px solid #ff69b4;
}
.tiles {
display: grid;
grid-template-columns: repeat(auto-fit, 190px);
gap: 20px
}
</style>
{% block head %}

View file

@ -19,8 +19,8 @@
<form method="POST" action="/text-form", id="text_form">
<div id="input"> </div>
<div id="input", class="tiles"> </div>
<div id="plus minus buttons"> </div>
<h2>Font</h2>
<label for="font">Font:</label>
@ -54,14 +54,14 @@
{% endif %}
<script>
const line_form = `<h2>[title]</h2>
const line_form = `<div><h2>[title]</h2>
Text:<br>
<textarea name="[text]">(text)</textarea><br>
Size: <input type="number" value="(size)" name="[size]" min="0" required
style="width: 40px"><br>
Y position: <input type="number" value="(y_pos)" name="[y_pos]" required
style="width: 40px"><br>
Bold: <input type="checkbox" name="[bold]" value="bold" (bold)><br>`
Bold: <input type="checkbox" name="[bold]" value="bold" (bold)></div>`
const min_button = `<button type="button" onClick="remove_line()">-</button>`
const plus_button = `<button type="button" onClick="add_line()">+</button>`
@ -137,13 +137,16 @@
modified_line_form = init_field("bold", false ? "checked" : "", i, modified_line_form);
html += modified_line_form;
}
let buttons = ""
if (lineCnt == 1) {
html += plus_button;
buttons = plus_button;
} else {
html += min_button + plus_button;
buttons += min_button + plus_button;
}
document.getElementById("input").innerHTML = html;
document.getElementById("plus minus buttons").innerHTML = buttons;
}
generate_and_populate_fields()