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

feat: Add app frame template

Browse source 
- All frame pages use app frame template
- Add form page to frames and add header
This commit is contained in:
sthag 2025-06-23 22:08:31 +02:00
parent 0c37acf47f
commit e572f64259
6 changed files with 29 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

24
source/screens/demo/examples/ui/cli.njk
View file

@ -6,21 +6,7 @@ tags:
{% set pageId = page.fileSlug %} {% set pageId = page.fileSlug %}
{% set bodyClass = "body_cli" %} {% set bodyClass = "body_cli" %}
{% extends "hippie/_app.njk" %} {% extends "hippie/_app_frame.njk" %}
{% import "hippie/macros/_io.njk" as io %}
{% block title %}{{ title }}
{% endblock %}
{% block links %}
{{ super() }}
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %} {% block body %}
<div id="cli"> <div id="cli">
@ -47,9 +33,11 @@ tags:
const textarea = document.getElementById('prompt'); const textarea = document.getElementById('prompt');
document.body.addEventListener('click', () => { document
textarea.focus(); .body
}); .addEventListener('click', () => {
textarea.focus();
});
textarea.addEventListener('input', () => { textarea.addEventListener('input', () => {
resizeTextArea(textarea); resizeTextArea(textarea);

21
source/screens/demo/examples/ui/explorer.njk
View file

@ -4,23 +4,8 @@ tags:
- ui - ui
--- ---
{% set pageId = page.fileSlug %} {% set pageId = page.fileSlug %}
{% set bodyClass = "body_frame" %}
{% extends "hippie/_app.njk" %} {% extends "hippie/_app_frame.njk" %}
{% import "hippie/macros/_io.njk" as io %}
{% block title %}{{ title }}
{% endblock %}
{% block links %}
{{ super() }}
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %} {% block body %}
{{ io.frameHeader('title-bar') }} {{ io.frameHeader('title-bar') }}
@ -177,8 +162,4 @@ tags:
<button>action</button> <button>action</button>
</nav> </nav>
</footer> </footer>
{% endblock %}
{% block script %}
{{ super() }}
{% endblock %} {% endblock %}

14
source/screens/demo/examples/ui/form.njk
View file

@ -3,20 +3,10 @@ title: Form
tags: tags:
- ui - ui
--- ---
{% extends "hippie/_app.njk" %} {% extends "hippie/_app_frame.njk" %}
{% block title %}{{ title }}
{% endblock %}
{% block links %}
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %} {% block body %}
{{ io.frameHeader('title-bar') }}
<header class="io"> <header class="io">
<h1>Formulare</h1> <h1>Formulare</h1>
<button data-action="add">Hinzufügen</button> <button data-action="add">Hinzufügen</button>

21
source/screens/demo/examples/ui/tui.njk
View file

@ -4,31 +4,14 @@ tags:
- ui - ui
--- ---
{% set pageId = page.fileSlug %} {% set pageId = page.fileSlug %}
{% set bodyClass = "body_frame" %}
{% extends "hippie/_app.njk" %} {% extends "hippie/_app_frame.njk" %}
{% import "hippie/macros/_io.njk" as io %}
{% block title %}{{ title }} {% block title %}{{ title }}
{% endblock %} {% endblock %}
{% block links %}
{{ super() }}
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block head %}
{{ super() }}
{% endblock %}
{% block body %} {% block body %}
{{ io.frameHeader('title-bar') }} {{ io.frameHeader('title-bar') }}
<main class="io"> <main class="io"></main>
</main>
{{ io.frameFooter('mode-bar') }} {{ io.frameFooter('mode-bar') }}
{% endblock %}
{%- block script %}
{{ super() }}
{% endblock %} {% endblock %}

2
source/templates/hippie/_app.njk
View file

@ -18,7 +18,7 @@
{% endblock %} {% endblock %}
</head> </head>
<body class="{{ bodyClass }}"> <body class="{{ bodyClass if bodyClass else 'body_frame' }}">
{% block body %}{% endblock %} {% block body %}{% endblock %}
{% block script %} {% block script %}

17
source/templates/hippie/_app_frame.njk Executable file
View file

@ -0,0 +1,17 @@
<!-- frame.app.template -->
{% extends "hippie/_app.njk" %}
{% import "hippie/macros/_io.njk" as io %}
{% block head %}
{{ super() }}
{% endblock %}
{% block links %}
{{ super() }}
<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
{% endblock %}
{% block script %}
{{ super() }}
{% endblock %}