From 3b380e954acd6beec2f346ec20edcdc03839424d Mon Sep 17 00:00:00 2001
From: sthag <sthag@interaktionsweise.de>
Date: Thu, 19 Jun 2025 16:21:09 +0200
Subject: [PATCH] feat: Changes to style and logic for ui parts

- Update hippie styles
- Move top element for new page to header macro
- Reassign ui and example collections
---
 source/screens/demo/basics.njk                | 50 +++++++++----------
 source/screens/demo/examples/ui/drag.njk      |  2 +-
 source/screens/demo/examples/ui/form.njk      |  3 +-
 source/screens/demo/examples/ui/new.njk       | 31 +++---------
 source/screens/demo/examples/ui/settings.njk  |  5 +-
 source/style/hippie-style                     |  2 +-
 source/style/modules/ui/_drag_module.scss     | 15 +++---
 source/style/modules/ui/_form_module.scss     |  7 +--
 source/style/modules/ui/_settings_module.scss |  6 ---
 source/style/ui.scss                          | 20 +++-----
 source/templates/demo/_app.njk                |  1 -
 source/templates/hippie/macros/_header.njk    | 25 ++++++++++
 source/templates/hippie/macros/_state.njk     |  4 +-
 13 files changed, 79 insertions(+), 92 deletions(-)

diff --git a/source/screens/demo/basics.njk b/source/screens/demo/basics.njk
index d8cf064..8ab604a 100644
--- a/source/screens/demo/basics.njk
+++ b/source/screens/demo/basics.njk
@@ -629,7 +629,7 @@ tags:
 				Elementes. Dieses ist notwendig um Angaben zur Kommunikation mit dem Server zu setzen. Es hat normalerweise keine gestalterische Funktion.</p>
 			<p>Grundlegend ist das Element
 				<code>&lt;input&gt;</code>. Es hat viele Attribute um den Typ der Eingabe anzupassen. Ist es undefiniert nimmt es jegliche textbasierte Information auf und erhält eine Standardgröße.</p>
-			<p><input value="Undefiniert"/><input class="io_input" value="Undefiniert mit Stil"/></p>
+			<p><input value="Undefiniert"/><input class="input_io" value="Undefiniert mit Stil"/></p>
 			<p>Ein spezieller Typ des Eingabefeldes hat die Funktion einer Schaltfläche
 				<code>&lt;input[type="button"]&gt;</code>. Es gibt allerdings auch ein eigenes Element
 				<code>&lt;button&gt;</code>
@@ -637,8 +637,8 @@ tags:
 			<p><input type="button" value="Input Button">
 				<button>Button</button>
 			</p>
-			<p><input class="io_button" type="button" value="Input Button">
-				<button class="io_button">Button</button>
+			<p><input class="button_io" type="button" value="Input Button">
+				<button class="button_io">Button</button>
 			</p>
 			<p>Interaktive Elemente können durch das Attribut
 				<code>readonly</code>
@@ -649,8 +649,8 @@ tags:
 			<p><input type="text" value="Nur lesbare Eingabe" readonly="readonly"><input type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
 				<button disabled="disabled">Deaktivierte Schaltfläche</button>
 			</p>
-			<p><input class="io_input" type="text" value="Nur lesbare Eingabe" readonly="readonly"><input class="io_input" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
-				<button class="io_button" disabled="disabled">Deaktivierte Schaltfläche</button>
+			<p><input class="input_io" type="text" value="Nur lesbare Eingabe" readonly="readonly"><input class="input_io" type="text" value="Deaktivierte Eingabe" size="21" disabled="disabled">
+				<button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
 			</p>
 			<p>Das Element
 				<code>&lt;label&gt;</code>
@@ -677,31 +677,31 @@ tags:
 				</div>
 				<table class="float_right">
 					<tr>
-						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_d" value="11.966504" size="10"></td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="text" id="demo__io_d" value="11.966504" size="10"></td>
 						<td class="demo__td_pr">
 							<label for="demo__io_a">x</label>
 						</td>
-						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_a" value="10" min="0" max="1000"></td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="number" id="demo__io_a" value="10" min="0" max="1000"></td>
 						<td class="demo__td_pr">
 							<label for="demo__io_a">Breite</label>
 						</td>
 					</tr>
 					<tr>
-						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_e" value="51.503491" size="10"></td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="text" id="demo__io_e" value="51.503491" size="10"></td>
 						<td class="demo__td_pr">
 							<label for="demo__io_b">y</label>
 						</td>
