From a5f150944021b4389ba16fa40c9482f77380edfb Mon Sep 17 00:00:00 2001
From: Tony Air <tony@twma.pro>
Date: Mon, 7 Aug 2023 18:59:32 +0200
Subject: [PATCH] IMPR: Mobile friendly tables

---
 src/js/layout/index.js     | 30 +++++++++++++++++++++++++-----
 src/scss/types/editor.scss | 10 +++++++++-
 2 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/js/layout/index.js b/src/js/layout/index.js
index d4ba198..d2967ab 100644
--- a/src/js/layout/index.js
+++ b/src/js/layout/index.js
@@ -1,19 +1,18 @@
 import Events from '../_events'
 
-const LayoutUI = ((W) => {
+const LayoutUI = ((window) => {
   const NAME = '_layout'
-  const D = document
 
   const initFonts = () => {
     console.log(`${NAME}: initFonts`)
 
-    const css = D.createElement('link')
+    const css = document.createElement('link')
     css.rel = 'stylesheet'
     css.type = 'text/css'
     css.media = 'all'
     css.href =
       'https://fonts.googleapis.com/css?family=Roboto:ital,wght@0,400;0,700;1,400&display=swap'
-    D.getElementsByTagName('head')[0].appendChild(css)
+    document.getElementsByTagName('head')[0].appendChild(css)
   }
 
   const initAnalytics = () => {
@@ -42,9 +41,30 @@ const LayoutUI = ((W) => {
                 ga('send', 'pageview'); */
   }
 
-  W.addEventListener(`${Events.LOADED}`, () => {
+  // set attributes for mobile friendly tables
+  const initMobileTables = () => {
+    document.querySelectorAll('.typography table').forEach((el) => {
+      const header = el.querySelector('thead tr:first-child')
+      if (!header) {
+        return
+      }
+      header.classList.add('d-typography-breakpoint-none')
+
+      header.querySelectorAll('td').forEach((h) => {
+        el.querySelectorAll(`td:eq(${i})`)
+        .forEach((el) => {
+          if (!el.dataset.label) {
+            el.dataset.label = h.innerText
+          }
+        });
+      });
+    });
+  }
+
+  window.addEventListener(`${Events.LOADED}`, () => {
     initFonts()
     initAnalytics()
+    initMobileTables()
   })
 })(window)
 export default LayoutUI
diff --git a/src/scss/types/editor.scss b/src/scss/types/editor.scss
index 2de16ec..4c8ab7d 100755
--- a/src/scss/types/editor.scss
+++ b/src/scss/types/editor.scss
@@ -249,7 +249,7 @@ img {
         display: flex;
         flex-direction: column;
 
-        &:before {
+        &[data-label]:before {
             font-weight: bold;
             display: block;
             width: 50%;
@@ -276,3 +276,11 @@ img {
         left: 0;
     }
 }
+
+img:last-child {
+  margin-bottom: 0!important;
+}
+
+.table-none tr:last-child > td {
+  padding-bottom: 0;
+}