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

feat: Style and content for windows

Browse source
This commit is contained in:
sthag 2025-10-27 23:24:49 +01:00
parent 1ada62f6ec
commit 6098a1e62d
2 changed files with 86 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

31
source/screens/demo/examples/ui/windows.liquid
View file

@ -7,9 +7,34 @@ tags:
{% layout "hippie/app.liquid" %} {% layout "hippie/app.liquid" %}
{% block body %} {% block body %}
<nav id="task-bar"> <div id="task-bar">
<button data-action="start">Start</button> <nav>
</nav> <button data-action="start"><i class="bi bi-microsoft"></i></button>
</nav>
<nav>
<button><i class="bi bi-search"></i></button>
<button><i class="bi bi-layers-half"></i></button>
</nav>
<nav class="big">
<button><i class="bi bi-folder"></i></button>
<button><i class="bi bi-terminal"></i></button>
</nav>
<div>
<nav class="small">
<button><i class="bi bi-chevron-up"></i></button>
<button><i class="bi bi-steam"></i></button>
<button><i class="bi bi-router"></i></button>
<button><i class="bi bi-mic"></i></button>
<button><i class="bi bi-volume-down"></i></button>
</nav>
<nav class="clock">
<span>##:##<br>TT.MM.JJJJ</span>
</nav>
<nav>
<button data-action="notification"><i class="bi bi-bell-fill"></i></button>
</nav>
</div>
</div>
<div id="screen-space"></div> <div id="screen-space"></div>
<div id="placeholder"></div> <div id="placeholder"></div>
{% endblock %} {% endblock %}

61
source/style/modules/ui/_windows_module.scss
View file

@ -2,10 +2,21 @@
@use "../../hippie-style/hippie"; @use "../../hippie-style/hippie";
#task-bar { $padding_half: calc(#{hippie.$space_half} - 3px) hippie.$space_half;
@extend %flex-inline;
z-index: map.get(hippie.$z-indexes, "content-top"); %flex-bar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: stretch; align-items: stretch;
align-content: center;
justify-content: flex-start;
gap: hippie.$space_half hippie.$space_basic;
}
#task-bar {
@extend %flex-bar;
z-index: map.get(hippie.$z-indexes, "content-top");
position: fixed; position: fixed;
//right: 0; //right: 0;
//bottom: 0; //bottom: 0;
@ -14,10 +25,54 @@
padding: hippie.$space_basic; padding: hippie.$space_basic;
background-color: rgba(0, 0, 0, .1); background-color: rgba(0, 0, 0, .1);
nav,
& > div {
@extend %flex-bar;
&:last-child {
margin-left: auto;
}
}
button { button {
@extend .button_io; @extend .button_io;
overflow: hidden; overflow: hidden;
} }
nav.small {
//font-size: .8em;
button {
border: none;
padding: $padding_half;
&:hover {
background-color: transparent;
}
}
}
nav.big {
font-size: 1.5em;
button {
border: none;
padding: 0;
&:hover {
background-color: transparent;
}
}
}
.clock {
text-align: end;
&,
& > * {
line-height: 1;
}
}
} }
#screen-space { #screen-space {