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

feat: Restructure settings

Browse source 
- New styles
- New content
This commit is contained in:
sthag 2025-06-22 15:49:32 +02:00
parent 30ad2f3067
commit 6e722cd907
4 changed files with 64 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -25,7 +25,7 @@ tags:
{% block body %}
<div class="sec_main_center">
<nav role="doc-toc">
<h1>Inhaltsverzeichnis</h1>
<h1>{{ title }}</h1>
<ul class="list_link">
{%- for ui in collections.ui -%}
<li>

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

@ -25,12 +25,14 @@ tags:
{% block body %}
<div id="frame">
<header class="io">
<button title="menu">
<i class="bi bi-three-dots"></i>
</button>
<span class="span_solo">title-bar</span>
<nav>
<div class="spacer-a"></div>
<button title="menu">
<i class="bi bi-three-dots"></i>
</button>
<span>title-bar</span>
</nav>
<nav>
<div class="spacer a"></div>
<button title="minimize">
<i class="bi bi-dash"></i>
</button>
@ -44,19 +46,29 @@ tags:
</header>
<main class="io">
<aside class="io">
options
<nav>
<ul>
<li>setting</li>
<li>text</li>
<div>location-pane</div>
<ul class="vertical">
<li>
<a class="a_button" href="">
<span>Start/Home</span>
<i class="bi bi-pin-fill"></i>
</a>
</li>
<li>
<a class="a_button" href="">
<span>System</span>
<i class="bi bi-pin-fill"></i>
</a>
</li>
</ul>
<hr>
</nav>
<hr>
<nav>
<ul>
<li>
<label for="">label</label>
</li>
<li>
<button>button</button>
<input type="text">
</li>
</ul>
</nav>
@ -64,10 +76,35 @@ tags:
<section>
<header class="io">
<nav>
<button title="back">
<i class="bi bi-caret-left"></i>
</button>
<button title="up">
<i class="bi bi-caret-up"></i>
</button>
<button title="forward">
<i class="bi bi-caret-right"></i>
</button>
<button title="reload">
<i class="bi bi-arrow-clockwise"></i>
</button>
<input type="text">
</nav>
<nav>
<span>location-bar</span>
<hr class="vertical">
<button title="search">
<i class="bi bi-search"></i>
</button>
<div class="spacer-b"></div>
<input type="text">
</nav>
</header>
<header class="io">
<nav>
<button title="add">
<i class="bi bi-plus-circle"></i>
</button>
<div class="spacer a"></div>
<button title="cut">
<i class="bi bi-scissors"></i>
</button>
@ -77,6 +114,10 @@ tags:
<button title="paste">
<i class="bi bi-clipboard-check-fill"></i>
</button>
<div class="spacer b"></div>
<button title="delete">
<i class="bi bi-trash"></i>
</button>
</nav>
<hr class="vertical">
<nav>
@ -92,14 +133,15 @@ tags:
</button>
</li>
</ul>
<span>options-bar</span>
</nav>
<span class="span_solo">section-bar</span>
<nav></nav>
</header>
section</section>
</main>
<footer class="io">
<span class="span_solo">state</span>
<div class="spacer-a"></div>
<span>state</span>
<div class="spacer a"></div>
<button>action</button>
</footer>
</div>

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit b7ec209761cac635ba8312dbb07bf831ebc32933
Subproject commit 3d23ba55d4c1c300d49cf91868cf65bb8307b5a6

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

@ -1,9 +1,6 @@
@mixin nav-spacer($name, $size, $orientation) {
.spacer-#{$name} {
.spacer.#{$name} {
width: $size;
margin: 0;
border: $border_dotted;
opacity: .25;
}
}
@ -35,7 +32,7 @@
flex: 1;
aside {
background-color: $color_brighter;
background-color: rgba(255, 255, 255, .1);
}
section {
@ -46,9 +43,9 @@
.io {
.spacer {
width: $space_double;
margin: 0;
border: $border_dotted;
padding: 0;
opacity: .25;
}