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

feat: Change styles and ui

Browse source 
- Change to hippie styles
- Remove unused styles and components
- Change colors for ui pages
This commit is contained in:
sthag 2025-06-21 13:39:36 +02:00
parent 52daf0ca51
commit 8b7241c4da
11 changed files with 65 additions and 60 deletions
Download patch file Download diff file Expand all files Collapse all files

33
source/screens/demo/components.njk
View file

@ -152,8 +152,12 @@ tags:
</ul> </ul>
<pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre> <pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
<ul class="list_link"> <ul class="list_link">
<li><a href="">Mit</a></li> <li>
<li><a href="">Verweisen</a></li> <a href="">Mit</a>
</li>
<li>
<a href="">Verweisen</a>
</li>
</ul> </ul>
<h2>&lt;figure&gt;</h2> <h2>&lt;figure&gt;</h2>
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre> <pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
@ -171,7 +175,8 @@ tags:
</div> </div>
<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre> <pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
<div class="box_space"> <div class="box_space">
<div class="box_cube"><span>Text</span></div> <div class="box_cube">
<span>Text</span></div>
</div> </div>
<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre> <pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
<div class="box_placeholder"></div> <div class="box_placeholder"></div>
@ -278,14 +283,24 @@ tags:
<p>Elemente:</p> <p>Elemente:</p>
<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre> <pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
<h2>&lt;input&gt;</h2> <h2>&lt;input&gt;</h2>
<div class="flex_column_wrap"> <div class="inline">
<div class="flex_column"><input value="Undefiniert"/></div> <input value="Undefiniert"/>
<div class="flex_column"><input type="text" size="8" value="Text"/></div> <input type="text" size="8" value="Text"/>
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div> <input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
<div class="flex_column"><input type="button" value="Auswählen"></div> <input type="button" value="Auswählen">
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div> <input type="submit" value="Senden" disabled="disabled"/>
</div> </div>
<h4>Varianten</h4> <h4>Varianten</h4>
<pre class="pre_code"><code>input.button_io+button.button_io</code></pre>
<div class="inline">
<input class="button_io" type="button" value="Input type button">
<button class="button_io">Button</button>
</div>
<div class="inline">
<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>
</div>
<div id="capsCheck"> <div id="capsCheck">
<form action=""> <form action="">
<input type="password" onkeypress="capLock(event)"/> <input type="password" onkeypress="capLock(event)"/>

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

@ -5,7 +5,7 @@ tags:
--- ---
{% set pageId = page.fileSlug %} {% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %} {% set pageClass = "h_full_view" %}
{% set bodyClass = "body_drag" %} {% set bodyClass = "body_ui" %}
{% extends "demo/_app.njk" %} {% extends "demo/_app.njk" %}

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

@ -4,6 +4,7 @@ tags:
- ui - ui
--- ---
{% set pageClass = "html_ui" %} {% set pageClass = "html_ui" %}
{% set bodyClass = "body_ui" %}
{% extends "demo/_app.njk" %} {% extends "demo/_app.njk" %}

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

@ -24,9 +24,9 @@ tags:
{% block body %} {% block body %}
{{ header.status(hippie, new) }} {{ header.status(hippie, new) }}
<div class="container"> <div id="frame">
<div class="area menu"> <header class="area menu io">
<nav class="nav_horizontal"> <nav>
<ul> <ul>
<li> <li>
<a href="" class="a_button">Func 1</a> <a href="" class="a_button">Func 1</a>
@ -36,7 +36,7 @@ tags:
</li> </li>
</ul> </ul>
</nav> </nav>
</div> </header>
<div class="area grid"> <div class="area grid">
<div class="item">1</div> <div class="item">1</div>
<div class="item">2</div> <div class="item">2</div>

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

