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

feat: Replace new with start screen

Browse source 
- Convert to liquid
- Add old ongoing function for now
- Add macros as partials
- Rename data source to better reflect usage
- Update app.js to fulfill jshint
This commit is contained in:
sthag 2025-10-28 19:51:59 +01:00
parent 6c252875fa
commit c259ead9a0
8 changed files with 94 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

45
source/screens/demo/examples/ui/new.njk
View file

@ -1,45 +0,0 @@
---
title: New
tags:
- ui
---
{% set pageId = page.fileSlug %}
{% set bodyClass = "body_new" %}
{% extends "hippie/_app_frame.njk" %}
{% import "hippie/macros/_header.njk" as header %}
{% block body %}
{{ header.status(hippie, new) }}
<header class="area menu io">
<nav>
<ul>
<li>
<a href="" class="a_button">Func 1</a>
</li>
<li>
<a href="" class="a_button">Func 2</a>
</li>
</ul>
</nav>
</header>
<div class="area grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
{% endblock %}
{%- block script %}
{{ super() }}
<script>
let clock = new Clock('time');
document.addEventListener('mousemove', (event) => {
document
.getElementById('log')
.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
});
</script>
{% endblock %}

44
source/screens/demo/examples/ui/start.liquid Normal file
View file

@ -0,0 +1,44 @@
---
title: Start
tags:
- ui
---
{% assign bodyClass = "body_new" -%}
{% layout "hippie/app.liquid" %}
{% block body %}
{% render 'hippie/partials/header-status', hippie: hippie, links: start %}
<header class="area menu io">
<nav>
<ul>
<li>
<a href="" class="a_button">Func 1</a>
</li>
<li>
<a href="" class="a_button">Func 2</a>
</li>
</ul>
</nav>
</header>
<div class="area grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
{% endblock %}
{%- block script %}
{{ block.super -}}
<script>
let clock = new Clock('time');
ongoing();
document.addEventListener('mousemove', (event) => {
document
.getElementById('log')
.textContent = "X: " + event.pageX + ", Y: " + event.pageY;
});
</script>
{% endblock %}