feedback

src/client/js/util/markdown-it/table-with-handsontable-button.js

@@ -8,7 +8,7 @@ export default class TableWithHandsontableButtonConfigurer {
     md.renderer.rules.table_open = (tokens, idx) => {
       const beginLine = tokens[idx].map[0] + 1;
       const endLine  = tokens[idx].map[1];
-      return `<div class="editable-with-handsontable"><button onClick="crowi.launchHandsontableModal('page', ${beginLine}, ${endLine})"><i class="icon-note"></i></button><table class="table table-bordered">`;
+      return `<div class="editable-with-handsontable"><button class="handsontable-modal-trigger" onClick="crowi.launchHandsontableModal('page', ${beginLine}, ${endLine})"><i class="icon-note"></i></button><table class="table table-bordered">`;
     };
 
     md.renderer.rules.table_close = (tokens, idx) => {

src/client/styles/scss/_page.scss

@@ -80,28 +80,6 @@
   #page-status-alert .myadmin-alert {
     display: block;
   }
-
-  // table with handsontable modal button
-  .editable-with-handsontable {
-    position: relative;
-
-    button {
-      display: none;
-    }
-
-    &:hover button {
-      display: block;
-      position: absolute;
-      top: 11px;
-      right: 10px;
-      padding: 0;
-      border: none;
-      background-color: transparent;
-      font-size: 16px;
-      line-height: 1;
-      vertical-align: bottom;
-    }
-  }
 }
 
 .main-container .main .content-main .revision-history { // {{{
@@ -150,6 +128,35 @@
 
 } // }}}
 
+
+/**
+ * for table with handsontable modal button
+ */
+.editable-with-handsontable {
+  position: relative;
+
+  .handsontable-modal-trigger {
+    opacity: 0;
+    position: absolute;
+    top: 11px;
+    right: 10px;
+    padding: 0;
+    border: none;
+    background-color: transparent;
+    font-size: 16px;
+    line-height: 1;
+    vertical-align: bottom;
+  }
+
+  .page-mobile & .handsontable-modal-trigger {
+    opacity: 0.3;
+  }
+
+  &:hover .handsontable-modal-trigger {
+    opacity: 1;
+  }
+}
+
 /*
  * for Presentation
  */