From 7028ba06604b901e1e449346502f2fcae7cccfda Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Thu, 27 Oct 2022 10:52:40 -0700
Subject: [PATCH] FIX: Desktop touchscreens and allow edits on mobileView (#32)

---
 .../api-initializers/table-editor.js          |  6 ----
 scss/post/table-edit-decorator.scss           | 29 +++++++++++++++++++
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/javascripts/discourse/api-initializers/table-editor.js b/javascripts/discourse/api-initializers/table-editor.js
index 9846584..1e8b75d 100644
--- a/javascripts/discourse/api-initializers/table-editor.js
+++ b/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");
diff --git a/scss/post/table-edit-decorator.scss b/scss/post/table-edit-decorator.scss
index 4099586..6cb276b 100644
--- a/scss/post/table-edit-decorator.scss
+++ b/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;
+      }
+    }
+  }
+}