fix: 500px 지도모드에서 tooltip 위치 조정

This commit is contained in:
2021-11-28 19:24:31 +09:00
parent 6da30c5723
commit da71280a8d
3 changed files with 42 additions and 21 deletions
+5
View File
@@ -494,3 +494,8 @@
.map_basic .city_base .city_state.city_state_good{ .map_basic .city_base .city_state.city_state_good{
background-color:blue; background-color:blue;
} }
.btn.btn-minimum{
padding-top: 1px;
padding-bottom: 1px;
}
+2 -2
View File
@@ -9,10 +9,10 @@
<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-sm btn-minimum" 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-sm btn-minimum" data-toggle="button" aria-pressed="false" autocomplete="off">
두번 도시 이동 두번 도시 이동
</button> </button>
</div> </div>
+17 -1
View File
@@ -537,7 +537,7 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
}); });
$objs.on('touchend', function () { $objs.on('touchend', function (e) {
if (window.sam_toggleSingleTap) { if (window.sam_toggleSingleTap) {
return true; return true;
} }
@@ -555,7 +555,14 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
const left = position.left; const left = position.left;
const top = position.top; const top = position.top;
const tooltipWidth = unwrap($tooltip.width());
if (left + tooltipWidth + 35 > window.innerWidth) {
$tooltip.css({ 'top': top + 45, 'left': left - tooltipWidth - 10 }).show();
}
else {
$tooltip.css({ 'top': top + 45, 'left': left + 35 }).show(); $tooltip.css({ 'top': top + 45, 'left': left + 35 }).show();
}
const touchMode = $this.data('touchMode') as number; const touchMode = $this.data('touchMode') as number;
if (touchMode <= 1) { if (touchMode <= 1) {
@@ -587,7 +594,16 @@ export async function reloadWorldMap(option: loadMapOption, drawTarget = '.world
const left = (e.clientX - rect.left - this.clientLeft + this.scrollLeft); const left = (e.clientX - rect.left - this.clientLeft + this.scrollLeft);
const top = (e.clientY - rect.top - this.clientTop + this.scrollTop); const top = (e.clientY - rect.top - this.clientTop + this.scrollTop);
const tooltipWidth = unwrap($tooltip.width());
if (e.clientX + rect.left + tooltipWidth + 10 > window.innerWidth) {
$tooltip.css({ 'top': top + 30, 'left': left - tooltipWidth - 10 });
}
else {
$tooltip.css({ 'top': top + 30, 'left': left + 10 }); $tooltip.css({ 'top': top + 30, 'left': left + 10 });
}
}); });
$objs.on('mouseenter', function () { $objs.on('mouseenter', function () {