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