feat: 메인화면의 도시정보를 500px, 700px 가변
This commit is contained in:
+175
-103
@@ -19,7 +19,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-down(md) {
|
@include media-breakpoint-down(md) {
|
||||||
body{
|
body {
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -35,6 +35,37 @@ body {
|
|||||||
display: grid;
|
display: grid;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mainCityInfo {
|
||||||
|
display: grid;
|
||||||
|
border-right: solid 1px gray;
|
||||||
|
border-bottom: solid 1px gray;
|
||||||
|
|
||||||
|
.gPanel {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 2fr;
|
||||||
|
border-top: solid 1px gray;
|
||||||
|
border-left: solid 1px gray;
|
||||||
|
|
||||||
|
.gHead {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cityNamePanel,
|
||||||
|
.nationNamePanel {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
border-top: solid 1px gray;
|
||||||
|
border-left: solid 1px gray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.popPanel {
|
||||||
|
grid-column: 1 / 3;
|
||||||
|
grid-template-columns: 1fr 5fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@include media-breakpoint-up(md) {
|
@include media-breakpoint-up(md) {
|
||||||
#map_view {
|
#map_view {
|
||||||
@@ -58,7 +89,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#routeButtons{
|
#routeButtons {
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-column-end: 2;
|
grid-column-end: 2;
|
||||||
grid-row-start: 3;
|
grid-row-start: 3;
|
||||||
@@ -98,6 +129,31 @@ body {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.mainCityInfo {
|
||||||
|
grid-template-columns: 1fr 1fr 1fr 1fr;
|
||||||
|
|
||||||
|
.cityNamePanel,
|
||||||
|
.nationNamePanel {
|
||||||
|
grid-column: 1 / 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.officer4Panel {
|
||||||
|
grid-column: 4 / 5;
|
||||||
|
grid-row: 3 / 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.officer3Panel {
|
||||||
|
grid-column: 4 / 5;
|
||||||
|
grid-row: 4 / 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.officer2Panel {
|
||||||
|
grid-column: 4 / 5;
|
||||||
|
grid-row: 5 / 6;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@include media-breakpoint-down(md) {
|
@include media-breakpoint-down(md) {
|
||||||
@@ -133,18 +189,18 @@ body {
|
|||||||
grid-row-end: 2;
|
grid-row-end: 2;
|
||||||
|
|
||||||
|
|
||||||
.world_map{
|
.world_map {
|
||||||
width:500px;
|
width: 500px;
|
||||||
height: calc((500px + 20px) * 500 / 700);
|
height: calc((500px + 20px) * 500 / 700);
|
||||||
}
|
}
|
||||||
|
|
||||||
.map_title{
|
.map_title {
|
||||||
transform-origin: 0px 0px;
|
transform-origin: 0px 0px;
|
||||||
transform: scale(calc(500 / 700));
|
transform: scale(calc(500 / 700));
|
||||||
margin-bottom: -20px * 200 / 700;
|
margin-bottom: -20px * 200 / 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.map_body{
|
.map_body {
|
||||||
transform-origin: 0px 0px;
|
transform-origin: 0px 0px;
|
||||||
transform: scale(calc(500 / 700));
|
transform: scale(calc(500 / 700));
|
||||||
}
|
}
|
||||||
@@ -158,7 +214,7 @@ body {
|
|||||||
grid-row-end: 3;
|
grid-row-end: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
#routeButtons{
|
#routeButtons {
|
||||||
grid-column-start: 1;
|
grid-column-start: 1;
|
||||||
grid-column-end: 2;
|
grid-column-end: 2;
|
||||||
grid-row-start: 3;
|
grid-row-start: 3;
|
||||||
@@ -172,6 +228,16 @@ body {
|
|||||||
grid-row-start: 4;
|
grid-row-start: 4;
|
||||||
grid-row-end: 5;
|
grid-row-end: 5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.mainCityInfo {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
|
||||||
|
.cityNamePanel,
|
||||||
|
.nationNamePanel {
|
||||||
|
grid-column: 1 / 4;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbarButton {
|
.toolbarButton {
|
||||||
@@ -246,127 +312,133 @@ body {
|
|||||||
|
|
||||||
/*임시용 */
|
/*임시용 */
|
||||||
|
|
||||||
#container{
|
#container {
|
||||||
/*width:1000px;*/
|
/*width:1000px;*/
|
||||||
margin:auto;
|
margin: auto;
|
||||||
font-size:13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*임시용 끝*/
|
/*임시용 끝*/
|
||||||
|
|
||||||
#message_board{
|
#message_board {
|
||||||
position:relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
#message_board section{
|
#message_board section{
|
||||||
overflow-y:auto;
|
overflow-y:auto;
|
||||||
overflow-x:hidden;
|
overflow-x:hidden;
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
.msg_plate{
|
.msg_plate {
|
||||||
width:100%;
|
width: 100%;
|
||||||
outline-style:solid;
|
outline-style: solid;
|
||||||
outline-width:1px;
|
outline-width: 1px;
|
||||||
outline-color: gray;
|
outline-color: gray;
|
||||||
min-height:64px;
|
min-height: 64px;
|
||||||
font-size:12px;
|
font-size: 12px;
|
||||||
word-break:break-all;
|
word-break: break-all;
|
||||||
color:white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_plate_private{
|
.msg_plate_private {
|
||||||
background-color:#5d1e1a;
|
background-color: #5d1e1a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_plate_private.msg_plate_dest{
|
.msg_plate_private.msg_plate_dest {
|
||||||
background-color:#5d461a;
|
background-color: #5d461a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_plate_public{
|
.msg_plate_public {
|
||||||
background-color:#141c65;
|
background-color: #141c65;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_plate_national, .msg_plate_diplomacy{
|
.msg_plate_national,
|
||||||
background-color:#00582c;
|
.msg_plate_diplomacy {
|
||||||
|
background-color: #00582c;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_plate_national.msg_plate_dest, .msg_plate_diplomacy.msg_plate_dest {
|
.msg_plate_national.msg_plate_dest,
|
||||||
background-color:#704615;
|
.msg_plate_diplomacy.msg_plate_dest {
|
||||||
|
background-color: #704615;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_plate_national.msg_plate_src, .msg_plate_diplomacy.msg_plate_src {
|
.msg_plate_national.msg_plate_src,
|
||||||
background-color:#70153b;
|
.msg_plate_diplomacy.msg_plate_src {
|
||||||
|
background-color: #70153b;
|
||||||
}
|
}
|
||||||
|
|
||||||
.public_message{
|
.public_message {
|
||||||
min-height:300px;
|
min-height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.diplomacy_message{
|
.diplomacy_message {
|
||||||
min-height:300px;
|
min-height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.national_message{
|
.national_message {
|
||||||
min-height:300px;
|
min-height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.private_message{
|
.private_message {
|
||||||
min-height:300px;
|
min-height: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_icon{
|
.msg_icon {
|
||||||
float:left;
|
float: left;
|
||||||
width:64px;
|
width: 64px;
|
||||||
height:64px;
|
height: 64px;
|
||||||
border-right:solid 1px gray;
|
border-right: solid 1px gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_time{
|
.msg_time {
|
||||||
font-size:0.75em;
|
font-size: 0.75em;
|
||||||
font-weight:normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_header{
|
.msg_header {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom:3px;
|
margin-bottom: 3px;
|
||||||
color:white;
|
color: white;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message_input_form{
|
.message_input_form {
|
||||||
position:relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#msg_input{
|
#msg_input {
|
||||||
color:white;
|
color: white;
|
||||||
background-color:black;
|
background-color: black;
|
||||||
font-size:12px;
|
font-size: 12px;
|
||||||
margin:0 2px;
|
margin: 0 2px;
|
||||||
height:20px;
|
height: 20px;
|
||||||
border:solid 1px gray;
|
border: solid 1px gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
#msg_submit{
|
#msg_submit {
|
||||||
position:absolute;
|
position: absolute;
|
||||||
right:0;
|
right: 0;
|
||||||
margin-right:2px;
|
margin-right: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mailbox_list{
|
#mailbox_list {
|
||||||
float:left;
|
float: left;
|
||||||
color:white;
|
color: white;
|
||||||
background-color:black;
|
background-color: black;
|
||||||
font-size:12px;
|
font-size: 12px;
|
||||||
width:160px;
|
width: 160px;
|
||||||
height:20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.board_header{
|
.board_header {
|
||||||
color:white;
|
color: white;
|
||||||
outline-style:solid;
|
outline-style: solid;
|
||||||
outline-width:1px;
|
outline-width: 1px;
|
||||||
outline-color: gray;
|
outline-color: gray;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
.board_side{
|
.board_side{
|
||||||
position:absolute;
|
position:absolute;
|
||||||
@@ -384,28 +456,28 @@ body {
|
|||||||
height: 1.2em;
|
height: 1.2em;
|
||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
.msg_invalid{
|
.msg_invalid {
|
||||||
color:rgba(255,255,255,0.5);
|
color: rgba(255, 255, 255, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_body{
|
.msg_body {
|
||||||
padding-left:64px;
|
padding-left: 64px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_target{
|
.msg_target {
|
||||||
margin:2px 2px 0 2px;
|
margin: 2px 2px 0 2px;
|
||||||
padding:2px 3px;
|
padding: 2px 3px;
|
||||||
display:inline-block;
|
display: inline-block;
|
||||||
box-shadow: 2px 2px black;
|
box-shadow: 2px 2px black;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-delete-msg{
|
.btn-delete-msg {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
margin:2px 2px 0 2px;
|
margin: 2px 2px 0 2px;
|
||||||
font-size:8px;
|
font-size: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@@ -414,31 +486,31 @@ body {
|
|||||||
}
|
}
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.msg_target.msg_bright{
|
.msg_target.msg_bright {
|
||||||
color:black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_target.msg_dark{
|
.msg_target.msg_dark {
|
||||||
color:white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_from_to{
|
.msg_from_to {
|
||||||
display:inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_content{
|
.msg_content {
|
||||||
margin-left:10px;
|
margin-left: 10px;
|
||||||
margin-right:5px;
|
margin-right: 5px;
|
||||||
overflow:hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.msg_prompt{
|
.msg_prompt {
|
||||||
text-align:right;
|
text-align: right;
|
||||||
margin-top:5px;
|
margin-top: 5px;
|
||||||
margin-right:5px;
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#mailbox_list option{
|
#mailbox_list option {
|
||||||
color:white;
|
color: white;
|
||||||
background-color:black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
@@ -1,47 +1,48 @@
|
|||||||
<table style='width:100%;' class='tb_layout bg2'>
|
<div style='width:100%;' class='tb_layout bg2 mainCityInfo'>
|
||||||
<tr><td colspan=8 style='text-align:center;height:20px;color:<?=$nationTextColor?>;background-color:<?=$nationColor?>;font-weight:bold;font-size:13px;'>【 <?=$region?> | <?=$levelText?> 】 <?=$name?></td></tr>
|
<div class="cityNamePanel" style="color:<?= $nationTextColor ?>;background-color:<?= $nationColor ?>;"><div>【 <?= $region ?> | <?= $levelText ?> 】 <?= $name ?></div></div>
|
||||||
<tr><td colspan=8 style='text-align:center;height:20px;color:<?=$nationTextColor?>;background-color:<?=$nationColor?>'><b><?=$nationName?"지배 국가 【 {$nationName} 】":'공 백 지'?></b></td>
|
<div class="nationNamePanel" style="color:<?= $nationTextColor ?>;background-color:<?= $nationColor ?>;"><?= $nationName ? "지배 국가 【 {$nationName} 】" : '공 백 지' ?></div>
|
||||||
</tr>
|
<div class="gPanel popPanel">
|
||||||
<tr>
|
<div class="gHead bg1">주민</div>
|
||||||
<td rowspan=2 style='text-align:center;' class='bg1'><b>주민</b></td>
|
<div class="gBody"><?= $this->bar($pop / $pop_max * 100) ?><?= $pop ?>/<?= $pop_max ?></div>
|
||||||
<td height=7 colspan=3><?=$this->bar($pop/$pop_max*100)?></td>
|
</div>
|
||||||
<td rowspan=2 style='text-align:center;' class='bg1'><b>민심</b></td>
|
<div class="gPanel trustPanel">
|
||||||
<td height=7><?=$this->bar($trust)?></td>
|
<div class="gHead bg1">민심</div>
|
||||||
<td rowspan=2 style='text-align:center;' class='bg1'><b>태수</b></td>
|
<div class="gBody"><?= $this->bar($trust) ?><?= round($trust, 1) ?></div>
|
||||||
<td rowspan=2 style='text-align:center;'><?=$officerName[4]?></td>
|
</div>
|
||||||
</tr>
|
<div class="gPanel agriPanel">
|
||||||
<tr>
|
<div class="gHead bg1">농업</div>
|
||||||
<td colspan=3 style='text-align:center;'><?=$pop?>/<?=$pop_max?></td>
|
<div class="gBody"><?= $this->bar($agri / $agri_max * 100) ?><?= $agri ?>/<?= $agri_max ?></div>
|
||||||
<td style='text-align:center;'><?=round($trust, 1)?></td>
|
</div>
|
||||||
</tr>
|
<div class="gPanel commPanel">
|
||||||
<tr>
|
<div class="gHead bg1">상업</div>
|
||||||
<td width=50 rowspan=2 style='text-align:center;' class='bg1'><b>농업</b></td>
|
<div class="gBody"><?= $this->bar($comm / $comm_max * 100) ?><?= $comm ?>/<?= $comm_max ?></div>
|
||||||
<td width=100 height=7><?=$this->bar($agri/$agri_max*100)?></td>
|
</div>
|
||||||
<td width=50 rowspan=2 style='text-align:center;' class='bg1'><b>상업</b></td>
|
<div class="gPanel secuPanel">
|
||||||
<td width=100 height=7><?=$this->bar($comm/$comm_max*100)?></td>
|
<div class="gHead bg1">치안</div>
|
||||||
<td width=50 rowspan=2 style='text-align:center;' class='bg1'><b>치안</b></td>
|
<div class="gBody"><?= $this->bar($secu / $secu_max * 100) ?><?= $secu ?>/<?= $secu_max ?></div>
|
||||||
<td width=100 height=7><?=$this->bar($secu/$secu_max*100)?></td>
|
</div>
|
||||||
<td width=50 rowspan=2 style='text-align:center;' class='bg1'><b>군사</b></td>
|
<div class="gPanel defPanel">
|
||||||
<td rowspan=2 style='text-align:center;'><?=$officerName[3]?></td>
|
<div class="gHead bg1">수비</div>
|
||||||
</tr>
|
<div class="gBody"><?= $this->bar($def / $def_max * 100) ?><?= $def ?>/<?= $def_max ?></div>
|
||||||
<tr>
|
</div>
|
||||||
<td style='text-align:center;'><?=$agri?>/<?=$agri_max?></td>
|
<div class="gPanel wallPanel">
|
||||||
<td style='text-align:center;'><?=$comm?>/<?=$comm_max?></td>
|
<div class="gHead bg1">성벽</div>
|
||||||
<td style='text-align:center;'><?=$secu?>/<?=$secu_max?></td>
|
<div class="gBody"><?= $this->bar($wall / $wall_max * 100) ?><?= $wall ?>/<?= $wall_max ?></div>
|
||||||
</tr>
|
</div>
|
||||||
<tr>
|
<div class="gPanel tradePanel">
|
||||||
<td rowspan=2 style='text-align:center;' class='bg1'><b>수비</b></td>
|
<div class="gHead bg1">시세</div>
|
||||||
<td height=7><?=$this->bar($def/$def_max*100)?></td>
|
<div class="gBody"><?= $this->bar(($trade - 95) * 10) ?><?= $trade ? "{$trade}%" : '상인없음' ?></div>
|
||||||
<td rowspan=2 style='text-align:center;' class='bg1'><b>성벽</b></td>
|
</div>
|
||||||
<td height=7><?=$this->bar($wall/$wall_max*100)?></td>
|
<div class="gPanel officer4Panel">
|
||||||
<td rowspan=2 style='text-align:center;' class='bg1'><b>시세</b></td>
|
<div class="gHead bg1">태수</div>
|
||||||
<td height=7><?=$this->bar(($trade-95)*10)?></td>
|
<div class="gBody"><?= $officerName[4] ?></div>
|
||||||
<td rowspan=2 style='text-align:center;' class='bg1'><b>종사</b></td>
|
</div>
|
||||||
<td rowspan=2 style='text-align:center;'><?=$officerName[2]?></td>
|
<div class="gPanel officer3Panel">
|
||||||
</tr>
|
<div class="gHead bg1">군사</div>
|
||||||
<tr>
|
<div class="gBody"><?= $officerName[3] ?></div>
|
||||||
<td style='text-align:center;'><?=$def?>/<?=$def_max?></td>
|
</div>
|
||||||
<td style='text-align:center;'><?=$wall?>/<?=$wall_max?></td>
|
<div class="gPanel officer2Panel">
|
||||||
<td style='text-align:center;'><?=$trade?"{$trade}%":'상인없음'?></td>
|
<div class="gHead bg1">종사</div>
|
||||||
</tr>
|
<div class="gBody"><?= $officerName[2] ?></div>
|
||||||
</table>
|
</div>
|
||||||
|
</div>
|
||||||
+1
-1
@@ -537,7 +537,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$objs.on('touchend', function (e) {
|
$objs.on('touchend', function () {
|
||||||
if (window.sam_toggleSingleTap) {
|
if (window.sam_toggleSingleTap) {
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user