-						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_b" value="10" min="0" max="1000"></td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="number" id="demo__io_b" value="10" min="0" max="1000"></td>
 						<td class="demo__td_pr">
 							<label for="demo__io_b">Tiefe</label>
 						</td>
 					</tr>
 					<tr>
-						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="text" id="demo__io_f" value="88" size="10"></td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="text" id="demo__io_f" value="88" size="10"></td>
 						<td class="demo__td_pr">
 							<label for="demo__io_c">z</label>
 						</td>
-						<td class="txt_right demo__td_no_br demo__td_pl"><input class="io_input" type="number" id="demo__io_c" value="48" min="0" max="1000"></td>
+						<td class="txt_right demo__td_no_br demo__td_pl"><input class="input_io" type="number" id="demo__io_c" value="48" min="0" max="1000"></td>
 						<td class="demo__td_pr">
 							<label for="demo__io_c">Höhe</label>
 						</td>
@@ -713,8 +713,8 @@ tags:
 				realisiert.</p>
 			<fieldset>
 				<div class="grid grid_column_2">
-					<label for="demo__input">Input:</label><input class="io_input" type="text" value="love" readonly="readonly" id="demo__input">
-					<label for="demo__output">Output:</label><input class="io_input" type="text" value="happiness" readonly="readonly" id="demo__output">
+					<label for="demo__input">Input:</label><input class="input_io" type="text" value="love" readonly="readonly" id="demo__input">
+					<label for="demo__output">Output:</label><input class="input_io" type="text" value="happiness" readonly="readonly" id="demo__output">
 				</div>
 			</fieldset>
 			<p>Sie können mittels
@@ -753,9 +753,9 @@ tags:
 				<div class="grid grid_column_2">
 					<label>Schaltflächen:</label>
 					<div>
-						<button class="io_button">Senden</button><input class="io_button" type="reset" value="Abbrechen"></div>
+						<button class="button_io">Senden</button><input class="button_io" type="reset" value="Abbrechen"></div>
 					<label>Zeicheneingaben:</label>
-					<div><input class="io_input" type="text" placeholder="Text"><input class="io_input" type="number" value="0815"></div>
+					<div><input class="input_io" type="text" placeholder="Text"><input class="input_io" type="number" value="0815"></div>
 					<label>Einzelauswahl:</label>
 					<div><input class="io_radio" type="radio" name="direction" value="up" checked="checked"/><input class="io_radio" type="radio" name="direction" value="down"/></div>
 					<label>Mehrfachauswahl:</label>
