FIX: Desktop touchscreens and allow edits on mobileView (#32)

javascripts/discourse/api-initializers/table-editor.js

@@ -10,8 +10,6 @@ import { parseAsync } from "discourse/lib/text";
 import { tokenRange } from "../discourse-table-builder/lib/utilities";
 
 export default apiInitializer("0.11.1", (api) => {
-  const site = api.container.lookup("service:site");
-
   function createButton() {
     const openPopupBtn = document.createElement("button");
     openPopupBtn.classList.add(
@@ -53,10 +51,6 @@ export default apiInitializer("0.11.1", (api) => {
 
   function generatePopups(tables, attrs) {
     tables.forEach((table, index) => {
-      if (site.isMobileDevice) {
-        return;
-      }
-
       const popupBtn = createButton();
       popupBtn.setAttribute("data-table-id", index); // sets a table id so each table can be distinctly edited
       table.parentNode.classList.add("fullscreen-table-wrapper");

scss/post/table-edit-decorator.scss

@@ -10,3 +10,32 @@
   -ms-user-select: none;
   user-select: none;
 }
+
+.fullscreen-table-wrapper:hover .btn-edit-table {
+  opacity: 100%;
+}
+
+.mobile-view {
+  .btn-edit-table {
+    display: none;
+  }
+
+  .fullscreen-table-wrapper {
+    position: relative;
+    border: 1px solid transparent;
+
+    &:hover {
+      border: 1px solid var(--primary-low);
+      table {
+        opacity: 0.5;
+      }
+      .btn-edit-table {
+        z-index: 2;
+        display: block;
+        position: absolute;
+        top: 1rem;
+        left: 1rem;
+      }
+    }
+  }
+}