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

feat(in-progress): 메인메뉴 지도를 500px 모드에 맞게 수정

Browse Source
This commit is contained in:
Hide_D
2021-11-28 18:54:37 +09:00
parent aeabb05a9d
commit 6da30c5723
4 changed files with 38 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/css/map.css
+3 -1
View File
@@ -5,6 +5,7 @@
background:black; background:black;
font-size:13px; font-size:13px;
color:white; color:white;
position: relative;
} }
.map_title{ .map_title{
@@ -33,6 +34,7 @@
width:700px; width:700px;
height:500px; height:500px;
position:relative; position:relative;
overflow: hidden;
} }
.map_body .map_bglayer1{ .map_body .map_bglayer1{
@@ -99,7 +101,7 @@
z-index: 6; z-index: 6;
line-height:15px; line-height:15px;
height:15px; height:15px;
} }
.world_map .nation_name{ .world_map .nation_name{
background-color: rgb(30, 164, 255); background-color: rgb(30, 164, 255);
hwe/scss/main.scss
+17
View File
@@ -131,6 +131,23 @@ body {
grid-column-end: 2; grid-column-end: 2;
grid-row-start: 1; grid-row-start: 1;
grid-row-end: 2; grid-row-end: 2;
.world_map{
width:500px;
height: calc((500px + 20px) * 500 / 700);
}
.map_title{
transform-origin: 0px 0px;
transform: scale(calc(500 / 700));
margin-bottom: -20px * 200 / 700;
}
.map_body{
transform-origin: 0px 0px;
transform: scale(calc(500 / 700));
}
} }
hwe/templates/map.php
+12 -12
View File
@@ -1,4 +1,4 @@
<div class="world_map map_theme_<?=$mapTheme?> draw_required"> <div class="world_map map_theme_<?= $mapTheme ?> draw_required">
<div class="map_title obj_tooltip" data-toggle="tooltip" data-placement="top" data-tooltip-class="map_title_tooltiptext"> <div class="map_title obj_tooltip" data-toggle="tooltip" data-placement="top" data-tooltip-class="map_title_tooltiptext">
<span class="map_title_text "> <span class="map_title_text ">
</span> </span>
@@ -9,20 +9,20 @@
<div class="map_bglayer2"></div> <div class="map_bglayer2"></div>
<div class="map_bgroad"></div> <div class="map_bgroad"></div>
<div class="map_button_stack"> <div class="map_button_stack">
<button type="button" class="btn btn-primary map_toggle_cityname btn-xs" data-toggle="button" aria-pressed="false" autocomplete="off"> <button type="button" class="btn btn-primary map_toggle_cityname btn-xs" data-toggle="button" aria-pressed="false" autocomplete="off">
도시명 표기 도시명 표기
</button><br> </button><br>
<button type="button" class="btn btn-secondary map_toggle_single_tap btn-xs" data-toggle="button" aria-pressed="false" autocomplete="off"> <button type="button" class="btn btn-secondary map_toggle_single_tap btn-xs" data-toggle="button" aria-pressed="false" autocomplete="off">
두번 탭 해 도시 이동 두번 탭 해 도시 이동
</button> </button>
</div> </div>
<div class="city_tooltip"> </div>
<div class="city_name"> <div class="city_tooltip">
<div class="city_name">
</div> </div>
<div class="nation_name"> <div class="nation_name">
</div>
</div> </div>
</div> </div>
</div> </div>
hwe/ts/map.ts
+6 -18
View File
@@ -552,16 +552,10 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
$tooltip_nation.html('').hide(); $tooltip_nation.html('').hide();
} }
let left = position.left; const left = position.left;
let top = position.top; const top = position.top;
const scale = $map_body.data('scale'); $tooltip.css({ 'top': top + 45, 'left': left + 35 }).show();
if (scale) {
left /= scale;
top /= scale;
}
$tooltip.css({ 'top': top + 25, 'left': left + 35 }).show();
const touchMode = $this.data('touchMode') as number; const touchMode = $this.data('touchMode') as number;
if (touchMode <= 1) { if (touchMode <= 1) {
@@ -590,16 +584,10 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
} }
const rect = this.getBoundingClientRect(); const rect = this.getBoundingClientRect();
let left = (e.clientX - rect.left - this.clientLeft + this.scrollLeft); const left = (e.clientX - rect.left - this.clientLeft + this.scrollLeft);
let top = (e.clientY - rect.top - this.clientTop + this.scrollTop); const top = (e.clientY - rect.top - this.clientTop + this.scrollTop);
const scale = $map_body.data('scale'); $tooltip.css({ 'top': top + 30, 'left': left + 10 });
if (scale) {
left /= scale;
top /= scale;
}
$tooltip.css({ 'top': top + 10, 'left': left + 10 });
}); });
$objs.on('mouseenter', function () { $objs.on('mouseenter', function () {