From 245227d7e90ee095bf1a3a43eb5af17440efb34c Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 15 Mar 2026 11:32:59 +0100 Subject: [PATCH 1/3] feat: Reflect new table styles Add examples to components. --- source/screens/demo/components.liquid | 28 +++++++++++++++++++++------ source/style/hippie-style | 2 +- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid index ca72d3f..7e14f0d 100644 --- a/source/screens/demo/components.liquid +++ b/source/screens/demo/components.liquid @@ -190,11 +190,11 @@ order: 3 
// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th

<table>

Varianten

- 
table.width_full.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3
+ 
table.width_full.fix>(thead>tr>th.pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.pre+td*3
- + @@ -202,19 +202,19 @@ order: 3 - + - + - + @@ -244,7 +244,7 @@ order: 3
Kopfzeile A B
VorspalteVorspalte Eine
11 erweiterte
22 TabelleStreifen
- 
table.width_full.fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right
+ 
table>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right
@@ -278,6 +278,22 @@ order: 3
Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.
+ 
table>tr>td+td.ellipsis+td[style="width: 50%"]
+ + + + + + +
IndexZelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.Zelle mit Angabe der Breite.
+ 
table.flexible>tr>td+td.truncate.ellipsis+td
+ + + + + + +
IndexZelle mit viel Inhalt der nicht umbricht und eingeschränkt wird.Zelle mit Angabe der Breite.

Formulare

diff --git a/source/style/hippie-style b/source/style/hippie-style index b4c5632..89db97c 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit b4c56320060548dacde62639876c6aee72b297ea +Subproject commit 89db97c35876e4f354b86bcb7fa90e2c9da937f5 From d5335635692d016348210e1086e6129b02aef466 Mon Sep 17 00:00:00 2001 From: sthag Date: Sun, 15 Mar 2026 12:25:23 +0100 Subject: [PATCH 2/3] feat: Change - to _ for selector names --- source/code/hippie/app.js | 2 +- source/screens/demo/components.liquid | 6 +++--- source/screens/demo/examples/game/intro.liquid | 2 +- source/screens/demo/examples/start.liquid | 4 ++-- source/style/hippie-style | 2 +- source/style/modules/_start.scss | 2 +- source/style/modules/ui/_frame_module.scss | 10 +++++----- source/style/modules/ui/_new_module.scss | 2 +- source/style/ui.scss | 2 +- 9 files changed, 16 insertions(+), 16 deletions(-) diff --git a/source/code/hippie/app.js b/source/code/hippie/app.js index 50efe38..7cda8b6 100644 --- a/source/code/hippie/app.js +++ b/source/code/hippie/app.js @@ -69,7 +69,7 @@ function HippieFade(toggleElement, initState) { const fragment = document.createDocumentFragment(); const overlay = document.createElement('div'); - overlay.id = 'mouse-overlay'; + overlay.id = 'mouse_overlay'; if (initState) { overlay.classList.add('active'); diff --git a/source/screens/demo/components.liquid b/source/screens/demo/components.liquid index 7e14f0d..2ea1d8d 100644 --- a/source/screens/demo/components.liquid +++ b/source/screens/demo/components.liquid @@ -221,8 +221,8 @@ order: 3 - 
table.width_full.stripe.fix.free>tr>td*3
- + 
table.width_full.striped.fix.free>tr>td*3
+
@@ -278,7 +278,7 @@ order: 3
Tabelle
- 
table>tr>td+td.ellipsis+td[style="width: 50%"]
+ 
table.width_full.fix>tr>td+td.ellipsis+td[style="width: 50%"]
diff --git a/source/screens/demo/examples/game/intro.liquid b/source/screens/demo/examples/game/intro.liquid index ac1de27..93988bd 100644 --- a/source/screens/demo/examples/game/intro.liquid +++ b/source/screens/demo/examples/game/intro.liquid @@ -39,7 +39,7 @@ tags:

This needs to be seen and acknowledged.
So an interaction must be made to continue.

-
+
Hello World!

Only left mouse click or any key

diff --git a/source/screens/demo/examples/start.liquid b/source/screens/demo/examples/start.liquid index e11d3f8..4c68c5a 100644 --- a/source/screens/demo/examples/start.liquid +++ b/source/screens/demo/examples/start.liquid @@ -9,7 +9,7 @@ tags: {% block body %}
- + @@ -65,7 +65,7 @@ tags: return base + '?' + params.toString(); } - document.getElementById('www-search').addEventListener('submit', function (e) { + document.getElementById('www_search').addEventListener('submit', function (e) { e.preventDefault(); const query = document.getElementById('qrySearch').value.trim(); diff --git a/source/style/hippie-style b/source/style/hippie-style index 89db97c..eb4349f 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit 89db97c35876e4f354b86bcb7fa90e2c9da937f5 +Subproject commit eb4349f9e5fc118d05385c81c7b553252c98f211 diff --git a/source/style/modules/_start.scss b/source/style/modules/_start.scss index 031f7f7..564e8a3 100644 --- a/source/style/modules/_start.scss +++ b/source/style/modules/_start.scss @@ -5,7 +5,7 @@ @extend .sec_main_center; } - #www-search { + #www_search { input[type="text"] { flex: 1; padding: hippie.$padding_basic; diff --git a/source/style/modules/ui/_frame_module.scss b/source/style/modules/ui/_frame_module.scss index 91182ad..9742af3 100755 --- a/source/style/modules/ui/_frame_module.scss +++ b/source/style/modules/ui/_frame_module.scss @@ -9,7 +9,7 @@ } .body_frame { - @extend %flex-column; + @extend %flex_column; background-color: hippie.$color_back_basic; @@ -27,7 +27,7 @@ } main { - @extend %flex-row; + @extend %flex_row; flex: 1; @@ -53,7 +53,7 @@ } section { - @extend %flex-column; + @extend %flex_column; gap: 0; } } @@ -66,12 +66,12 @@ } #cli { - @extend %flex-column; + @extend %flex_column; background-color: black; #line { - @extend %flex-row; + @extend %flex_row; } #prompt { diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss index 4e36346..bc4fbcf 100755 --- a/source/style/modules/ui/_new_module.scss +++ b/source/style/modules/ui/_new_module.scss @@ -6,7 +6,7 @@ $module_top_height: 32px; $body_top_space: $module_top_height + hippie.$space_basic; .body_new { - @extend %flex-column; + @extend %flex_column; padding: $body_top_space hippie.$space_basic hippie.$space_basic; } diff --git a/source/style/ui.scss b/source/style/ui.scss index 1266a3a..8663bfc 100644 --- a/source/style/ui.scss +++ b/source/style/ui.scss @@ -178,7 +178,7 @@ $space_gui_half: hippie.$space_half; background-color: hippie.$color_back_basic; transition: background-color 4s; - &:hover > .mouse-overlay { + &:hover > .mouse_overlay { background-color: transparent !important; transition: background-color hippie.$duration_basic hippie.$timing_basic 0s !important; } From e9c383b41e50eb6b35afb52c24bd07571da5d7b1 Mon Sep 17 00:00:00 2001 From: sthag Date: Tue, 17 Mar 2026 00:45:27 +0100 Subject: [PATCH 3/3] feat: Update table screen - Move logic for rows to cloneRow function - Add random selection of type to loop - Refine row types - Add event for group toggle --- source/screens/demo/examples/ui/table.liquid | 187 ++++++++++++------- source/style/hippie-style | 2 +- 2 files changed, 125 insertions(+), 64 deletions(-) diff --git a/source/screens/demo/examples/ui/table.liquid b/source/screens/demo/examples/ui/table.liquid index 96e72ea..900a84b 100755 --- a/source/screens/demo/examples/ui/table.liquid +++ b/source/screens/demo/examples/ui/table.liquid @@ -62,12 +62,13 @@ tags:
- - + + {% comment %}{% endcomment %} - + - {% comment %}{% endcomment %} @@ -130,14 +131,44 @@ tags: - - + + + + - @@ -226,6 +228,7 @@ tags: tbodyPosition.addEventListener('click', (event) => { const rows = tbodyPosition.querySelectorAll('tr'); const rowTarget = event.target.closest('tr'); + const groupTarget = event.target.closest('[name="group"]'); if (rowTarget && event.button === 0) { for (row of rows) { @@ -234,32 +237,33 @@ tags: rowTarget.classList.add('active'); } + + if (groupTarget && event.button === 0) { + console.log('group'); + let currentRow = groupTarget.closest('tr').nextElementSibling; + + while (currentRow && !currentRow.classList.contains('footer')) { + currentRow.classList.toggle('di_none'); + currentRow = currentRow.nextElementSibling; + } + } }); for (let i = 0; i < 256; i++) { - const clone = cloneRow(); - const tr = clone.querySelector('tr'); - const th = clone.querySelector('th'); - const td = clone.querySelectorAll('td'); + const t = Math.random(); + let type = undefined; - const j = i % placeholderNames.length; - const k = randomIntFrom(0, placeholderContents.length - 1); - const amount = randomIntFrom(1, 100); - const price = randomFloatFrom(1, 10000, 2); - const sum = amount * price; + if (t < .2) { + type = 'default'; + } else if (t >= .2 && t < .4) { + type = 'text'; + } else if (t >= .4 && t < .5) { + type = 'group'; + } else { + type = 'article'; + } - tr.setAttribute('data-id', i); - th.textContent = i + 1; - td[2].textContent = getRandomFormattedString(); - td[3].textContent = placeholderNames[j]; - // td[2].innerHTML = replaceLineBreaks(placeholderContents[k]); - td[4].firstElementChild.textContent = placeholderContents[k]; - td[5].firstElementChild.value = amount; - td[5].firstElementChild.style.width = '4em'; - td[7].textContent = currencyEuro.format(price); - td[8].textContent = currencyEuro.format(sum); - - tbodyPosition.appendChild(clone); + tbodyPosition.appendChild(cloneRow(i, type)); } const selectNum = document.getElementById('sltNum'); @@ -377,11 +381,51 @@ tags: console.debug('Drop'); }); - function cloneRow(type = 'default') { - type = 'row' + capitalizeFirstLetter(type); + function cloneRow(index, type = 'article') { + const id = 'row' + capitalizeFirstLetter(type); - const rowFragment = document.getElementById(type).content; - // TODO: Datenübergabe ergänzen und direkt hier in die Node aufnehmen + const rowFragment = document.getElementById(id).content; + const tr = rowFragment.querySelector('tr'); + const th = rowFragment.querySelector('th'); + const td = rowFragment.querySelectorAll('td'); + + const j = index % placeholderNames.length; + const k = randomIntFrom(0, placeholderContents.length - 1); + const l = Math.random() > .2; + const amount = randomIntFrom(1, 100); + const price = randomFloatFrom(1, 10000, 2); + const sum = amount * price; + + tr.setAttribute('data-id', index); + th.textContent = index + 1; + td[0].querySelector('[name="active"]').checked = l; + // td[2].innerHTML = replaceLineBreaks(placeholderContents[k]); + + switch (type) { + case 'default': + td[2].firstElementChild.style.width = '9ch'; + td[3].firstElementChild.style.width = '6ch'; + td[4].firstElementChild.textContent = placeholderContents[k]; + td[5].firstElementChild.value = amount; + td[5].firstElementChild.style.width = '4em'; + td[7].firstElementChild.style.width = '8ch'; + td[8].textContent = currencyEuro.format(sum); + break; + case 'article': + td[2].textContent = getRandomFormattedString(); + td[3].textContent = placeholderNames[j]; + td[4].firstElementChild.textContent = placeholderContents[k]; + td[5].firstElementChild.value = amount; + td[5].firstElementChild.style.width = '4em'; + td[7].textContent = currencyEuro.format(price); + td[8].textContent = currencyEuro.format(sum); + break; + case 'text': + td[2].firstElementChild.textContent = placeholderContents[k]; + break; + default: + console.debug('No matching type found.'); + } return document.importNode(rowFragment, true); } @@ -395,5 +439,22 @@ tags: th.textContent = i + 1; } } + + function toggleGroup(headerRow) { + // Get the toggle icon + const icon = headerRow.querySelector('.toggle-icon'); + + // Get all rows after this header + let currentRow = headerRow.nextElementSibling; + + // Toggle visibility of group rows until next header + while (currentRow && !currentRow.classList.contains('group-header')) { + currentRow.classList.toggle('hidden'); + currentRow = currentRow.nextElementSibling; + } + + // Toggle the icon rotation + icon.classList.toggle('collapsed'); + } {% endblock %} \ No newline at end of file diff --git a/source/style/hippie-style b/source/style/hippie-style index eb4349f..b42c8cd 160000 --- a/source/style/hippie-style +++ b/source/style/hippie-style @@ -1 +1 @@ -Subproject commit eb4349f9e5fc118d05385c81c7b553252c98f211 +Subproject commit b42c8cdd7e29aff34a108266a72a1be603145984
Index @@ -80,7 +81,7 @@ tags: + + +