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

feat: New settings

Browse source 
- Add dependency to bootstrap icons
- Add example content
- Restructure layout
- Now more usage of base hippie styles
This commit is contained in:
sthag 2025-06-20 17:09:06 +02:00
parent 5786e9e4b0
commit 57dffa3502
3 changed files with 124 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,9 @@ tags:
{% block links %}
{{ super() }}
<link
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css"
rel="stylesheet">
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
@ -22,28 +25,91 @@ tags:
{% endblock %}
{% block body %}
<div id="frame" class="frame-flex">
<div class="title-bar">
<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
<div id="frame" class="frame-flex">
<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="minimize">
<i class="bi bi-dash"></i>
</button>
<button title="maximize">
<i class="bi bi-fullscreen"></i>
</button>
<button title="close">
<i class="bi bi-x-square"></i>
</button>
</nav>
</header>
<main class="io">
<aside class="io left">
options
<nav>
<ul>
<li>setting</li>
<li>setting</li>
<li>text</li>
</ul>
<hr>
<ul>
<li>
<label for="">label</label>
</li>
<li>
<button>button</button>
</li>
</ul>
</nav>
</aside>
<section class="bside">section</section>
<section class="bside">
<header class="io">
<nav>
<button title="search">
<i class="bi bi-search"></i>
</button>
<div class="spacer-b"></div>
<button title="cut">
<i class="bi bi-scissors"></i>
</button>
<button title="copy">
<i class="bi bi-copy"></i>
</button>
<button title="paste">
<i class="bi bi-clipboard-check-fill"></i>
</button>
</nav>
<hr class="vertical">
{# // FIXME: Navigationsstile sind chaotisch #}
<nav>
<ul>
<li>
<button title="collapse">
<i class="bi bi-arrows-collapse"></i>
</button>
</li>
<li>
<button title="expand">
<i class="bi bi-arrows-expand-vertical"></i>
</button>
</li>
</ul>
</nav>
<span class="span_solo">section-bar</span>
</header>
section</section>
</main>
</div>
<footer class="io">
<span class="span_solo">state</span>
<div class="spacer-a"></div>
<button>action</button>
</footer>
</div>
{% endblock %}
{%- block script %}
{{ super() }}
<script src="{{ pageBase }}js/app.js"></script>
<script>
</script>
<script></script>
{% endblock %}

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit 1a3c25d8b5969b53ec0404c8e77fe6322d083042
Subproject commit 2f63dbe2b65ddb320c0a7ea186f04a9c3698c9e7

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

@ -1,12 +1,24 @@
@mixin nav-spacer($name, $size, $orientation) {
.spacer-#{$name} {
width: $size;
margin: 0;
border: $border_dotted;
opacity: .25;
}
}
#frame {
position: relative;
height: 100%;
background-color: $color-dark;
.title-bar {
button {
margin: 0 2px;
header,
aside,
footer {
border: 1px solid transparent;
}
&>header {
background-color: rgba(0, 0, 0, .1);
}
main {
@ -19,20 +31,26 @@
.frame-flex {
display: flex;
flex-direction: column;
.title-bar {
display: flex;
div:last-child {
margin-left: auto;
}
}
gap: $space_basic;
main {
flex: 1;
aside, section {
aside,
section {
height: 100%;
}
}
}
.io {
.spacer {
width: $space_double;
margin: 0;
border: $border_dotted;
opacity: .25;
}
@include nav-spacer('a', $space_double, false);
@include nav-spacer('b', $space_small, false);
}