interaktionsweise/hippie
1
1
Fork 0
Code Issues Pull requests Releases 3 Activity Actions

feat: Changes to style and logic for ui parts

Browse source 
- Update hippie styles
- Move top element for new page to header macro
- Reassign ui and example collections
This commit is contained in:
sthag 2025-06-19 16:21:09 +02:00
parent 08e258d7aa
commit 3b380e954a
13 changed files with 79 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

50
source/screens/demo/basics.njk
View file

@ -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>