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>
<meta charset="UTF-8">
<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>
<script>
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') ?>
<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::printDist('ts', ['common', 'myPage']) ?>
<?= WebUtil::printDist('ts', ['myPage']) ?>
</head>
<body>
<table align=center width=1000 class='tb_layout bg0'>
<tr>
<td>내 정 보<br><?= backButton() ?></td>
</tr>
</table>
<table align=center width=1000 class='tb_layout bg0'>
<tr>
<td width=50%>
<?php generalInfo($me); ?>
<?php generalInfo2($me); ?>
</td>
<td width=50% valign=top style="padding-left:4ch;">
<div id="container" class="bg0">
<div class="row gx-0">
<div class="col">내 정 보<br><?= backButton() ?></div>
</div>
<div class="row gx-0">
<div class="col col-12 col-md-6">
<div class="row">
<div class="col"><?php generalInfo($me); ?><?php generalInfo2($me); ?></div>
</div>
</div>
<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=1 <?= $me->getVar('tnmt') == 1 ? "checked" : ""; ?>>자동참여
@@ -138,58 +140,67 @@ $use_auto_nation_turn = $me->getAuxVar('use_auto_nation_turn') ?? 1;
개인용 CSS<br>
<textarea id='custom_css' style='color:white;background-color:black;width:420px;height:150px;'></textarea>
</td>
</tr>
<tr>
<td align=center class='bg1'>
<font color=skyblue size=3>개인 기록</font>
</td>
<td align=center class='bg1'>
<font color=orange size=3>전투 기록</font>
</td>
</tr>
<tr>
<td valign=top>
</div>
</div>
</div>
<div class="col col-12 col-md-6">
<div class="row gx-0">
<div class="col bg1 text-center">
<h4 style='color:skyblue'>개인 기록</h4>
</div>
</div>
<div class="row gx-0">
<div id='generalActionPlate'>
<?= formatHistoryToHTML(getGeneralActionLogRecent($generalID, 24), 'generalAction') ?>
</div>
<button type="button" class="load_old_log btn btn-secondary btn-block" data-log_type="generalAction">이전 로그 불러오기</button>
</td>
<td valign=top>
<button type="button" class="load_old_log btn btn-secondary" data-log_type="generalAction">이전 로그 불러오기</button>
</div>
</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'>
<?= formatHistoryToHTML(getBattleDetailLogRecent($generalID, 24), 'battleDetail') ?>
</div>
<button type="button" class="load_old_log btn btn-secondary btn-block" data-log_type="battleDetail">이전 로그 불러오기</button>
</td>
</tr>
<tr>
<td align=center class='bg1'>
<font color=skyblue size=3>장수 열전</font>
</td>
<td align=center class='bg1'>
<font color=orange size=3>전투 결과</font>
</td>
</tr>
<tr>
<td valign=top>
<button type="button" class="load_old_log btn btn-secondary" data-log_type="battleDetail">이전 로그 불러오기</button>
</div>
</div>
<div class="col col-12 col-md-6">
<div class="row gx-0">
<div class="col bg1 text-center">
<h4 style='color:skyblue'>장수 열전</h4>
</div>
</div>
<div class="row gx-0">
<?= formatHistoryToHTML(getGeneralHistoryLogAll($generalID)) ?>
</td>
<td valign=top>
</div>
</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'>
<?= formatHistoryToHTML(getBattleResultRecent($generalID, 24), 'battleResult') ?>
</div>
<button type="button" class="load_old_log btn btn-secondary btn-block" data-log_type="battleResult">이전 로그 불러오기</button>
</td>
</tr>
</table>
<table align=center width=1000 class='tb_layout bg0'>
<tr>
<td><?= backButton() ?></td>
</tr>
<tr>
<td><?= banner() ?></td>
</tr>
</table>
<button type="button" class="load_old_log btn btn-secondary" data-log_type="battleResult">이전 로그 불러오기</button>
</div>
</div>
</div>
<div class="row gx-0">
<div class="col "><?= backButton() ?></div>
</div>
<div class="row bg0 gx-0">
<div class="col bg0"><?= banner() ?></div>
</div>
</div>
</body>
</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 $ from 'jquery';
import { InvalidResponse, keyScreenMode } from '@/defs';
import { InvalidResponse, keyScreenMode, ScreenModeType } from '@/defs';
import { convertFormData } from '@util/convertFormData';
import { setAxiosXMLHttpRequest } from '@util/setAxiosXMLHttpRequest';
import { unwrap } from '@util/unwrap';
import { unwrap_any } from '@util/unwrap_any';
import { auto500px } from './util/auto500px';
type LogResponse = {
@@ -109,7 +111,9 @@ $(function ($) {
const $screenModeRadios = $('input:radio[name=screenMode]');
$screenModeRadios.prop('checked', false).filter(`[value="${localStorage.getItem(keyScreenMode)??'auto'}"]`).prop('checked', true);
$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 {
let deviceWidth = -1;
let viewportMeta!: HTMLMetaElement;
let oldMode: ScreenModeType = 'auto';
function init() {
@@ -23,14 +24,9 @@ export function auto500px(targetHeight = 700): void {
}
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';
if(screenMode != oldMode){
oldMode = screenMode;
if(screenMode == '500px'){
viewportMeta.content = 'width=500';
return;
@@ -41,6 +37,19 @@ export function auto500px(targetHeight = 700): void {
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) {
viewportMeta.content = 'width=500';
return;
@@ -69,5 +78,8 @@ export function auto500px(targetHeight = 700): void {
adjustViewportWidth();
window.addEventListener('scroll', adjustViewportWidth, true);
window.addEventListener('orientationchange', adjustViewportWidth, true);
document.addEventListener('tryChangeScreenMode', adjustViewportWidth, false);
});
}