From c67c3e6e8d074b5d0f15945cd95d36005261f648 Mon Sep 17 00:00:00 2001
From: YouWei Zhao <zhao.uv@gmail.com>
Date: Sat, 28 Jul 2018 20:27:00 +0800
Subject: [PATCH] ColMark,RowMark: table->div

---
 _server/css/editor_mobile.css | 56 +++++++++++++++++------------------
 editor-mobile.html            | 20 +++++++++++--
 2 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/_server/css/editor_mobile.css b/_server/css/editor_mobile.css
index 50b7d32a..d5eed943 100644
--- a/_server/css/editor_mobile.css
+++ b/_server/css/editor_mobile.css
@@ -247,20 +247,21 @@ body {
     line-height: 1.2em;
 }
 
-td {
+td, .coltd, .rowtd {
     border: 0.230vw solid #fff;
     color: #fff;
     cursor: crosshair;
 }
 
-table.col {
+table.col, div.col {
     position: relative;
 
     text-align: center;
     border-collapse: collapse;
 }
 
-table.col td {
+table.col td,
+div.col .coltd {
     background-color: #4DB6AC;
 }
 
@@ -277,6 +278,7 @@ table.col td {
 }
 
 #mapColMark {
+    position: absolute;
     top: 0;
     left: 4vw;
     width: 96vw;
@@ -285,41 +287,40 @@ table.col td {
 }
 
 
-#mapColMark td {
+#mapColMark .coltd,
+#mapColMark .coltd .coltext {
+    position: absolute;
     width: 7.15vw;
+    height: 4vw;
+    line-height: 4vw;
     padding: 0;
     border-bottom-width: 0px;
     border-top-width: 0px;
     border-left-width: 0.117307vw;
     border-right-width: 0.117307vw;
 }
-#mapColMark tr > td:nth-child(10){
-    width: 6.86vw;
-}
-#mapColMark tr > td:nth-child(12){
-    width: 6.86vw;
-}
-#mapColMark tr > td:nth-child(13){
-    width: 6.56vw;
-}
 
-#mapColMark td:hover .colBlock {
+#mapColMark .coltd:hover .colBlock {
     position: absolute;
     top: 4vw;
+    left:0;
     height: 96vw;
     width: 7.384615vw;
     z-index: 100;
     background-color: rgba(38, 166, 154, .5);
 }
 
-table.row {
+table.row,div.row,
+table.row,div.row .rowtext {
+    width:4vw;
     position: relative;
     text-align: right;
     vertical-align: middle;
     border-collapse: collapse;
 }
 
-table.row td {
+table.row td,
+div.row .rowtd .rowtext{
     background-color: #4C221B;
 }
 
@@ -332,34 +333,33 @@ table.row td {
 }
 
 #mapRowMark {
-    top: 0;
+    position: absolute;
+    top: 4vw;
     left: 0;
     width: 4vw;
     height: 96vw;
     font-size: 3vw;
 }
 
-#mapRowMark td {
+#mapRowMark .rowtd{
+    position: absolute;
+}
+
+#mapRowMark .rowtd,
+#mapRowMark .rowtd .rowtext{
     height: 7.15vw;
+    line-height: 7.15vw;
     padding: 0;
     border-left-width: 0px;
     border-right-width: 0px;
     border-top-width: 0.117307vw;
     border-bottom-width: 0.117397vw;
 }
-#mapRowMark tbody > tr:nth-child(2n) td {
-    height: 7.25vw;
-}
-#mapRowMark tbody > tr:nth-child(5) td {
-    height: 7.25vw;
-}
-#mapRowMark tbody > tr:nth-child(11) td {
-    height: 7.25vw;
-}
 
-#mapRowMark td:hover .rowBlock {
+#mapRowMark .rowtd:hover .rowBlock {
     position: absolute;
     left: 4vw;
+    top: 0;
     height: 7.384615vw;
     width: 96vw;
     z-index: 100;
diff --git a/editor-mobile.html b/editor-mobile.html
index bae5db44..eae04732 100644
--- a/editor-mobile.html
+++ b/editor-mobile.html
@@ -201,8 +201,8 @@
         </div>
     </div>
     <div id="mid">
-        <table class="col" id='mapColMark'></table>
-        <table class="row" id='mapRowMark'></table>
+        <div class="col" id='mapColMark'></div>
+        <div class="row" id='mapRowMark'></div>
         <div class="map" id="mapEdit">
             <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas>
             <canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
@@ -407,13 +407,27 @@
             colNum += tpl;
         }
         arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
-        mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
+        //mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
         var rowNum = ' ';
         for (var i = 0; i < 13; i++) {
             var tpl = '<tr><td>' + (' '+i).slice(-2).replace(' ','&nbsp;') + '<div class="rowBlock" style="top:' + (i * 96/13 ) + 'vw;"></div></td></tr>';
             rowNum += tpl;
         }
         arrRowMark.innerHTML = rowNum;
+        //mapRowMark.innerHTML = rowNum;
+    })();
+    (function () {
+        var colNum = ' ';
+        for (var i = 0; i < 13; i++) {
+            var tpl = '<div class="coltd" style="left:' + (i * 96/13 ) + 'vw;"><div class="coltext">' + (' '+i).slice(-2).replace(' ','&nbsp;') + '</div><div class="colBlock"></div></div>';
+            colNum += tpl;
+        }
+        mapColMark.innerHTML = '<div class="coltr">' + colNum + '</div>';
+        var rowNum = ' ';
+        for (var i = 0; i < 13; i++) {
+            var tpl = '<div class="rowtr"><div class="rowtd"  style="top:' + (i * 96/13 ) + 'vw;"><div class="rowtext">' + (' '+i).slice(-2).replace(' ','&nbsp;') + '</div><div class="rowBlock"></div></div></div>';
+            rowNum += tpl;
+        }
         mapRowMark.innerHTML = rowNum;
     })();
 </script>