55 lines
No EOL
1.2 KiB
Text
55 lines
No EOL
1.2 KiB
Text
---
|
|
title: Form
|
|
tags:
|
|
- ui
|
|
---
|
|
{% extends "hippie/_app_frame.njk" %}
|
|
|
|
{% block body %}
|
|
{{ io.frameHeader('title-bar') }}
|
|
<header class="io">
|
|
<h1>Formulare</h1>
|
|
<button data-action="add">Hinzufügen</button>
|
|
<button data-action="change">Ändern</button>
|
|
<hr>
|
|
</header>
|
|
<form id="form" action="">
|
|
<div id="grid">
|
|
<div>a</div>
|
|
<div>b</div>
|
|
<div>c</div>
|
|
</div>
|
|
</form>
|
|
{% endblock %}
|
|
|
|
{%- block script %}
|
|
{{ super() }}
|
|
<script>
|
|
const add = document.querySelector('[data-action=add]');
|
|
const change = document.querySelector('[data-action=change]');
|
|
const grid = document.getElementById('grid');
|
|
|
|
add.addEventListener('click', (e) => {
|
|
const item = document.createElement('div');
|
|
|
|
item.style.backgroundColor = '#f0f';
|
|
item.textContent = 'c'
|
|
|
|
grid.appendChild(item);
|
|
});
|
|
|
|
change.addEventListener('click', (e) => {
|
|
changeLayout(grid);
|
|
});
|
|
|
|
function changeLayout(grid) {
|
|
const currentTemplate = grid.style.gridTemplateColumns;
|
|
|
|
if (currentTemplate === 'repeat(4, 1fr)') {
|
|
grid.style.gridTemplateColumns = 'repeat(2, 1fr)';
|
|
} else {
|
|
grid.style.gridTemplateColumns = 'repeat(4, 1fr)';
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |