feat(in-progress): 메인페이지 기본 반응형 전환.

- full, half 모드
This commit is contained in:
2021-11-27 01:53:00 +09:00
parent b6b28de8e2
commit 93efacbef5
8 changed files with 424 additions and 349 deletions
-100
View File
@@ -1,100 +0,0 @@
@charset "UTF-8";
body {
color:white;
background-color:black;
border-width:1px;
border-color:gray; background-position:center; background-repeat:repeat-y;
}
#container {
width:1000px;
margin: 0 auto;
}
.buttonPlate{
width:1000px;
height:60px;
}
.toolbarButton {
float:left;
background-color:#225500;
color:white;
width:125px;
height:30px;
font-weight:bold;
font-size:13px;
margin:0;
display:block;
}
.commandButton {
float:left;
width:100px;
height:30px;
font-weight:bold;
font-size:13px;
margin:0;
display:block;
}
.commandButton:disabled::before{
content:'【'
}
.commandButton:disabled::after{
content:'】'
}
.commandButton:disabled{
background-color:transparent !important;
color:gray !important;
border-color:transparent !important;
}
.toolbarButton2 {
float:left;
background-color:#225500;
color:magenta;
width:125px;
height:30px;
font-weight:bold;
font-size:13px;
margin:0;
display:block;
}
.nation_info td{
height:18px;
}
#generalTurnSelector{
width:50px;
color:white;
background-color:black;
font-size:13px;
}
#sidebar{
position:fixed;
right:0;
top: 50%;
transform: translateY(-50%);
}
#sidebar button{
/*width:100px;*/
}
.turn_pad{
white-space:nowrap;
font-weight:lighter;
max-width: 162px;
width: 162px;
}
.turn_pad .turn_text{
display:inline-block;
}
-202
View File
@@ -1,202 +0,0 @@
@charset "UTF-8";
/*임시용 */
#container{
width:1000px;
margin:auto;
font-size:13px;
}
/*임시용 끝*/
#message_board{
height:1370px;
position:relative;
}
/*
#message_board section{
overflow-y:auto;
overflow-x:hidden;
}
*/
.msg_plate{
width:100%;
outline-style:solid;
outline-width:1px;
outline-color: gray;
min-height:64px;
font-size:12px;
word-break:break-all;
color:white;
}
.msg_plate_private{
background-color:#5d1e1a;
}
.msg_plate_private.msg_plate_dest{
background-color:#5d461a;
}
.msg_plate_public{
background-color:#141c65;
}
.msg_plate_national, .msg_plate_diplomacy{
background-color:#00582c;
}
.msg_plate_national.msg_plate_dest, .msg_plate_diplomacy.msg_plate_dest {
background-color:#704615;
}
.msg_plate_national.msg_plate_src, .msg_plate_diplomacy.msg_plate_src {
background-color:#70153b;
}
.public_message{
height:667px;
}
.diplomacy_message{
flex: 1;
}
.national_message{
height:667px;
}
.private_message{
flex: 1;
}
.msg_icon{
float:left;
width:64px;
height:64px;
border-right:solid 1px gray;
}
.msg_time{
font-size:0.75em;
font-weight:normal;
}
.msg_header{
font-weight: bold;
margin-bottom:3px;
color:white;
position: relative;
}
.message_input_form{
position:relative;
}
#msg_input{
color:white;
background-color:black;
font-size:12px;
width:715px;
margin:0 2px;
height:20px;
border:solid 1px gray;
}
#msg_submit{
position:absolute;
right:0;
margin-right:2px;
}
#mailbox_list{
float:left;
color:white;
background-color:black;
font-size:12px;
width:160px;
height:20px;
}
.board_header{
color:white;
outline-style:solid;
outline-width:1px;
outline-color: gray;
}
/*
.board_side{
position:absolute;
height:1370px;
width:50%;
overflow-y: hidden;
outline-style:solid;
outline-width:1px;
outline-color: gray;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.board_side > div{
height: 1.2em;
}
*/
.msg_invalid{
color:rgba(255,255,255,0.5);
}
.msg_body{
padding-left:64px;
}
.msg_target{
margin:2px 2px 0 2px;
padding:2px 3px;
display:inline-block;
box-shadow: 2px 2px black;
border-radius: 3px;
}
.btn-delete-msg{
position: absolute;
right: 0;
top: 0;
margin:2px 2px 0 2px;
font-size:8px;
}
/*
.public_message .msg_target{
box-shadow: 2px 2px darkslategrey;
}
*/
.msg_target.msg_bright{
color:black;
}
.msg_target.msg_dark{
color:white;
}
.msg_from_to{
display:inline-block;
}
.msg_content{
margin-left:10px;
margin-right:5px;
overflow:hidden;
}
.msg_prompt{
text-align:right;
margin-top:5px;
margin-right:5px;
}
#mailbox_list option{
color:white;
background-color:black;
}
@@ -1,5 +1,4 @@
<div class="buttonPlate bg1">
<div>
<a href="a_status.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">세력도</button></a>
<a href="a_kingdomList.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">세력일람</button></a>
<a href="a_genList.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">장수일람</button></a>
@@ -8,8 +7,6 @@
<a href="a_hallOfFame.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">명예의전당</button></a>
<a href="a_emperior.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">왕조일람</button></a>
<a href="a_traffic.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">접속량정보</button></a>
</div>
<div>
<a href="/bbs/board" target="_blank"><button type="button" class="toolbarButton2">삼모게시판</button></a>
<a href="/bbs/tip" target="_blank"><button type="button" class="toolbarButton">팁/강좌</button></a>
<a href="/bbs/news" target="_blank"><button type="button" class="toolbarButton">삼국 일보</button></a>
@@ -18,5 +15,4 @@
<a href="/bbs/patch" target="_blank"><button type="button" class="toolbarButton">패치 내역</button></a>
<a href="battle_simulator.php" target="_blank"><button type="button" class="toolbarButton">전투 시뮬레이터</button></a>
<a href="<?=$site?>" target="_blank" class="open-window"><button type="button" class="toolbarButton"><?=$call?></button></a>
</div>
</div>
+18 -19
View File
@@ -100,7 +100,7 @@ $auctionCount = $db->queryFirstField('SELECT count(`no`) FROM auction');
<title><?= $serverName ?>: 메인</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=1024" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<?= WebUtil::printJS('../d_shared/common_path.js') ?>
<?= WebUtil::printJS('dist_js/vendors.js') ?>
<?= WebUtil::printJS('d_shared/base_map.js') ?>
@@ -122,9 +122,8 @@ $auctionCount = $db->queryFirstField('SELECT count(`no`) FROM auction');
<?= WebUtil::printCSS('../e_lib/bootstrap.min.css') ?>
<?= WebUtil::printCSS('../d_shared/common.css') ?>
<?= WebUtil::printCSS('css/common.css') ?>
<?= WebUtil::printCSS('css/main.css') ?>
<?= WebUtil::printCSS('dist_css/main.css') ?>
<?= WebUtil::printCSS('css/map.css') ?>
<?= WebUtil::printCSS('css/msg.css') ?>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Myeongjo|Nanum+Pen+Script" rel="stylesheet">
@@ -133,8 +132,8 @@ $auctionCount = $db->queryFirstField('SELECT count(`no`) FROM auction');
<body class="img_back">
<div id="container">
<div><?= allButton($gameStor->npcmode == 1) ?></div>
<div class="tb_layout bg0" style="width:1000px;">
<div class="row toolbars"><?= allButton($gameStor->npcmode == 1) ?></div>
<div class="tb_layout bg0 row">
<div style="height:50px" id="server_title">
<font size=4>삼국지 모의전투 HiDCHe <?= $serverName . $serverCnt ?>기 (<font color=cyan><?= $scenario ?></font>)</font>
</div>
@@ -234,9 +233,9 @@ $auctionCount = $db->queryFirstField('SELECT count(`no`) FROM auction');
</div>
</div>
<?php endif; ?>
<div class="grid">
<div class="map_zone col" style="width:700px;height:520px;"><?= getMapHtml($mapTheme) ?></div>
<div class="col" id="reservedCommandList" style="width:300px;">
<div id="map_view" >
<div id="mapZone" class="view-item"><?= getMapHtml($mapTheme) ?></div>
<div class="view-item" id="reservedCommandList">
<table width="300" class="tb_layout b2">
<thead>
<tr height="24">
@@ -276,20 +275,20 @@ $auctionCount = $db->queryFirstField('SELECT count(`no`) FROM auction');
<input type=button value='실 행' id="reserveTurn" style='background-color:<?= GameConst::$basecolor2 ?>;color:white;width:110px;font-size:13px;'><input type=button value='갱 신' id='refreshPage' style='background-color:<?= GameConst::$basecolor2 ?>;color:white;width:110px;font-size:13px;'><input type=button value='로비로' onclick="location.replace('../')" style=background-color:<?= GameConst::$basecolor2 ?>;color:white;width:160px;font-size:13px;>
</div>
</div>
<div class="col" style="border:none;text-align:center;"><?= cityInfo($generalObj) ?></div>
<div id="cityInfo" class="view-item" style="border:none;text-align:center;"><?= cityInfo($generalObj) ?></div>
</div>
<div class="row">
<div class="col-6"><?php myNationInfo($generalObj); ?></div>
<div class="col-6"><?php generalInfo($generalObj); ?></div>
<div class="col-lg-6"><?php myNationInfo($generalObj); ?></div>
<div class="col-lg-6"><?php generalInfo($generalObj); ?></div>
</div>
<div class="row"><?= commandButton() ?></div>
<div class="row">
<div class="col-6">
<div class="col-lg-6">
<div><b>장수 동향</b></div>
<div id="general_public_record" style="text-align:left;"><?= formatHistoryToHTML(getGlobalActionLogRecent(15)) ?></div>
</div>
<div class="col-6">
<div class="col-lg-6">
<div><b>개인 기록</b></div>
<div id="general_log" style="text-align:left;"><?= formatHistoryToHTML(getGeneralActionLogRecent($me['no'], 15)) ?></div>
</div>
@@ -310,15 +309,15 @@ $auctionCount = $db->queryFirstField('SELECT count(`no`) FROM auction');
<button id="msg_submit">서신전달&amp;갱신</button><br>
내용 없이 '서신전달&amp;갱신'을 누르면 메세지창이 갱신됩니다.
</div>
<div><?= allButton($gameStor->npcmode == 1) ?></div>
<div class="row toolbars"><?= allButton($gameStor->npcmode == 1) ?></div>
<div id="message_board" class="row">
<div class="col-6 board_side bg0">
<div class="col-lg-6 board_side bg0">
<div class="board_header bg0" id='public_talk_position'>전체 메시지(최고99자)</div>
<section class="public_message">
<button type="button" class="load_old_message btn btn-secondary btn-block" data-msg_type="public">이전 메시지 불러오기</button>
</section>
</div>
<div class="col-6 board_side bg0">
<div class="col-lg-6 board_side bg0">
<div class="board_header bg0">국가 메시지(최고99자)</div>
<section class="national_message">
<button type="button" class="load_old_message btn btn-secondary btn-block" data-msg_type="national">이전 메시지 불러오기</button>
@@ -328,14 +327,14 @@ $auctionCount = $db->queryFirstField('SELECT count(`no`) FROM auction');
<div class="col-6 board_side bg0">
<div class="col-lg-6 board_side bg0">
<div class="board_header bg0" id='secret_talk_position'>개인 메시지(최고99자)</div>
<section class="private_message">
<button type="button" class="load_old_message btn btn-secondary btn-block" data-msg_type="private">이전 메시지 불러오기</button>
</section>
</div>
<div class="col-6 board_side bg0">
<div class="col-lg-6 board_side bg0">
<div class="board_header bg0">외교 메시지(최고99자)</div>
<section class="diplomacy_message">
<button type="button" class="load_old_message btn btn-secondary btn-block" data-msg_type="diplomacy">이전 메시지 불러오기</button>
@@ -343,7 +342,7 @@ $auctionCount = $db->queryFirstField('SELECT count(`no`) FROM auction');
</div>
</div>
</div>
<div><?= allButton($gameStor->npcmode == 1) ?><?= banner() ?></div>
<div class="row toolbars"><?= allButton($gameStor->npcmode == 1) ?><?= banner() ?></div>
</div>
<?php
if ($con == 1) {
+387
View File
@@ -0,0 +1,387 @@
@charset "UTF-8";
@import "./bootstrap5.scss";
body {
color: white;
background-color: black;
border-width: 1px;
border-color: gray;
background-position: center;
background-repeat: repeat-y;
overflow-x: hidden;
}
@include media-breakpoint-up(lg) {
#container {
width: 1000px;
margin: 0 auto;
}
}
@include media-breakpoint-down(lg) {
#container {
width: 100%;
margin: 0 auto;
}
}
#map_view {
display: grid;
}
@include media-breakpoint-up(lg) {
#map_view {
grid-template-columns: 700px 300px;
grid-template-rows: 520px auto;
}
#mapZone {
height: 520px;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
#cityInfo {
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
}
#reservedCommandList {
width: 300px;
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
.buttonPlate {
display: grid;
grid-template-columns: repeat(10, 1fr);
padding: 0;
}
.toolbars>.buttonPlate {
grid-template-columns: repeat(8, 1fr);
}
.buttonPlate>a {
display: block;
text-decoration: none;
}
.commandButton {
width: 100%;
height: 30px;
font-weight: bold;
font-size: 13px;
margin: 0;
display: block;
}
}
@include media-breakpoint-down(lg) {
.buttonPlate {
display: grid;
grid-template-columns: repeat(5, 1fr);
padding: 0;
}
.toolbars>.buttonPlate {
grid-template-columns: repeat(4, 1fr);
}
.buttonPlate>a {
display: block;
text-decoration: none;
}
.commandButton {
width: 100%;
height: 30px;
font-weight: bold;
font-size: 13px;
margin: 0;
display: block;
}
}
.toolbarButton {
float: left;
background-color: #225500;
color: white;
width: 100%;
height: 30px;
font-weight: bold;
font-size: 13px;
margin: 0;
display: block;
}
.commandButton:disabled::before {
content: ''
}
.commandButton:disabled::after {
content: ''
}
.commandButton:disabled {
background-color: transparent !important;
color: gray !important;
border-color: transparent !important;
}
.toolbarButton2 {
float: left;
background-color: #225500;
color: magenta;
width: 100%;
height: 30px;
font-weight: bold;
font-size: 13px;
margin: 0;
display: block;
}
.nation_info td {
height: 18px;
}
#generalTurnSelector {
width: 50px;
color: white;
background-color: black;
font-size: 13px;
}
#sidebar {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
}
#sidebar button {
/*width:100px;*/
}
.turn_pad {
white-space: nowrap;
font-weight: lighter;
max-width: 162px;
width: 162px;
}
.turn_pad .turn_text {
display: inline-block;
}
/*임시용 */
#container{
/*width:1000px;*/
margin:auto;
font-size:13px;
}
/*임시용 끝*/
#message_board{
position:relative;
}
/*
#message_board section{
overflow-y:auto;
overflow-x:hidden;
}
*/
.msg_plate{
width:100%;
outline-style:solid;
outline-width:1px;
outline-color: gray;
min-height:64px;
font-size:12px;
word-break:break-all;
color:white;
}
.msg_plate_private{
background-color:#5d1e1a;
}
.msg_plate_private.msg_plate_dest{
background-color:#5d461a;
}
.msg_plate_public{
background-color:#141c65;
}
.msg_plate_national, .msg_plate_diplomacy{
background-color:#00582c;
}
.msg_plate_national.msg_plate_dest, .msg_plate_diplomacy.msg_plate_dest {
background-color:#704615;
}
.msg_plate_national.msg_plate_src, .msg_plate_diplomacy.msg_plate_src {
background-color:#70153b;
}
.public_message{
min-height:300px;
}
.diplomacy_message{
min-height:300px;
}
.national_message{
min-height:300px;
}
.private_message{
min-height:300px;
}
.msg_icon{
float:left;
width:64px;
height:64px;
border-right:solid 1px gray;
}
.msg_time{
font-size:0.75em;
font-weight:normal;
}
.msg_header{
font-weight: bold;
margin-bottom:3px;
color:white;
position: relative;
}
.message_input_form{
position:relative;
}
#msg_input{
color:white;
background-color:black;
font-size:12px;
margin:0 2px;
height:20px;
border:solid 1px gray;
}
#msg_submit{
position:absolute;
right:0;
margin-right:2px;
}
#mailbox_list{
float:left;
color:white;
background-color:black;
font-size:12px;
width:160px;
height:20px;
}
.board_header{
color:white;
outline-style:solid;
outline-width:1px;
outline-color: gray;
}
/*
.board_side{
position:absolute;
height:1370px;
width:50%;
overflow-y: hidden;
outline-style:solid;
outline-width:1px;
outline-color: gray;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.board_side > div{
height: 1.2em;
}
*/
.msg_invalid{
color:rgba(255,255,255,0.5);
}
.msg_body{
padding-left:64px;
}
.msg_target{
margin:2px 2px 0 2px;
padding:2px 3px;
display:inline-block;
box-shadow: 2px 2px black;
border-radius: 3px;
}
.btn-delete-msg{
position: absolute;
right: 0;
top: 0;
margin:2px 2px 0 2px;
font-size:8px;
}
/*
.public_message .msg_target{
box-shadow: 2px 2px darkslategrey;
}
*/
.msg_target.msg_bright{
color:black;
}
.msg_target.msg_dark{
color:white;
}
.msg_from_to{
display:inline-block;
}
.msg_content{
margin-left:10px;
margin-right:5px;
overflow:hidden;
}
.msg_prompt{
text-align:right;
margin-top:5px;
margin-right:5px;
}
#mailbox_list option{
color:white;
background-color:black;
}
+17 -21
View File
@@ -1,22 +1,18 @@
<div class="buttonPlate bg1">
<div>
<a href="a_status.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">세력</button></a>
<a href="a_kingdomList.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">세력일람</button></a>
<a href="a_genList.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">일람</button></a>
<a href="a_bestGeneral.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">명장일람</button></a>
<a href="a_history.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">연감</button></a>
<a href="a_hallOfFame.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">명예의전당</button></a>
<a href="a_emperior.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">왕조일람</button></a>
<a href="a_traffic.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">접속량정보</button></a>
</div>
<div>
<a href="/bbs/board" target="_blank"><button type="button" class="toolbarButton2">삼모게시판</button></a>
<a href="/bbs/tip" target="_blank"><button type="button" class="toolbarButton">/강좌</button></a>
<a href="/bbs/news" target="_blank"><button type="button" class="toolbarButton">삼국 일보</button></a>
<a href="/bbs/history2" target="_blank"><button type="button" class="toolbarButton">개인 열전</button></a>
<a href="/bbs/history3" target="_blank"><button type="button" class="toolbarButton">국가 열전</button></a>
<a href="/bbs/patch" target="_blank"><button type="button" class="toolbarButton">패치 내역</button></a>
<a href="battle_simulator.php" target="_blank"><button type="button" class="toolbarButton">전투 시뮬레이터</button></a>
<a href="<?=$site?>" target="_blank" class="open-window"><button type="button" class="toolbarButton"><?=$call?></button></a>
</div>
</div>
<a href="a_status.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">세력도</button></a>
<a href="a_kingdomList.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">세력일람</button></a>
<a href="a_genList.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">장수일람</button></a>
<a href="a_bestGeneral.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">장일람</button></a>
<a href="a_history.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">연감</button></a>
<a href="a_hallOfFame.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">명예의전당</button></a>
<a href="a_emperior.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">왕조일람</button></a>
<a href="a_traffic.php" target="_blank" class="open-window"><button type="button" class="toolbarButton">접속량정보</button></a>
<a href="/bbs/board" target="_blank"><button type="button" class="toolbarButton2">삼모게시판</button></a>
<a href="/bbs/tip" target="_blank"><button type="button" class="toolbarButton">/강좌</button></a>
<a href="/bbs/news" target="_blank"><button type="button" class="toolbarButton">삼국 일보</button></a>
<a href="/bbs/history2" target="_blank"><button type="button" class="toolbarButton">개인 열전</button></a>
<a href="/bbs/history3" target="_blank"><button type="button" class="toolbarButton">국가 열전</button></a>
<a href="/bbs/patch" target="_blank"><button type="button" class="toolbarButton">패치 내역</button></a>
<a href="battle_simulator.php" target="_blank"><button type="button" class="toolbarButton">전투 시뮬레이터</button></a>
<a href="<?= $site ?>" target="_blank" class="open-window"><button type="button" class="toolbarButton"><?= $call ?></button></a>
</div>
-3
View File
@@ -1,5 +1,4 @@
<div class='buttonPlate bg2'>
<div>
<a href='v_board.php'><button type="button" class='commandButton' <?=$meLevel>=1?'':'disabled'?> style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>회 의 실</button></a>
<a href='v_board.php?isSecret=true'><button type="button" class='commandButton' <?=$permission>=2?'':'disabled'?> style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>기 밀 실</button></a>
<a href='b_troop.php'><button type="button" class='commandButton' <?=($meLevel>=1&&$nationLevel>=1)?'':'disabled'?> style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>부대 편성</button></a>
@@ -20,6 +19,4 @@
<a href='b_myPage.php'><button type="button" class='commandButton' style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>내 정보&amp;설정</button></a>
<a href='b_auction.php' target='_blank' class="open-window"><button type="button" class='commandButton' style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>거 래 장</button></a>
<a href='b_betting.php' target='_blank' class="open-window"><button type="button" class='commandButton' style='background-color:<?=$bgColor?>;color:<?=$fgColor?>;'>베 팅 장</button></a>
</div>
</div>
+2
View File
@@ -17,6 +17,8 @@ import { joinYearMonth } from './util/joinYearMonth';
import { parseYearMonth } from './util/parseYearMonth';
exportWindow($, '$');
import '../scss/main.scss';
type TurnArg = {
//TODO: 채울것
}