Tile input sections
This commit is contained in:
parent
fc0b7acc8f
commit
23a5935a7d
2 changed files with 15 additions and 6 deletions
|
|
@ -74,6 +74,12 @@
|
|||
border: 2px solid #ff69b4;
|
||||
}
|
||||
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 190px);
|
||||
gap: 20px
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
{% block head %}
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue