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>

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

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

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

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

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

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

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

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

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 {
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;
}
}

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

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

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

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

20
source/style/ui.scss
View file

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

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

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

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

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

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