hippie/source/screens/demo/examples/ui/windows.liquid

55 lines
No EOL
1.6 KiB
Text

---
title: Windows
tags:
- ui
---
{% assign bodyClass = "body_frame" -%}
{% layout "hippie/app.liquid" %}
{% block body %}
<div id="task-bar">
<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="placeholder"></div>
{% endblock %}
{%- block script %}
<script src="{{ pageBase }}js/windows.js"></script>
<script>
// Get the space element
const space = document.getElementById('screen-space');
const start = document.querySelector('[data-action=start]');
const draggableElement = document.getElementById('task-bar');
const placeholderElement = document.getElementById('placeholder');
// const draggable = new Draggable(draggableElement);
const dragMore = new DragAdv(draggableElement, placeholderElement);
// const dragBest = new BestDrag(draggableElement, placeholderElement);
</script>
{% endblock %}