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;
}
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;

20
editor-mobile.html
View File

@ -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>