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> 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 <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> <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 <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;input[type="button"]&gt;</code>. Es gibt allerdings auch ein eigenes Element
<code>&lt;button&gt;</code> <code>&lt;button&gt;</code>
@ -637,8 +637,8 @@ tags:
<p><input type="button" value="Input Button"> <p><input type="button" value="Input Button">
<button>Button</button> <button>Button</button>
</p> </p>
<p><input class="io_button" type="button" value="Input Button"> <p><input class="button_io" type="button" value="Input Button">
<button class="io_button">Button</button> <button class="button_io">Button</button>
</p> </p>
<p>Interaktive Elemente können durch das Attribut <p>Interaktive Elemente können durch das Attribut
<code>readonly</code> <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"> <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> <button disabled="disabled">Deaktivierte Schaltfläche</button>
</p> </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"> <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="io_button" disabled="disabled">Deaktivierte Schaltfläche</button> <button class="button_io" disabled="disabled">Deaktivierte Schaltfläche</button>
</p> </p>
<p>Das Element <p>Das Element
<code>&lt;label&gt;</code> <code>&lt;label&gt;</code>
@ -677,31 +677,31 @@ tags:
</div> </div>
<table class="float_right"> <table class="float_right">
<tr> <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"> <td class="demo__td_pr">
<label for="demo__io_a">x</label> <label for="demo__io_a">x</label>
</td> </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"> <td class="demo__td_pr">
<label for="demo__io_a">Breite</label> <label for="demo__io_a">Breite</label>
</td> </td>
</tr> </tr>
<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"> <td class="demo__td_pr">
<label for="demo__io_b">y</label> <label for="demo__io_b">y</label>
</td> </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"> <td class="demo__td_pr">
<label for="demo__io_b">Tiefe</label> <label for="demo__io_b">Tiefe</label>
</td> </td>
</tr> </tr>
<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"> <td class="demo__td_pr">
<label for="demo__io_c">z</label> <label for="demo__io_c">z</label>
</td> </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"> <td class="demo__td_pr">
<label for="demo__io_c">Höhe</label> <label for="demo__io_c">Höhe</label>
</td> </td>
@ -713,8 +713,8 @@ tags:
realisiert.</p> realisiert.</p>
<fieldset> <fieldset>
<div class="grid grid_column_2"> <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__input">Input:</label><input class="input_io" 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__output">Output:</label><input class="input_io" type="text" value="happiness" readonly="readonly" id="demo__output">
</div> </div>
</fieldset> </fieldset>
<p>Sie können mittels <p>Sie können mittels
@ -753,9 +753,9 @@ tags:
<div class="grid grid_column_2"> <div class="grid grid_column_2">
<label>Schaltflächen:</label> <label>Schaltflächen:</label>
<div> <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> <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> <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> <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> <label>Mehrfachauswahl:</label>
@ -792,43 +792,43 @@ tags:
<label class="">Datum<br> <label class="">Datum<br>
<code>&lt;input[type="date"]&gt;</code> <code>&lt;input[type="date"]&gt;</code>
</label> </label>
<div><input class="io_input" type="date"></div> <div><input class="input_io" type="date"></div>
<label class="">Uhrzeit<br> <label class="">Uhrzeit<br>
<code>&lt;input[type="time"]&gt;</code> <code>&lt;input[type="time"]&gt;</code>
</label> </label>
<div><input class="io_input" type="time"></div> <div><input class="input_io" type="time"></div>
<label class="">Datum und Zeit<br> <label class="">Datum und Zeit<br>
<code>&lt;input[type="datetime-local"]&gt;</code> <code>&lt;input[type="datetime-local"]&gt;</code>
</label> </label>
<div><input class="io_input" type="datetime-local"></div> <div><input class="input_io" type="datetime-local"></div>
<label class="">Kalendermonat<br> <label class="">Kalendermonat<br>
<code>&lt;input[type="month"]&gt;</code> <code>&lt;input[type="month"]&gt;</code>
</label> </label>
<div><input class="io_input" type="month"></div> <div><input class="input_io" type="month"></div>
<label class="">Kalenderwoche<br> <label class="">Kalenderwoche<br>
<code>&lt;input[type="week"]&gt;</code> <code>&lt;input[type="week"]&gt;</code>
</label> </label>
<div><input class="io_input" type="week"></div> <div><input class="input_io" type="week"></div>
<label class="">@dresse<br> <label class="">@dresse<br>
<code>&lt;input[type="email"]&gt;</code> <code>&lt;input[type="email"]&gt;</code>
</label> </label>
<div><input class="io_input" type="email" placeholder="@"></div> <div><input class="input_io" type="email" placeholder="@"></div>
<label class="">Passwort<br> <label class="">Passwort<br>
<code>&lt;input[type="password"]&gt;</code> <code>&lt;input[type="password"]&gt;</code>
</label> </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> <label class="">Telefonnummer<br>
<code>&lt;input[type="tel"]&gt;</code> <code>&lt;input[type="tel"]&gt;</code>
</label> </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> <label class="">URL<br>
<code>&lt;input[type="url"]&gt;</code> <code>&lt;input[type="url"]&gt;</code>
</label> </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> <label class="">Suche<br>
<code>&lt;input[type="search"]&gt;</code> <code>&lt;input[type="search"]&gt;</code>
</label> </label>
<div><input class="io_input" type="search"></div> <div><input class="input_io" type="search"></div>
<label class="">Datei<br> <label class="">Datei<br>
<code>&lt;input[type="file"]&gt;</code> <code>&lt;input[type="file"]&gt;</code>
</label> </label>

2
source/screens/demo/examples/ui/drag.njk
View file

