56 lines
1.2 KiB
Text
56 lines
1.2 KiB
Text
|
---
|
||
|
|
title: Form
|
||
|
|
tags:
|
||
|
|
- ui
|
||
|
|
---
|
||
|
|
{% assign bodyClass = "body_frame" -%}
|
||
|
|
{% layout "hippie/app.liquid" %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
{% render 'hippie/partials/frame-header.liquid' %}
|
||
|
|
<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 %}
|
||
|
|
{{ block.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 %}
|