add popout tables

shared/blocks/__init__.py

@@ -25,6 +25,14 @@ DEFAULT_CONTENT_BLOCKS = [
             label="Tabulka",
         ),
     ),
+    (
+        "popout_table",
+        TableBlock(
+            template="styleguide2/includes/atoms/table/popout_table.html",
+            group="3. Ostatní",
+            label="Rozbalovací tabulka",
+        ),
+    ),
     ("gallery", GalleryBlock(label="Galerie")),
     ("figure", FigureBlock()),
     ("card", CardBlock()),

shared/templates/styleguide2/includes/atoms/table/aligned_table.html

 {% load table_block_tags shared_filters %}
 
-<div class="my-6 prose"
-  style="max-width: unset">
+<div
+  class="
+    my-6 prose
+
+    {% if not page.root_page.content_is_full_width %}
+      max-w-[100ch]
+    {% else %}
+      max-w-[100%]
+    {% endif %}
+
+    {% if page.root_page.content_is_centered %}
+      mx-auto
+    {% endif %}
+  "
+>
   <table
-    class="max-w-prose"
     style="
       {% comment %}TODO{% endcomment %}
 
@@ -24,7 +36,7 @@
 
     {% if table_header %}
       <thead>
-        <tr>
+        <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
           {% for column in table_header %}
             {% with forloop.counter0 as col_index %}
               <th scope="col" {% cell_classname 0 col_index %}>
@@ -38,7 +50,7 @@
       </thead>
     {% endif %}
 
-    <tbody>
+    <tbody class="w-full duration-200 [&_p]:py-0 [&_p]:my-0 [&_td]:py-2">
       {% for row in table.data %}
         {% with forloop.counter0 as row_index %}
           <tr>
@@ -64,4 +76,4 @@
       {% endfor %}
     </tbody>
   </table>
-</div>
+</div>
\ No newline at end of file

shared/templates/styleguide2/includes/atoms/table/popout_table.html

+{% load table_block_tags shared_filters %}
+
+{% if table_caption %}
+  <caption class="head-heavy-sm my-4">{{ table_caption }}</caption>
+{% endif %}
+
+<div class="__js-root">
+  <ui-popout-table sizing-classes="max-w-[100ch] w-full" :open-by-default="false">
+    {% if table_caption %}
+      <template slot="caption">
+        <caption class="head-heavy-sm my-4">{{ table_caption }}</caption>
+      </template>
+    {% endif %}
+
+    {% if table_header %}
+      <template slot="head">
+        <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
+          {% for column in table_header %}
+            {% with forloop.counter0 as col_index %}
+              <th scope="col" {% cell_classname 0 col_index %}>
+                {% if column.strip %}
+                  {{ column.strip|markdown }}
+                {% endif %}
+              </th>
+            {% endwith %}
+          {% endfor %}
+        </tr>
+      </template>
+    {% endif %}
+
+    <template slot="body">
+      {% for row in data %}
+        {% with forloop.counter0 as row_index %}
+          <tr>
+            {% for column in row %}
+              {% with forloop.counter0 as col_index %}
+                {% if first_col_is_header and forloop.first %}
+                  <th scope="row" {% cell_classname row_index col_index table_header %}>
+                    {% if column.strip %}
+                      {{ column.strip|markdown }}
+                    {% endif %}
+                  </th>
+                {% else %}
+                  <td {% cell_classname row_index col_index table_header %}>
+                    {% if column.strip %}
+                      {{ column.strip|markdown }}
+                    {% endif %}
+                  </td>
+                {% endif %}
+              {% endwith %}
+            {% endfor %}
+          </tr>
+        {% endwith %}
+      {% endfor %}
+    </template>
+  </ui-popout-table>
+</div>
\ No newline at end of file

shared/templates/styleguide2/includes/atoms/table/table.html

 {% load table_block_tags shared_filters %}
 
-<div class="my-6 prose">
+<div
+  class="
+    my-6 prose
+
+    {% if not page.root_page.content_is_full_width %}
+      max-w-[100ch]
+    {% else %}
+      max-w-[100%]
+    {% endif %}
+
+    {% if page.root_page.content_is_centered %}
+      mx-auto
+    {% endif %}
+  "
+>
   <table>
     {% if table_caption %}
       <caption class="head-heavy-sm my-4">{{ table_caption }}</caption>
     {% endif %}
+
     {% if table_header %}
       <thead>
-        <tr>
+        <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
           {% for column in table_header %}
             {% with forloop.counter0 as col_index %}
               <th scope="col" {% cell_classname 0 col_index %}>
@@ -20,7 +35,8 @@
         </tr>
       </thead>
     {% endif %}
-    <tbody>
+    
+    <tbody class="w-full duration-200 [&_p]:py-0 [&_p]:my-0 [&_td]:py-2">
       {% for row in data %}
         {% with forloop.counter0 as row_index %}
           <tr>
@@ -46,4 +62,4 @@
       {% endfor %}
     </tbody>
   </table>
-</div>
+</div>
\ No newline at end of file