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

feat: Change table classes

Browse source
This commit is contained in:
sthag 2026-02-21 14:09:10 +01:00
parent 2d3c049d40
commit 5765207e51
4 changed files with 29 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

10
source/screens/demo/basics.liquid
View file

@ -631,7 +631,7 @@ tags:
<div class="exp_pop"> <div class="exp_pop">
<code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code> <code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code>
</div> </div>
<table class="table_blank float_space_left js_pop"> <table class="blank float_space_left js_pop">
<tr> <tr>
<td>Mit</td> <td>Mit</td>
<td>ohne</td> <td>ohne</td>
@ -641,12 +641,12 @@ tags:
</tr> </tr>
</table> </table>
<div class="exp_pop"> <div class="exp_pop">
<code class="code_solo">table.table_blank>tr>td*2^tr>td[colspan=2]</code> <code class="code_solo">table.blank>tr>td*2^tr>td[colspan=2]</code>
</div> </div>
</div> </div>
<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre <p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre
Zellverteilung:</p> Zellverteilung:</p>
<table class="width_full table_fix js_pop"> <table class="width_full fix js_pop">
<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption> <caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
<thead> <thead>
<tr> <tr>
@ -684,7 +684,7 @@ tags:
</tfoot> </tfoot>
</table> </table>
<div class="exp_pop"> <div class="exp_pop">
<code class="code_solo">table.width_full.table_fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code> <code class="code_solo">table.width_full.fix>caption+thead>tr>th[scope="col"]*3^^tbody>(tr>td*3)*3^^tfoot>tr>th[scope="row"]+td*2</code>
</div> </div>
<p>Viele weitere Formate sind möglich.</p> <p>Viele weitere Formate sind möglich.</p>
</article> </article>
@ -738,7 +738,7 @@ tags:
</p> </p>
<div class="overflow"> <div class="overflow">
<div class="float_left"> <div class="float_left">
<table class="table_fix table_blank"> <table class="fix blank">
<tr> <tr>
<td> <td>
<label for="demo__raw_a">Alpha:</label> <label for="demo__raw_a">Alpha:</label>

10
source/screens/demo/components.liquid
View file

@ -189,8 +189,8 @@ tags:
<pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre> <pre>// table // caption // colgroup // col // tbody // thead // tfoot // tr // td // th</pre>
<h2>&lt;table&gt;</h2> <h2>&lt;table&gt;</h2>
<h4>Varianten</h4> <h4>Varianten</h4>
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre> <pre class="pre_code"><code>table.width_full.fix>(thead>tr>th.cell_pre[scope="col"]+th[scope="col"]*3)+tbody>tr>td.cell_pre+td*3</code></pre>
<table class="width_full table_fix"> <table class="width_full fix">
<thead> <thead>
<tr> <tr>
<th class="cell_pre" scope="col"></th> <th class="cell_pre" scope="col"></th>
@ -220,8 +220,8 @@ tags:
</tr> </tr>
</tbody> </tbody>
</table> </table>
<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre> <pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
<table class="width_full table_stripe table_fix table_free"> <table class="width_full stripe fix free">
<tr> <tr>
<td>Tabelle</td> <td>Tabelle</td>
<td></td> <td></td>
@ -243,7 +243,7 @@ tags:
<td>Streifen</td> <td>Streifen</td>
</tr> </tr>
</table> </table>
<pre class="pre_code"><code>table.width_full.table_fix>(thead>tr>th[scope="col"]*3)+(tbody>tr>td*2+td.txt_right)+tfoot>tr>th[colspan="2"]+td.txt_right</code></pre> <pre class="pre_code"><code>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</code></pre>
<table> <table>
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption> <caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
<thead> <thead>

33
source/screens/demo/layouts.liquid
View file

