From ad150fadf223db5d2f57e71ad4b6b071d5a614eb Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Wed, 14 May 2025 19:00:13 +0200
Subject: [PATCH] feat: Add form ui example

Test css grid system for form fields.
---
 source/screens/demo/examples/ui/form.njk  | 45 +++++++++++++++++++++++
 source/style/modules/ui/_form_module.scss | 33 +++++++++++++++++
 source/style/ui.scss                      |  3 +-
 3 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 source/screens/demo/examples/ui/form.njk
 create mode 100644 source/style/modules/ui/_form_module.scss

diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
new file mode 100644
index 0000000..60162ce
--- /dev/null
+++ b/source/screens/demo/examples/ui/form.njk
@@ -0,0 +1,45 @@
+---
+title: Form
+tags: 
+  - demoExample
+  - ui
+---
+{% extends "demo/_app.njk" %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block body %}
+	<div id="head">
+		<h1>Formulare</h1>
+		<button data-action="add">Hinzufügen</button>
+	</div>
+	<div id="grid">
+		<div>a</div>
+		<div>b</div>
+	</div>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script>
+		const add = document.querySelector('[data-action=add]');
+
+		add.addEventListener('click', (e) => {
+				const grid = document.getElementById('grid');
+				const item = document.createElement('div');
+
+				item.style.backgroundColor = '#f0f';
+				item.textContent = 'c'
+				grid.appendChild(item);
+		});
+	</script>
+{% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/ui/_form_module.scss b/source/style/modules/ui/_form_module.scss
new file mode 100644
index 0000000..265663c
--- /dev/null
+++ b/source/style/modules/ui/_form_module.scss
@@ -0,0 +1,33 @@
+#form body {
+	margin: 0;
+	background-color: #808080;
+}
+
+#head {
+	// display: flex;
+}
+
+h1 {
+	margin: 0;
+}
+
+#grid {
+	display: grid;
+	gap: 8px;
+	grid-template-columns: repeat(4, 1fr);
+	grid-auto-rows: minmax(64px, auto);
+}
+
+#grid>div {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+	background-color: aquamarine;
+}
+
+#grid>div:first-child {
+	grid-column: 1 / 3;
+	background-color: violet;
+}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
index e6886e8..f74e666 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -194,4 +194,5 @@ $z-indexes: (
 
 @import "modules/ui/new_module";
 @import "modules/ui/settings_module";
-@import "modules/ui/drag_module";
\ No newline at end of file
+@import "modules/ui/drag_module";
+@import "modules/ui/form_module";
\ No newline at end of file