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">
<code class="code_solo">table>tr>td*2^tr>td[colspan=2]</code>
</div>
<table class="table_blank float_space_left js_pop">
<table class="blank float_space_left js_pop">
<tr>
<td>Mit</td>
<td>ohne</td>
@ -641,12 +641,12 @@ tags:
</tr>
</table>
<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>
<p>Die nächste Tabelle verwendet alle zur Auszeichnung verfügbaren Elemente und hat eine starre
Zellverteilung:</p>
<table class="width_full table_fix js_pop">
<table class="width_full fix js_pop">
<caption>Beschreibung bzw. Zusammenhang der Tabelle</caption>
<thead>
<tr>
@ -684,7 +684,7 @@ tags:
</tfoot>
</table>
<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>
<p>Viele weitere Formate sind möglich.</p>
</article>
@ -738,7 +738,7 @@ tags:
</p>
<div class="overflow">
<div class="float_left">
<table class="table_fix table_blank">
<table class="fix blank">
<tr>
<td>
<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>
<h2>&lt;table&gt;</h2>
<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>
<table class="width_full table_fix">
<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 fix">
<thead>
<tr>
<th class="cell_pre" scope="col"></th>
@ -220,8 +220,8 @@ tags:
</tr>
</tbody>
</table>
<pre class="pre_code"><code>table.width_full.table_stripe.table_fix.table_free>tr>td*3</code></pre>
<table class="width_full table_stripe table_fix table_free">
<pre class="pre_code"><code>table.width_full.stripe.fix.free>tr>td*3</code></pre>
<table class="width_full stripe fix free">
<tr>
<td>Tabelle</td>
<td></td>
@ -243,7 +243,7 @@ tags:
<td>Streifen</td>
</tr>
</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>
<caption>Die Verteilung der Zellen ist hier von ihrem Inhalt abhängig.</caption>
<thead>

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

@ -7,7 +7,7 @@ tags:
{% block title %}Gestaltungen{% endblock %}
{% block main %}
{% block main %}
<section class="sec_main_center">
<header class="header_txt">
<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>
<header class="header_page demo__header header_fancy">
<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">
<ul>
<li>
@ -137,7 +139,8 @@ tags:
</nav>
</header>
<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">
<nav class="nav_column nav_separate">
<ul>
@ -246,8 +249,8 @@ tags:
</div>
<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>
<table class="table_link js_pop">
<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="link js_pop">
<thead>
<tr>
<th>&nbsp;</th>
@ -257,30 +260,30 @@ tags:
</thead>
<tbody>
<tr>
<td class="cell_icon" rowspan="2">■</td>
<td class="cell_link">
<a href="" target="_blank">Name</a>
<td class="icon" rowspan="2">■</td>
<td class="link">
<span>Name</span>
<a href="" target="_blank">URL</a>
</td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
<td rowspan="2">YYYY-MM-DD</td>
</tr>
<tr>
<td class="cell_text">
<td class="text">
<div class="shorten">Beschreibung</div>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td class="cell_icon" rowspan="2">■</td>
<td class="cell_link">
<a href="" target="_blank">Name</a>
<td class="icon" rowspan="2">■</td>
<td class="link">
<span>Name</span>
<a href="" target="_blank">URL</a>
</td>
<td class="cell_date" rowspan="2">YYYY-MM-DD</td>
<td rowspan="2">YYYY-MM-DD</td>
</tr>
<tr>
<td class="cell_text">
<td class="text">
<div class="shorten">Beschreibung</div>
</td>
</tr>

2
source/style/hippie-style

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