feat: Changes to ui form and drag

- Use common styles
- Move NewDiv class to external script
- Align script for form and drag pages

source/screens/demo/examples/ui/form.njk

@@ -4,6 +4,8 @@ tags:
   - demoExample
   - ui
 ---
+{% set bodyClass = "body_form" %}
+
 {% extends "demo/_app.njk" %}
 
 {% block title %}{{ title }}
@@ -21,25 +23,46 @@ tags:
 	<div id="head">
 		<h1>Formulare</h1>
 		<button data-action="add">Hinzufügen</button>
+		<button data-action="change">Ändern</button>
+		<hr>
 	</div>
-	<div id="grid">
-		<div>a</div>
-		<div>b</div>
-	</div>
+	<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 grid = document.getElementById('grid');
 				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 %}