@ -1,7 +1,7 @@
--- ---
title: Drag title: Drag
tags: tags:
- demoExample - ui
--- ---
{% set pageId = page.fileSlug %} {% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %} {% set pageClass = "h_full_view" %}

3
source/screens/demo/examples/ui/form.njk
View file

@ -1,10 +1,9 @@
--- ---
title: Form title: Form
tags: tags:
- demoExample
- ui - ui
--- ---
{% set bodyClass = "body_form" %} {% set pageClass = "html_ui" %}
{% extends "demo/_app.njk" %} {% extends "demo/_app.njk" %}

31
source/screens/demo/examples/ui/new.njk
View file

@ -1,14 +1,14 @@
--- ---
title: New title: New
tags: tags:
- demoExample - ui
--- ---
{% set pageId = page.fileSlug %} {% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %} {% set pageClass = "h_full_view" %}
{% set bodyClass = "body_new" %} {% set bodyClass = "body_new" %}
{% extends "demo/_app.njk" %} {% extends "demo/_app.njk" %}
{% import "hippie/macros/_state.njk" as state %} {% import "hippie/macros/_header.njk" as header %}
{% block title %}{{ title }} {% block title %}{{ title }}
{% endblock %} {% endblock %}
@ -23,27 +23,7 @@ tags:
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div id="top"> {{ header.status(hippie, new) }}
<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>
<div class="container"> <div class="container">
<div class="area menu"> <div class="area menu">
<nav class="nav_horizontal"> <nav class="nav_horizontal">
@ -74,8 +54,9 @@ tags:
let clock = new Clock('time'); let clock = new Clock('time');
document.addEventListener('mousemove', (event) => { document.addEventListener('mousemove', (event) => {
document.getElementById('log') document
.textContent = "X: " + event.pageX + ", Y: " + event.pageY; .getElementById('log')
.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
}); });
</script> </script>
{% endblock %} {% endblock %}

5
source/screens/demo/examples/ui/settings.njk
View file

@ -1,7 +1,6 @@
--- ---
title: Settings title: Settings
tags: tags:
- demoExample
- ui - ui
--- ---
{% set pageId = page.fileSlug %} {% set pageId = page.fileSlug %}
@ -25,8 +24,8 @@ tags:
{% block body %} {% block body %}
<div id="frame" class="frame-flex"> <div id="frame" class="frame-flex">
<div class="title-bar"> <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>title-bar<button class="button_io">menu</button class="button_io"><button class="button_io">search</button class="button_io"></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><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> </div>
<main> <main>
<aside class="left">aside <aside class="left">aside

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit a1a4bd408bedaa11f5e1aacca630d0b1bbbe7aa2 Subproject commit 3eab0f095603236be4519081203e51bc2916801e

15
source/style/modules/ui/_drag_module.scss
View file

@ -1,18 +1,17 @@
.body_drag { .body_drag {
height: 100vh; @extend .body_ui;
// padding: $space_basic;
button { button {
@extend .io_button; @extend .button_io;
position: fixed; position: fixed;
top: 8px; top: 8px;
right: 8px; right: 8px;
margin: 0; margin: 0;
} }
}
#space { #space {
position: relative; position: relative;
height: 100%; height: 100%;
background-color: $color-dark; background-color: $color-dark;
}
} }

7
source/style/modules/ui/_form_module.scss
View file

@ -1,13 +1,8 @@
.body_form {
margin: 0;
background-color: $color-dark;
}
#head { #head {
// display: flex; // display: flex;
button { button {
@extend .io_button; @extend .button_io;
} }
h1 { h1 {

6
source/style/modules/ui/_settings_module.scss
View file

@ -1,9 +1,3 @@
$module_top_height: 32px;
.body_ui {
height: 100vh;
}
#frame { #frame {
position: relative; position: relative;
height: 100%; height: 100%;

20
source/style/ui.scss
View file

@ -1,21 +1,11 @@
@use "sass:map"; @use "sass:map";
$color_text_basic: white;
$color_head_basic: white;
@import "demo_config"; @import "demo_config";
@import "hippie-style/hippie"; @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 { .op_show {
transition: $transition_show; transition: $transition_show;
} }
@ -34,6 +24,10 @@ $z-indexes: (
} }
} }
.body_ui {
height: 100vh;
}
.step { .step {
@extend %full_parent; @extend %full_parent;
} }

1
source/templates/demo/_app.njk
View file

@ -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="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> <script src="{{ pageBase }}js/variables.js"></script>
{% endblock %} {% endblock %}
</body> </body>
</html> </html>

25
source/templates/hippie/macros/_header.njk
View file

@ -2,4 +2,29 @@
<header class="header_site"> <header class="header_site">
<div id="begin"></div> <div id="begin"></div>
</header> </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 %} {% endmacro %}

4
source/templates/hippie/macros/_state.njk
View file

@ -1,10 +1,12 @@
{% macro coord(id, text = 'X: #, Y: ##') %} {% macro coord(id, text = 'X: #, Y: ##') %}
<span id="{{ id }}">{{ text }}</span> <span id="{{ id }}">{{ text }}</span>
{% endmacro %} {% endmacro %}
{% macro time(id, text = '00:00:00', postfix = ' Uhr') %} {% macro time(id, text = '00:00:00', postfix = ' Uhr') %}
<span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span> <span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
{% endmacro %} {% endmacro %}
{% macro date() %}
{% macro date(id) %}
<span id="{{ id }}"> <span id="{{ id }}">
<span id="day">Wochentag</span>, <span id="day">Wochentag</span>,
<span id="dayNumb">##</span>. <span id="dayNumb">##</span>.