@@ -792,43 +792,43 @@ tags:
 					<label class="">Datum<br>
 						<code>&lt;input[type="date"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="date"></div>
+					<div><input class="input_io" type="date"></div>
 					<label class="">Uhrzeit<br>
 						<code>&lt;input[type="time"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="time"></div>
+					<div><input class="input_io" type="time"></div>
 					<label class="">Datum und Zeit<br>
 						<code>&lt;input[type="datetime-local"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="datetime-local"></div>
+					<div><input class="input_io" type="datetime-local"></div>
 					<label class="">Kalendermonat<br>
 						<code>&lt;input[type="month"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="month"></div>
+					<div><input class="input_io" type="month"></div>
 					<label class="">Kalenderwoche<br>
 						<code>&lt;input[type="week"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="week"></div>
+					<div><input class="input_io" type="week"></div>
 					<label class="">@dresse<br>
 						<code>&lt;input[type="email"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="email" placeholder="@"></div>
+					<div><input class="input_io" type="email" placeholder="@"></div>
 					<label class="">Passwort<br>
 						<code>&lt;input[type="password"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="password" value="admin"></div>
+					<div><input class="input_io" type="password" value="admin"></div>
 					<label class="">Telefonnummer<br>
 						<code>&lt;input[type="tel"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="tel" value="0190123456"></div>
+					<div><input class="input_io" type="tel" value="0190123456"></div>
 					<label class="">URL<br>
 						<code>&lt;input[type="url"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="url" placeholder="url://"></div>
+					<div><input class="input_io" type="url" placeholder="url://"></div>
 					<label class="">Suche<br>
 						<code>&lt;input[type="search"]&gt;</code>
 					</label>
-					<div><input class="io_input" type="search"></div>
+					<div><input class="input_io" type="search"></div>
 					<label class="">Datei<br>
 						<code>&lt;input[type="file"]&gt;</code>
 					</label>
diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
index 09266b9..ac2276e 100755
--- a/source/screens/demo/examples/ui/drag.njk
+++ b/source/screens/demo/examples/ui/drag.njk
@@ -1,7 +1,7 @@
 ---
 title: Drag
 tags:
-  - demoExample
+  - ui
 ---
 {% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
diff --git a/source/screens/demo/examples/ui/form.njk b/source/screens/demo/examples/ui/form.njk
index b9adc45..1ab3145 100644
--- a/source/screens/demo/examples/ui/form.njk
+++ b/source/screens/demo/examples/ui/form.njk
@@ -1,10 +1,9 @@
 ---
 title: Form
 tags: 
-  - demoExample
   - ui
 ---
-{% set bodyClass = "body_form" %}
+{% set pageClass = "html_ui" %}
 
 {% extends "demo/_app.njk" %}
 
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
index c567309..536583d 100755
--- a/source/screens/demo/examples/ui/new.njk
+++ b/source/screens/demo/examples/ui/new.njk
@@ -1,14 +1,14 @@
 ---
 title: New
 tags:
-  - demoExample
+  - ui
 ---
 {% set pageId = page.fileSlug %}
 {% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_new" %}
 
 {% extends "demo/_app.njk" %}
-{% import "hippie/macros/_state.njk" as state %}
+{% import "hippie/macros/_header.njk" as header %}
 
 {% block title %}{{ title }}
 {% endblock %}
@@ -23,27 +23,7 @@ tags:
 {% endblock %}
 
 {% block body %}
-  <div id="top">
-    <h1 class="brand">
-      <a href="#">{{ hippie.brand | upper }}</a>
-    </h1>
-    <nav>
-      <ul>
-        {% for link in new %}
-          <li>
-            <a href="{{ link.href }}">{{ link.text }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    </nav>
-    <div class="state">
-      <p>{{ state.coord("log")}}
-        /
-        {{ state.date("date")}}
-        /
-        {{ state.time("time")}}</p>
-    </div>
-  </div>
+  {{ header.status(hippie, new) }}
   <div class="container">
     <div class="area menu">
       <nav class="nav_horizontal">
@@ -74,8 +54,9 @@ tags:
     let clock = new Clock('time');
 
     document.addEventListener('mousemove', (event) => {
-      document.getElementById('log')
-      .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+      document
+        .getElementById('log')
+        .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
     });
   </script>
 {% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk
index da61f8a..cb4f6aa 100755
--- a/source/screens/demo/examples/ui/settings.njk
+++ b/source/screens/demo/examples/ui/settings.njk
@@ -1,7 +1,6 @@
 ---
 title: Settings
 tags:
-  - demoExample
   - ui
 ---
 {% set pageId = page.fileSlug %}
@@ -25,8 +24,8 @@ tags:
 {% block body %}
 <div id="frame" class="frame-flex">
   <div class="title-bar">
-    <div>title-bar<button class="io_button">menu</button class="io_button"><button class="io_button">search</button class="io_button"></div>
-    <div><button class="io_button">minimize</button class="io_button"><button class="io_button">maximize</button class="io_button"><button class="io_button">close</button class="io_button"></div>
+    <div>title-bar<button class="button_io">menu</button class="button_io"><button class="button_io">search</button class="button_io"></div>
+    <div><button class="button_io">minimize</button class="button_io"><button class="button_io">maximize</button class="button_io"><button class="button_io">close</button class="button_io"></div>
   </div>
   <main>
     <aside class="left">aside
diff --git a/source/style/hippie-style b/source/style/hippie-style
index a1a4bd4..3eab0f0 160000
--- a/source/style/hippie-style
+++ b/source/style/hippie-style
@@ -1 +1 @@
-Subproject commit a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2
+Subproject commit 3eab0f095603236be4519081203e51bc2916801e
diff --git a/source/style/modules/ui/_drag_module.scss b/source/style/modules/ui/_drag_module.scss
index 3942e0a..03b3de8 100644
--- a/source/style/modules/ui/_drag_module.scss
+++ b/source/style/modules/ui/_drag_module.scss
@@ -1,18 +1,17 @@
 .body_drag {
-	height: 100vh;
-	// padding: $space_basic;
+	@extend .body_ui;
 
 	button {
-		@extend .io_button;
+		@extend .button_io;
 		position: fixed;
 		top: 8px;
 		right: 8px;
 		margin: 0;
 	}
-}
 
-#space {
-	position: relative;
-	height: 100%;
-	background-color: $color-dark;
+	#space {
+		position: relative;
+		height: 100%;
+		background-color: $color-dark;
+	}
 }
\ No newline at end of file
diff --git a/source/style/modules/ui/_form_module.scss b/source/style/modules/ui/_form_module.scss
index e52b8af..c571126 100644
--- a/source/style/modules/ui/_form_module.scss
+++ b/source/style/modules/ui/_form_module.scss
@@ -1,13 +1,8 @@
-.body_form {
-	margin: 0;
-	background-color: $color-dark;
-}
-
 #head {
 	// display: flex;
 
 	button {
-			@extend .io_button;
+			@extend .button_io;
 	}
 
 	h1 {
diff --git a/source/style/modules/ui/_settings_module.scss b/source/style/modules/ui/_settings_module.scss
index 9b9dc1b..ffe8d7d 100755
--- a/source/style/modules/ui/_settings_module.scss
+++ b/source/style/modules/ui/_settings_module.scss
@@ -1,9 +1,3 @@
-$module_top_height: 32px;
-
-.body_ui {
-	height: 100vh;
-}
-
 #frame {
 	position: relative;
 	height: 100%;
diff --git a/source/style/ui.scss b/source/style/ui.scss
index 645e1f5..99fb3cb 100644
--- a/source/style/ui.scss
+++ b/source/style/ui.scss
@@ -1,21 +1,11 @@
 @use "sass:map";
 
+$color_text_basic: white;
+$color_head_basic: white;
+
 @import "demo_config";
 @import "hippie-style/hippie";
 
-$z-indexes: (
-	"default": 0,
-	"content-bottom": 1,
-	"content-low": 2,
-	"content-med": 3,
-	"content-high": 4,
-	"content-top": 10,
-	"modal-low": 11,
-	"modal-med": 12,
-	"modal-high": 13,
-	"toast": 100
-);
-
 .op_show {
 	transition: $transition_show;
 }
@@ -34,6 +24,10 @@ $z-indexes: (
 	}
 }
 
+.body_ui {
+	height: 100vh;
+}
+
 .step {
 	@extend %full_parent;
 }
diff --git a/source/templates/demo/_app.njk b/source/templates/demo/_app.njk
index 1d948a2..73a8dd0 100755
--- a/source/templates/demo/_app.njk
+++ b/source/templates/demo/_app.njk
@@ -25,6 +25,5 @@
 			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
 			<script src="{{ pageBase }}js/variables.js"></script>
 		{% endblock %}
-
 	</body>
 </html>
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_header.njk b/source/templates/hippie/macros/_header.njk
index 19cac15..e074db7 100644
--- a/source/templates/hippie/macros/_header.njk
+++ b/source/templates/hippie/macros/_header.njk
@@ -2,4 +2,29 @@
 	<header class="header_site">
 		<div id="begin"></div>
 	</header>
+{% endmacro %}
+
+{% macro status(hippie, page) %}
+	{% import "hippie/macros/_state.njk" as state %}
+	<div id="top">
+		<h1 class="brand">
+			<a href="#">{{ hippie.brand | upper }}</a>
+		</h1>
+		<nav>
+			<ul>
+				{% for link in page %}
+					<li>
+						<a href="{{ link.href }}">{{ link.text }}</a>
+					</li>
+				{% endfor %}
+			</ul>
+		</nav>
+		<div class="state">
+			<p>{{ state.coord("log")}}
+        /
+        {{ state.date("date")}}
+        /
+        {{ state.time("time")}}</p>
+		</div>
+	</div>
 {% endmacro %}
\ No newline at end of file
diff --git a/source/templates/hippie/macros/_state.njk b/source/templates/hippie/macros/_state.njk
index 63671d4..ef1f34d 100644
--- a/source/templates/hippie/macros/_state.njk
+++ b/source/templates/hippie/macros/_state.njk
@@ -1,10 +1,12 @@
 {% macro coord(id, text = 'X: #, Y: ##') %}
 	<span id="{{ id }}">{{ text }}</span>
 {% endmacro %}
+
 {% macro time(id, text = '00:00:00', postfix = ' Uhr') %}
 	<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
 {% endmacro %}
-{% macro date() %}
+
+{% macro date(id) %}
 	<span id="{{ id }}">
 		<span id="day">Wochentag</span>,
 		<span id="dayNumb">##</span>.