wrap tables serverside

jbampton · May 1, 2023 · 3da8176 · 3da8176
1 parent 532bdd3
commit 3da8176
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/modules/common/src/main/MarkdownRender.scala b/modules/common/src/main/MarkdownRender.scala
@@ -2,7 +2,7 @@ package lila.common
 
 import com.vladsch.flexmark.ext.autolink.AutolinkExtension
 import com.vladsch.flexmark.ext.gfm.strikethrough.StrikethroughExtension
-import com.vladsch.flexmark.ext.tables.TablesExtension
+import com.vladsch.flexmark.ext.tables.{ TablesExtension, TableBlock }
 import com.vladsch.flexmark.html.{
   AttributeProvider,
   HtmlRenderer,
@@ -26,6 +26,7 @@ import com.vladsch.flexmark.util.html.MutableAttributes
 import com.vladsch.flexmark.ast.{ AutoLink, Image, Link, LinkNode }
 import io.mola.galimatias.URL
 import java.util.Arrays
+import scala.collection.Set
 import scala.jdk.CollectionConverters.*
 import scala.util.Try
 import com.vladsch.flexmark.util.misc.Extension
@@ -45,7 +46,9 @@ final class MarkdownRender(
 ):
 
   private val extensions = java.util.ArrayList[Extension]()
-  if (table) extensions.add(TablesExtension.create())
+  if (table)
+    extensions.add(TablesExtension.create())
+    extensions.add(MarkdownRender.tableWrapperExtension)
   if (strikeThrough) extensions.add(StrikethroughExtension.create())
   if (autoLink)
     extensions.add(AutolinkExtension.create())
@@ -271,3 +274,19 @@ object MarkdownRender:
       if ((node.isInstanceOf[Link] || node.isInstanceOf[AutoLink]) && part == AttributablePart.LINK)
         attributes.replaceValue("rel", rel).unit
         attributes.replaceValue("href", RawHtml.removeUrlTrackingParameters(attributes.getValue("href"))).unit
+
+  private val tableWrapperExtension = new HtmlRenderer.HtmlRendererExtension:
+    override def rendererOptions(options: MutableDataHolder) = ()
+    override def extend(builder: HtmlRenderer.Builder, rendererType: String) = builder.nodeRendererFactory(
+      new NodeRendererFactory:
+        override def apply(options: DataHolder) = new NodeRenderer:
+          override def getNodeRenderingHandlers() = Set(
+            new NodeRenderingHandler(
+              classOf[TableBlock],
+              (node: TableBlock, context: NodeRendererContext, html: HtmlWriter) =>
+                html.withAttr().attr("class", "slist-wrapper").tag("div")
+                context.delegateRender();
+                html.tag("/div")
+            )
+          ).asJava
+    )
diff --git a/ui/common/css/component/_slist.scss b/ui/common/css/component/_slist.scss
@@ -2,6 +2,10 @@
   width: 100%;
   border-bottom: $border;
 
+  @include breakpoint($mq-not-x-small) {
+    min-width: 640px;
+  }
+
   thead {
     @extend %metal, %roboto;
 
@@ -56,3 +60,8 @@
     }
   }
 }
+
+.slist-wrapper {
+  overflow-x: auto;
+  max-width: 100vw;
+}
diff --git a/ui/site/src/site.ts b/ui/site/src/site.ts
@@ -74,17 +74,6 @@ lichess.load.then(() => {
       }, 200);
     });
 
-    if (window.matchMedia('(max-width: 650px)').matches) {
-      $('table.slist')
-        .css('min-width', '640px')
-        .each(function (this: HTMLTableElement) {
-          const container = document.createElement('div');
-          container.style.overflowX = 'auto';
-          container.style.maxWidth = '100vw';
-          this.replaceWith(container);
-          container.appendChild(this);
-        });
-    }
     powertip.watchMouse();
 
     setTimeout(() => {