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

feat: Additional content and style for table screen

Browse source 
- More columns with placeholder content
- Special styles for textarea and td
- New style for io module
This commit is contained in:
sthag 2026-02-13 18:04:07 +01:00
parent f83b5aa258
commit a85dbbe27c
2 changed files with 33 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

40
source/screens/demo/examples/ui/table.liquid
View file

@ -21,11 +21,14 @@ tags:
<table> <table>
<thead> <thead>
<tr> <tr>
<th scope="col">#</th> <th scope="col" title="Index">#</th>
<th scope="col"></th>
<th scope="col" title="Position">#</th>
<th scope="col">Number</th>
<th scope="col">Name</th>
<th scope="col">Description</th>
<th scope="col">Price</th>
<th scope="col"></th> <th scope="col"></th>
<th scope="col">name</th>
<th scope="col">random</th>
<th scope="col">description</th>
</tr> </tr>
</thead> </thead>
<tbody></tbody> <tbody></tbody>
@ -36,10 +39,27 @@ tags:
<template id="default-row"> <template id="default-row">
<tr> <tr>
<th scope="row"></th> <th scope="row"></th>
<td><i class="bi bi-grip-horizontal"></i></td> <td class="io">
<nav>
<button title="drag"><i class="bi bi-grip-horizontal"></i></button>
<button title="expand"><i class="bi bi-arrows-expand-vertical"></i></button>
</nav>
</td>
<td></td> <td></td>
<td></td> <td></td>
<td></td> <td></td>
{% comment %}<td class="ellipsis"></td>{% endcomment %}
<td>
<textarea class="fit" name="description" cols="64" rows="2"></textarea>
</td>
<td class="unit"></td>
<td class="io">
<nav>
<button title="event"><i class="bi bi-calendar-event"></i></button>
<button title="note"><i class="bi bi-journal"></i></button>
<button title="delete"><i class="bi bi-trash"></i></button>
</nav>
</td>
</tr> </tr>
</template> </template>
{% render 'hippie/partials/frame-mode.liquid' %} {% render 'hippie/partials/frame-mode.liquid' %}
@ -80,6 +100,8 @@ tags:
const tbody = document.querySelector('main.io section > table'); const tbody = document.querySelector('main.io section > table');
const template = document.querySelector('#default-row'); const template = document.querySelector('#default-row');
const currencyEuro = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
for (let i = 0; i < 256; i++) { for (let i = 0; i < 256; i++) {
const clone = document.importNode(template.content, true); const clone = document.importNode(template.content, true);
const tr = clone.querySelector('tr'); const tr = clone.querySelector('tr');
@ -91,9 +113,11 @@ tags:
tr.setAttribute('data-id', i); tr.setAttribute('data-id', i);
th.textContent = i + 1; th.textContent = i + 1;
td[1].textContent = placeholderNames[j]; td[3].textContent = placeholderNames[j];
td[2].textContent = randomIntFrom(1, i).toString(); // td[2].innerHTML = replaceLineBreaks(placeholderContents[k]);
td[3].innerHTML = replaceLineBreaks(placeholderContents[k]); td[4].firstElementChild.textContent = placeholderContents[k];
// td[5].textContent = randomIntFrom(1, i).toString();
td[5].textContent = currencyEuro.format(randomFloatFrom(1, 1000000, 2));
tbody.appendChild(clone); tbody.appendChild(clone);
} }

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit 4e4f8814d319c2f2a26a3ae5ab1c812e1aac8483 Subproject commit 0623e818a49176ca7516a88943e07a882ba5262d