@ -7,7 +7,7 @@ tags:
{% block title %}Gestaltungen{% endblock %} {% block title %}Gestaltungen{% endblock %}
{% block main %} {% block main %}
<section class="sec_main_center"> <section class="sec_main_center">
<header class="header_txt"> <header class="header_txt">
<h1>Sammlung formatierter Elemente</h1> <h1>Sammlung formatierter Elemente</h1>
@ -100,7 +100,9 @@ tags:
<pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre> <pre class="pre_code"><code>header.header_page>h1+p+nav.nav_separate_right>ul>(li>a.a_button{nav $})*4^+nav.nav_right>ul>(li>a.a_button{nav $})*4</code></pre>
<header class="header_page demo__header header_fancy"> <header class="header_page demo__header header_fancy">
<h1>Aufmacher</h1> <h1>Aufmacher</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio, volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec consectetur diam. Sed nisl odio,
volutpat nec nisi sit amet, commodo faucibus est. Donec lacinia vestibulum sapien. Morbi porttitor nibh
quis imperdiet scelerisque. Praesent rutrum quam eu sodales luctus.</p>
<nav class="nav_separate_right"> <nav class="nav_separate_right">
<ul> <ul>
<li> <li>
@ -137,7 +139,8 @@ tags:
</nav> </nav>
</header> </header>
<div class="pos_abs pin_bottom width_full"> <div class="pos_abs pin_bottom width_full">
<pre class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre> <pre
class="pre_code"><code>footer.pos_abs.pin_bottom>nav.nav_column>ul>(li>a.a_button_text)*4</code></pre>
<footer id="js_demo_stop" class="demo_footer"> <footer id="js_demo_stop" class="demo_footer">
<nav class="nav_column nav_separate"> <nav class="nav_column nav_separate">
<ul> <ul>
@ -246,8 +249,8 @@ tags:
</div> </div>
<h2>Tabellen</h2> <h2>Tabellen</h2>
<pre class="pre_code"><code>table.table_link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.cell_icon[rowspan="2"]>img[width=16 height=16]^+td.cell_link>a[target=_blank]{name}+a[target=_blank]{url}^+td.cell_date[rowspan="2"]{yyy-mm-dd}^tr>td.cell_text>div.shorten{beschreibung})*2</code></pre> <pre class="pre_code"><code>table.link>thead>tr>th{&amp;nbsp;}+th{ab / zy}+th{neu / alt}^^(tbody>tr>td.icon[rowspan="2"]>img[width=16 height=16]^+td.link>span{name}+a[target=_blank]{url}^+td[rowspan="2"]{yyy-mm-dd}^tr>td.text>div.shorten{beschreibung})*2</code></pre>
<table class="table_link js_pop"> <table class="link js_pop">
<thead> <thead>
<tr> <tr>
<th>&nbsp;</th> <th>&nbsp;</th>
@ -257,30 +260,30 @@ tags:
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td class="cell_icon" rowspan="2">■</td> <td class="icon" rowspan="2">■</td>
<td class="cell_link"> <td class="link">
<a href="" target="_blank">Name</a> <span>Name</span>
<a href="" target="_blank">URL</a> <a href="" target="_blank">URL</a>
</td> </td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td> <td rowspan="2">YYYY-MM-DD</td>
</tr> </tr>
<tr> <tr>
<td class="cell_text"> <td class="text">
<div class="shorten">Beschreibung</div> <div class="shorten">Beschreibung</div>
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody> <tbody>
<tr> <tr>
<td class="cell_icon" rowspan="2">■</td> <td class="icon" rowspan="2">■</td>
<td class="cell_link"> <td class="link">
<a href="" target="_blank">Name</a> <span>Name</span>
<a href="" target="_blank">URL</a> <a href="" target="_blank">URL</a>
</td> </td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td> <td rowspan="2">YYYY-MM-DD</td>
</tr> </tr>
<tr> <tr>
<td class="cell_text"> <td class="text">
<div class="shorten">Beschreibung</div> <div class="shorten">Beschreibung</div>
</td> </td>
</tr> </tr>

2
source/style/hippie-style

@ -1 +1 @@
Subproject commit 91d136f1c310c6276ecb2f4318f468f842099816 Subproject commit 69535d87ac38cbe210ed40f6c2b9952b67b8ce5f