jianghe2nd/mota-js
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

ColMark,RowMark: table->div

Browse Source
This commit is contained in:
YouWei Zhao 2018-07-28 20:27:00 +08:00
parent 667448800f
commit c67c3e6e8d
2 changed files with 45 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
_server/css/editor_mobile.css
View File

@ -247,20 +247,21 @@ body {
line-height: 1.2em; line-height: 1.2em;
} }
td { td, .coltd, .rowtd {
border: 0.230vw solid #fff; border: 0.230vw solid #fff;
color: #fff; color: #fff;
cursor: crosshair; cursor: crosshair;
} }
table.col { table.col, div.col {
position: relative; position: relative;
text-align: center; text-align: center;
border-collapse: collapse; border-collapse: collapse;
} }
table.col td { table.col td,
div.col .coltd {
background-color: #4DB6AC; background-color: #4DB6AC;
} }
@ -277,6 +278,7 @@ table.col td {
} }
#mapColMark { #mapColMark {
position: absolute;
top: 0; top: 0;
left: 4vw; left: 4vw;
width: 96vw; width: 96vw;
@ -285,41 +287,40 @@ table.col td {
} }
#mapColMark td { #mapColMark .coltd,
#mapColMark .coltd .coltext {
position: absolute;
width: 7.15vw; width: 7.15vw;
height: 4vw;
line-height: 4vw;
padding: 0; padding: 0;
border-bottom-width: 0px; border-bottom-width: 0px;
border-top-width: 0px; border-top-width: 0px;
border-left-width: 0.117307vw; border-left-width: 0.117307vw;
border-right-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; position: absolute;
top: 4vw; top: 4vw;
left:0;
height: 96vw; height: 96vw;
width: 7.384615vw; width: 7.384615vw;
z-index: 100; z-index: 100;
background-color: rgba(38, 166, 154, .5); background-color: rgba(38, 166, 154, .5);
} }
table.row { table.row,div.row,
table.row,div.row .rowtext {
width:4vw;
position: relative; position: relative;
text-align: right; text-align: right;
vertical-align: middle; vertical-align: middle;
border-collapse: collapse; border-collapse: collapse;
} }
table.row td { table.row td,
div.row .rowtd .rowtext{
background-color: #4C221B; background-color: #4C221B;
} }
@ -332,34 +333,33 @@ table.row td {
} }
#mapRowMark { #mapRowMark {
top: 0; position: absolute;
top: 4vw;
left: 0; left: 0;
width: 4vw; width: 4vw;
height: 96vw; height: 96vw;
font-size: 3vw; font-size: 3vw;
} }
#mapRowMark td { #mapRowMark .rowtd{
position: absolute;
}
#mapRowMark .rowtd,
#mapRowMark .rowtd .rowtext{
height: 7.15vw; height: 7.15vw;
line-height: 7.15vw;
padding: 0; padding: 0;
border-left-width: 0px; border-left-width: 0px;
border-right-width: 0px; border-right-width: 0px;
border-top-width: 0.117307vw; border-top-width: 0.117307vw;
border-bottom-width: 0.117397vw; 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; position: absolute;
left: 4vw; left: 4vw;
top: 0;
height: 7.384615vw; height: 7.384615vw;
width: 96vw; width: 96vw;
z-index: 100; z-index: 100;

20
editor-mobile.html
View File

@ -201,8 +201,8 @@
</div> </div>
</div> </div>
<div id="mid"> <div id="mid">
<table class="col" id='mapColMark'></table> <div class="col" id='mapColMark'></div>
<table class="row" id='mapRowMark'></table> <div class="row" id='mapRowMark'></div>
<div class="map" id="mapEdit"> <div class="map" id="mapEdit">
<canvas class='gameCanvas' id='bg' width='416' height='416'></canvas> <canvas class='gameCanvas' id='bg' width='416' height='416'></canvas>
<canvas class='gameCanvas' id='event' width='416' height='416'></canvas> <canvas class='gameCanvas' id='event' width='416' height='416'></canvas>
@ -407,13 +407,27 @@
colNum += tpl; colNum += tpl;
} }
arrColMark.innerHTML = '<tr>' + colNum + '</tr>'; arrColMark.innerHTML = '<tr>' + colNum + '</tr>';
mapColMark.innerHTML = '<tr>' + colNum + '</tr>'; //mapColMark.innerHTML = '<tr>' + colNum + '</tr>';
var rowNum = ' '; var rowNum = ' ';
for (var i = 0; i < 13; i++) { 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>'; var tpl = '<tr><td>' + (' '+i).slice(-2).replace(' ','&nbsp;') + '<div class="rowBlock" style="top:' + (i * 96/13 ) + 'vw;"></div></td></tr>';
rowNum += tpl; rowNum += tpl;
} }
arrRowMark.innerHTML = rowNum; 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; mapRowMark.innerHTML = rowNum;
})(); })();
</script> </script>