From 88d645e5d8cccd1bab739f33b646e783a3409ed0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tomi=20Valentov=C3=A1?= <git@imaniti.org>
Date: Mon, 22 Jul 2024 17:09:55 +0200
Subject: [PATCH] nicer table styles
---
.../patterns/atoms/table/popout_table.html | 56 +++++++++++++++----
.../templates/patterns/atoms/table/table.html | 15 ++++-
src/css/molecules/card_box.pcss | 4 +-
src/js/components/PopoutTable.vue | 9 ++-
4 files changed, 67 insertions(+), 17 deletions(-)
diff --git a/majak_uistyleguide/templates/patterns/atoms/table/popout_table.html b/majak_uistyleguide/templates/patterns/atoms/table/popout_table.html
index 923d855..5d0d3f0 100644
--- a/majak_uistyleguide/templates/patterns/atoms/table/popout_table.html
+++ b/majak_uistyleguide/templates/patterns/atoms/table/popout_table.html
@@ -1,23 +1,59 @@
<div class="__js-root">
<ui-popout-table sizing-classes="max-w-[100ch] w-full" :open-by-default="false">
<template slot="head">
- <tr class="bg-black [&_*]:!text-white [&_*]:!pt-2">
- <th>Company</th>
- <th>Contact</th>
- <th>Country</th>
+ <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
+ <th>
+ <p>
+ Company
+ </p>
+ </th>
+ <th>
+ <p>
+ Contact
+ </p>
+ </th>
+ <th>
+ <p>
+ Country
+ </p>
+ </th>
</tr>
</template>
<template slot="body">
<tr>
- <td>Alfreds Futterkiste</td>
- <td>Maria Anders</td>
- <td>Germany</td>
+ <td>
+ <p>
+ Alfreds Futterkiste
+ </p>
+ </td>
+ <td>
+ <p>
+ Maria Anders
+ </p>
+ </td>
+ <td>
+ <p>
+ Germany
+ </p>
+ </td>
</tr>
<tr>
- <td>Centro comercial Moctezuma</td>
- <td>Francisco Chang</td>
- <td>Mexico</td>
+ <td>
+ <p>
+ Centro comercial Moctezuma
+ </p>
+ </td>
+ <td>
+ <p>
+ Francisco Chang
+ </p>
+ </td>
+ <td>
+ <p>
+ Mexico
+ </p>
+ </td>
</tr>
</template>
</ui-popout-table>
diff --git a/majak_uistyleguide/templates/patterns/atoms/table/table.html b/majak_uistyleguide/templates/patterns/atoms/table/table.html
index 9b4f4a7..714d6f7 100644
--- a/majak_uistyleguide/templates/patterns/atoms/table/table.html
+++ b/majak_uistyleguide/templates/patterns/atoms/table/table.html
@@ -1,14 +1,19 @@
<div class="my-6 prose max-w-[100ch]">
<table>
<thead>
- <tr class="bg-black [&_*]:!text-white [&_*]:!pt-2">
+ <tr class="bg-black [&_*]:!text-white [&_p]:py-0 [&_p]:my-0 [&_>_th]:py-2">
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
- <tbody>
+ <tbody
+ class="
+ w-full duration-200 [&_p]:py-0 [&_p]:my-0 [&_td]:py-2 [&_td]:align-middle
+ [&_tr:nth-child(even)]:bg-grey-50
+ "
+ >
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
@@ -17,7 +22,11 @@
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
- <td>Mexico</td>
+ <td>
+ A<br>
+ B<br>
+ C<br>
+ </td>
</tr>
</tbody>
</table>
diff --git a/src/css/molecules/card_box.pcss b/src/css/molecules/card_box.pcss
index ddd5afe..f638b39 100644
--- a/src/css/molecules/card_box.pcss
+++ b/src/css/molecules/card_box.pcss
@@ -1,10 +1,10 @@
.flip-card {
- .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ &.prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0.75rem;
margin-bottom: 0.75rem;
}
- .prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
+ &.prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
diff --git a/src/js/components/PopoutTable.vue b/src/js/components/PopoutTable.vue
index 5b4fe22..8d8b60b 100644
--- a/src/js/components/PopoutTable.vue
+++ b/src/js/components/PopoutTable.vue
@@ -1,12 +1,14 @@
<template>
<table :class="'duration-200 my-6 prose ' + $props.sizingClasses">
+ <slot name="caption"></slot>
+
<thead class="relative w-full duration-200">
<slot name="head"></slot>
<div class="absolute top-0 right-[-60px]">
<button
ref="togglerButton"
- class="w-12 h-12 rounded-full bg-white hover:bg-grey-125 duration-150 flex justify-center items-center"
+ class="w-10 h-10 rounded-full bg-white hover:bg-grey-125 duration-150 flex justify-center items-center"
@click="$data.isOpen = !$data.isOpen"
>
<i
@@ -23,7 +25,10 @@
<tbody
v-if="$data.isOpen"
- class="w-full duration-200"
+ class="
+ w-full duration-200 [&_p]:py-0 [&_p]:my-0 [&_td]:py-2 [&_td]:align-middle
+ [&_tr:nth-child(even)]:bg-grey-50
+ "
>
<slot name="body"></slot>
</tbody>
--
GitLab