@ -5,7 +5,7 @@ tags:
--- ---
{% set pageId = page.fileSlug %} {% set pageId = page.fileSlug %}
{% set pageClass = "h_full_view" %} {% set pageClass = "h_full_view" %}
{% set bodyClass = "body_ui" %} {% set bodyClass = "body_setting" %}
{% extends "demo/_app.njk" %} {% extends "demo/_app.njk" %}
@ -25,7 +25,7 @@ tags:
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<div id="frame" class="frame-flex"> <div id="frame">
<header class="io"> <header class="io">
<button title="menu"> <button title="menu">
<i class="bi bi-three-dots"></i> <i class="bi bi-three-dots"></i>
@ -45,7 +45,7 @@ tags:
</nav> </nav>
</header> </header>
<main class="io"> <main class="io">
<aside class="io left"> <aside class="io">
options options
<nav> <nav>
<ul> <ul>
@ -63,7 +63,7 @@ tags:
</ul> </ul>
</nav> </nav>
</aside> </aside>
<section class="bside"> <section>
<header class="io"> <header class="io">
<nav> <nav>
<button title="search"> <button title="search">
@ -81,7 +81,6 @@ tags:
</button> </button>
</nav> </nav>
<hr class="vertical"> <hr class="vertical">
{# // FIXME: Navigationsstile sind chaotisch #}
<nav> <nav>
<ul> <ul>
<li> <li>

19
source/screens/demo/layouts.njk
View file

@ -175,19 +175,12 @@ tags:
</footer> </footer>
</div> </div>
</div> </div>
<div class="flex"> <div class="flex inline">
<div class="flex_child"></div> <input value="Undefiniert"/>
<div class="flex_child"></div> <input type="text" size="8" value="Text"/>
<div class="flex_child"></div> <input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
<div class="flex_child"></div> <input type="button" value="Auswählen">
<div class="flex_child"></div> <input type="submit" value="Senden" disabled="disabled"/>
</div>
<div class="flex_column_wrap">
<div class="flex_column"><input value="Undefiniert"/></div>
<div class="flex_column"><input type="text" size="8" value="Text"/></div>
<div class="flex_column"><input type="text" size="8" value="Deaktiviert" disabled="disabled"/></div>
<div class="flex_column"><input type="button" value="Auswählen"></div>
<div class="flex_column"><input type="submit" value="Senden" disabled="disabled"/></div>
</div> </div>
<form method="get"> <form method="get">

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit 2f63dbe2b65ddb320c0a7ea186f04a9c3698c9e7 Subproject commit 35b55de55002b4a13d7f0530b326f5e2a569bbb1

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

@ -1,9 +1,4 @@
.body_drag {
@extend .body_ui;
#space { #space {
position: relative; position: relative;
height: 100%; height: 100%;
background-color: $color-dark;
}
} }

8
source/style/modules/ui/_new_module.scss
View file

@ -1,11 +1,13 @@
$module_top_height: 32px; $module_top_height: 32px;
$body_top_space: $module_top_height + $space_basic;
.body_new { .body_new {
height: 100vh; @extend .body_ui;
padding: $module_top_height + $space_basic $space_basic $space_basic;
padding: $body_top_space $space_basic $space_basic;
} }
.container { #frame {
display: grid; display: grid;
height: 100%; height: 100%;
// margin: $space_basic; // margin: $space_basic;

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

@ -7,7 +7,15 @@
} }
} }
.body_setting {
@extend .body_ui;
background-color: $color_back_basic;
}
#frame { #frame {
@extend %flex-column;
position: relative; position: relative;
height: 100%; height: 100%;
@ -22,23 +30,16 @@
} }
main { main {
@extend %flex-row;
flex: 1;
aside { aside {
background-color: $color_brighter; background-color: $color_brighter;
} }
}
}
.frame-flex {
display: flex;
flex-direction: column;
gap: $space_basic;
main {
flex: 1;
aside,
section { section {
height: 100%; flex: 1;
} }
} }
} }

7
source/style/ui.scss
View file

@ -1,11 +1,10 @@
@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";
$color_gui_back: $color_dark;
.op_show { .op_show {
transition: $transition_show; transition: $transition_show;
} }
@ -20,12 +19,12 @@ $color_head_basic: white;
body { body {
position: relative; position: relative;
min-height: 100%; min-height: 100%;
background-color: black;
} }
} }
.body_ui { .body_ui {
height: 100vh; height: 100vh;
background-color: $color_gui_back;
} }
.step { .step {