devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

feat: 내 정보/설정 페이지 반응형, 500px/1000px 설정

Browse Source
This commit is contained in:
Hide_D
2021-12-16 02:26:07 +09:00
parent fa7c7794d0
commit 2767bf70d9
4 changed files with 195 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/b_myPage.php
+67 -56
View File
@@ -48,7 +48,7 @@ $use_auto_nation_turn = $me->getAuxVar('use_auto_nation_turn') ?? 1;
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=1024" /> <meta name="viewport" content="width=500" />
<title><?= UniqueConst::$serverName ?>: 내정보</title> <title><?= UniqueConst::$serverName ?>: 내정보</title>
<script> <script>
var availableDieImmediately = <?= $availableDieImmediately ? 'true' : 'false' ?>; var availableDieImmediately = <?= $availableDieImmediately ? 'true' : 'false' ?>;
@@ -56,22 +56,24 @@ $use_auto_nation_turn = $me->getAuxVar('use_auto_nation_turn') ?? 1;
<?= WebUtil::printCSS('../d_shared/common.css') ?> <?= WebUtil::printCSS('../d_shared/common.css') ?>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css" />
<?= WebUtil::printJS('../d_shared/common_path.js') ?> <?= WebUtil::printJS('../d_shared/common_path.js') ?>
<?= WebUtil::printDist('ts', ['common', 'myPage']) ?> <?= WebUtil::printDist('ts', ['myPage']) ?>
</head> </head>
<body> <body>
<table align=center width=1000 class='tb_layout bg0'> <div id="container" class="bg0">
<tr> <div class="row gx-0">
<td>내 정 보<br><?= backButton() ?></td> <div class="col">내 정 보<br><?= backButton() ?></div>
</tr> </div>
</table> <div class="row gx-0">
<table align=center width=1000 class='tb_layout bg0'> <div class="col col-12 col-md-6">
<tr> <div class="row">
<td width=50%> <div class="col"><?php generalInfo($me); ?><?php generalInfo2($me); ?></div>
<?php generalInfo($me); ?> </div>
<?php generalInfo2($me); ?> </div>
</td>
<td width=50% valign=top style="padding-left:4ch;"> <div class="col col-12 col-md-6">
<div class="row">
<div class="col" style='padding-left:4ch;'>
토너먼트 【 토너먼트 【
<input type=radio class='tnmt' name=tnmt value=0 <?= $me->getVar('tnmt') == 0 ? "checked" : ""; ?>>수동참여 <input type=radio class='tnmt' name=tnmt value=0 <?= $me->getVar('tnmt') == 0 ? "checked" : ""; ?>>수동참여
<input type=radio class='tnmt' name=tnmt value=1 <?= $me->getVar('tnmt') == 1 ? "checked" : ""; ?>>자동참여 <input type=radio class='tnmt' name=tnmt value=1 <?= $me->getVar('tnmt') == 1 ? "checked" : ""; ?>>자동참여
@@ -138,58 +140,67 @@ $use_auto_nation_turn = $me->getAuxVar('use_auto_nation_turn') ?? 1;
개인용 CSS<br> 개인용 CSS<br>
<textarea id='custom_css' style='color:white;background-color:black;width:420px;height:150px;'></textarea> <textarea id='custom_css' style='color:white;background-color:black;width:420px;height:150px;'></textarea>
</td> </div>
</tr> </div>
<tr> </div>
<td align=center class='bg1'> <div class="col col-12 col-md-6">
<font color=skyblue size=3>개인 기록</font> <div class="row gx-0">
</td> <div class="col bg1 text-center">
<td align=center class='bg1'> <h4 style='color:skyblue'>개인 기록</h4>
<font color=orange size=3>전투 기록</font> </div>
</td> </div>
</tr> <div class="row gx-0">
<tr>
<td valign=top>
<div id='generalActionPlate'> <div id='generalActionPlate'>
<?= formatHistoryToHTML(getGeneralActionLogRecent($generalID, 24), 'generalAction') ?> <?= formatHistoryToHTML(getGeneralActionLogRecent($generalID, 24), 'generalAction') ?>
</div> </div>
<button type="button" class="load_old_log btn btn-secondary btn-block" data-log_type="generalAction">이전 로그 불러오기</button> <button type="button" class="load_old_log btn btn-secondary" data-log_type="generalAction">이전 로그 불러오기</button>
</td> </div>
<td valign=top> </div>
<div class="col col-12 col-md-6">
<div class="row gx-0">
<div class="col bg1 text-center">
<h4 style='color:orange'>전투 기록</h4>
</div>
</div>
<div class="row gx-0">
<div id='battleDetailPlate'> <div id='battleDetailPlate'>
<?= formatHistoryToHTML(getBattleDetailLogRecent($generalID, 24), 'battleDetail') ?> <?= formatHistoryToHTML(getBattleDetailLogRecent($generalID, 24), 'battleDetail') ?>
</div> </div>
<button type="button" class="load_old_log btn btn-secondary btn-block" data-log_type="battleDetail">이전 로그 불러오기</button> <button type="button" class="load_old_log btn btn-secondary" data-log_type="battleDetail">이전 로그 불러오기</button>
</td> </div>
</tr> </div>
<tr>
<td align=center class='bg1'> <div class="col col-12 col-md-6">
<font color=skyblue size=3>장수 열전</font> <div class="row gx-0">
</td> <div class="col bg1 text-center">
<td align=center class='bg1'> <h4 style='color:skyblue'>장수 열전</h4>
<font color=orange size=3>전투 결과</font> </div>
</td> </div>
</tr> <div class="row gx-0">
<tr>
<td valign=top>
<?= formatHistoryToHTML(getGeneralHistoryLogAll($generalID)) ?> <?= formatHistoryToHTML(getGeneralHistoryLogAll($generalID)) ?>
</td> </div>
<td valign=top> </div>
<div class="col col-12 col-md-6">
<div class="row gx-0">
<div class="col bg1 text-center">
<h4 style='color:orange'>전투 결과</h4>
</div>
</div>
<div class="row gx-0">
<div id='battleResultPlate'> <div id='battleResultPlate'>
<?= formatHistoryToHTML(getBattleResultRecent($generalID, 24), 'battleResult') ?> <?= formatHistoryToHTML(getBattleResultRecent($generalID, 24), 'battleResult') ?>
</div> </div>
<button type="button" class="load_old_log btn btn-secondary btn-block" data-log_type="battleResult">이전 로그 불러오기</button> <button type="button" class="load_old_log btn btn-secondary" data-log_type="battleResult">이전 로그 불러오기</button>
</td> </div>
</tr> </div>
</table> </div>
<table align=center width=1000 class='tb_layout bg0'> <div class="row gx-0">
<tr> <div class="col "><?= backButton() ?></div>
<td><?= backButton() ?></td> </div>
</tr> <div class="row bg0 gx-0">
<tr> <div class="col bg0"><?= banner() ?></div>
<td><?= banner() ?></td> </div>
</tr> </div>
</table>
</body> </body>
</html> </html>
hwe/scss/myPage.scss
+33
View File
@@ -0,0 +1,33 @@
@import "./common/break_500px.scss";
@import "./common/bootstrap5.scss";
@import "./common_legacy.scss";
@include media-breakpoint-up(md) {
#container {
width: 1000px;
margin: 0 auto;
> .row > .col, .layout-block{
border-left: solid 1px gray;
border-right: solid 1px gray;
border-top: solid 1px gray;
}
}
}
@include media-breakpoint-down(md) {
body {
overflow-x: hidden;
}
#container {
width: 500px;
margin: 0 auto;
margin-bottom: 100px;
}
}
hwe/ts/myPage.ts
+9 -3
View File
@@ -1,11 +1,13 @@
import "@scss/myPage.scss";
import axios from 'axios'; import axios from 'axios';
import $ from 'jquery'; import $ from 'jquery';
import { InvalidResponse, keyScreenMode } from '@/defs'; import { InvalidResponse, keyScreenMode, ScreenModeType } from '@/defs';
import { convertFormData } from '@util/convertFormData'; import { convertFormData } from '@util/convertFormData';
import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest'; import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
import { unwrap } from '@util/unwrap'; import { unwrap } from '@util/unwrap';
import { unwrap_any } from '@util/unwrap_any'; import { unwrap_any } from '@util/unwrap_any';
import { auto500px } from './util/auto500px';
type LogResponse = { type LogResponse = {
@@ -109,7 +111,9 @@ $(function ($) {
const $screenModeRadios = $('input:radio[name=screenMode]'); const $screenModeRadios = $('input:radio[name=screenMode]');
$screenModeRadios.prop('checked', false).filter(`[value="${localStorage.getItem(keyScreenMode)??'auto'}"]`).prop('checked', true); $screenModeRadios.prop('checked', false).filter(`[value="${localStorage.getItem(keyScreenMode)??'auto'}"]`).prop('checked', true);
$screenModeRadios.on('click', function(e){ $screenModeRadios.on('click', function(e){
localStorage.setItem(keyScreenMode, (e.target as HTMLInputElement).value); const mode = (e.target as HTMLInputElement).value as ScreenModeType;
localStorage.setItem(keyScreenMode, mode);
document.dispatchEvent(new CustomEvent('tryChangeScreenMode'));
}); });
@@ -210,3 +214,5 @@ $(function ($) {
}); });
}); });
auto500px();
hwe/ts/util/auto500px.ts
+19 -7
View File
@@ -5,6 +5,7 @@ import { keyScreenMode, ScreenModeType } from "@/defs";
export function auto500px(targetHeight = 700): void { export function auto500px(targetHeight = 700): void {
let deviceWidth = -1; let deviceWidth = -1;
let viewportMeta!: HTMLMetaElement; let viewportMeta!: HTMLMetaElement;
let oldMode: ScreenModeType = 'auto';
function init() { function init() {
@@ -23,14 +24,9 @@ export function auto500px(targetHeight = 700): void {
} }
function adjustViewportWidth() { function adjustViewportWidth() {
if (deviceWidth == window.screen.availWidth) {
return;
}
deviceWidth = window.screen.availWidth;
const innerHeight = window.innerHeight;
const selectorHeight = targetHeight;
const screenMode = (localStorage.getItem(keyScreenMode) as ScreenModeType)??'auto'; const screenMode = (localStorage.getItem(keyScreenMode) as ScreenModeType)??'auto';
if(screenMode != oldMode){
oldMode = screenMode;
if(screenMode == '500px'){ if(screenMode == '500px'){
viewportMeta.content = 'width=500'; viewportMeta.content = 'width=500';
return; return;
@@ -41,6 +37,19 @@ export function auto500px(targetHeight = 700): void {
return; return;
} }
if(screenMode == 'auto'){
deviceWidth = -1;
}
}
if (deviceWidth == window.screen.availWidth) {
return;
}
deviceWidth = window.screen.availWidth;
const innerHeight = window.innerHeight;
const selectorHeight = targetHeight;
if (deviceWidth < 500) { if (deviceWidth < 500) {
viewportMeta.content = 'width=500'; viewportMeta.content = 'width=500';
return; return;
@@ -69,5 +78,8 @@ export function auto500px(targetHeight = 700): void {
adjustViewportWidth(); adjustViewportWidth();
window.addEventListener('scroll', adjustViewportWidth, true); window.addEventListener('scroll', adjustViewportWidth, true);
window.addEventListener('orientationchange', adjustViewportWidth, true); window.addEventListener('orientationchange', adjustViewportWidth, true);
document.addEventListener('tryChangeScreenMode', adjustViewportWidth, false);
}); });
} }