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>
<pre class="pre_code"><code>ul.list_link>(li>a)*2</code></pre>
<ul class="list_link">
<li><a href="">Mit</a></li>
<li><a href="">Verweisen</a></li>
<li>
<a href="">Mit</a>
</li>
<li>
<a href="">Verweisen</a>
</li>
</ul>
<h2>&lt;figure&gt;</h2>
<pre class="pre_code"><code>figure>figcaption+{element}</code></pre>
@ -171,7 +175,8 @@ tags:
</div>
<pre class="pre_code"><code>div.box_space>div.box_cube>span</code></pre>
<div class="box_space">
<div class="box_cube"><span>Text</span></div>
<div class="box_cube">
<span>Text</span></div>
</div>
<pre class="pre_code"><code>div.box_placeholder+hr+div.box_placeholder_bkg</code></pre>
<div class="box_placeholder"></div>
@ -278,14 +283,24 @@ tags:
<p>Elemente:</p>
<pre>// form // label // input // button // select // datalist // optgroup // option // textarea // output // progress // meter // fieldset // legend</pre>
<h2>&lt;input&gt;</h2>
<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 class="inline">
<input value="Undefiniert"/>
<input type="text" size="8" value="Text"/>
<input type="text" size="8" value="Deaktiviert" disabled="disabled"/>
<input type="button" value="Auswählen">
<input type="submit" value="Senden" disabled="disabled"/>
</div>
<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">
<form action="">
<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 pageClass = "h_full_view" %}
{% set bodyClass = "body_drag" %}
{% set bodyClass = "body_ui" %}
{% extends "demo/_app.njk" %}

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

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

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

@ -24,9 +24,9 @@ tags:
{% block body %}
{{ header.status(hippie, new) }}
<div class="container">
<div class="area menu">
<nav class="nav_horizontal">
<div id="frame">
<header class="area menu io">
<nav>
<ul>
<li>
<a href="" class="a_button">Func 1</a>
@ -36,7 +36,7 @@ tags:
</li>
</ul>
</nav>
</div>
</header>
<div class="area grid">
<div class="item">1</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 pageClass = "h_full_view" %}
{% set bodyClass = "body_ui" %}
{% set bodyClass = "body_setting" %}
{% extends "demo/_app.njk" %}
@ -25,7 +25,7 @@ tags:
{% endblock %}
{% block body %}
<div id="frame" class="frame-flex">
<div id="frame">
<header class="io">
<button title="menu">
<i class="bi bi-three-dots"></i>
@ -45,7 +45,7 @@ tags:
</nav>
</header>
<main class="io">
<aside class="io left">
<aside class="io">
options
<nav>
<ul>
@ -63,7 +63,7 @@ tags:
</ul>
</nav>
</aside>
<section class="bside">
<section>
<header class="io">
<nav>
<button title="search">
@ -81,7 +81,6 @@ tags:
</button>
</nav>
<hr class="vertical">
{# // FIXME: Navigationsstile sind chaotisch #}
<nav>
<ul>
<li>

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

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

2
source/style/hippie-style

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

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

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

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

@ -1,11 +1,13 @@
$module_top_height: 32px;
$body_top_space: $module_top_height + $space_basic;
.body_new {
height: 100vh;
padding: $module_top_height + $space_basic $space_basic $space_basic;
@extend .body_ui;
padding: $body_top_space $space_basic $space_basic;
}
.container {
#frame {
display: grid;
height: 100%;
// 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 {
@extend %flex-column;
position: relative;
height: 100%;
@ -22,23 +30,16 @@
}
main {
@extend %flex-row;
flex: 1;
aside {
background-color: $color_brighter;
}
}
}
.frame-flex {
display: flex;
flex-direction: column;
gap: $space_basic;
main {
flex: 1;
aside,
section {
height: 100%;
flex: 1;
}
}
}

7
source/style/ui.scss
View file

@ -1,11 +1,10 @@
@use "sass:map";
$color_text_basic: white;
$color_head_basic: white;
@import "demo_config";
@import "hippie-style/hippie";
$color_gui_back: $color_dark;
.op_show {
transition: $transition_show;
}
@ -20,12 +19,12 @@ $color_head_basic: white;
body {
position: relative;
min-height: 100%;
background-color: black;
}
}
.body_ui {
height: 100vh;
background-color: $color_gui_back;
}
.step {