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

feat: PageFront의 메시지란에 sticky 적용

Browse Source
This commit is contained in:
Hide_D
2023-03-09 02:20:24 +09:00
parent b5c02d83bc
commit aaa075c042
3 changed files with 32 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/ts/PageFront.vue
+1
View File
@@ -458,6 +458,7 @@ watch(refreshCounter, async () => {
@import "@scss/common/break_500px.scss";
:deep() {
@import "@scss/gameEvent.scss";
@import "@scss/battleLog.scss";
}
#mobileBottomBar {
hwe/ts/components/GameBottomBar.vue
+4 -4
View File
@@ -83,16 +83,16 @@
<li><a class="dropdown-item disabled">메시지</a></li>
<hr class="dropdown-divider" />
<li>
<button type="button" class="dropdown-item" @click="scrollToSelector('.PublicTalk')">전체</button>
<button type="button" class="dropdown-item" @click="scrollToSelector('.PublicTalk > .stickyAnchor')">전체</button>
</li>
<li>
<button type="button" class="dropdown-item" @click="scrollToSelector('.NationalTalk')">국가</button>
<button type="button" class="dropdown-item" @click="scrollToSelector('.NationalTalk > .stickyAnchor')">국가</button>
</li>
<li>
<button type="button" class="dropdown-item" @click="scrollToSelector('.PrivateTalk')">개인</button>
<button type="button" class="dropdown-item" @click="scrollToSelector('.PrivateTalk > .stickyAnchor')">개인</button>
</li>
<li>
<button type="button" class="dropdown-item" @click="scrollToSelector('.DiplomacyTalk')">외교</button>
<button type="button" class="dropdown-item" @click="scrollToSelector('.DiplomacyTalk > .stickyAnchor')">외교</button>
</li>
<li>
<button type="button" class="btn btn-sammo-base2" @click="moveLobby">로비로</button>
hwe/ts/components/MessagePanel.vue
+27 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="MessagePanel">
<div class="MessageInputForm row gx-0">
<div class="MessageInputForm bg0 row gx-0">
<div id="mailbox_list-col" class="col-6 col-md-2 d-grid">
<BFormSelect v-model="targetMailbox" class="bg-dark text-white">
<optgroup
@@ -34,6 +34,7 @@
</div>
</div>
<div class="PublicTalk">
<div class="stickyAnchor"></div>
<div class="BoardHeader bg0">전체 메시지</div>
<template v-if="messagePublic.length == 0">
<div>메시지가 없습니다.</div>
@@ -51,6 +52,7 @@
</template>
</div>
<div class="NationalTalk">
<div class="stickyAnchor"></div>
<div class="BoardHeader bg0">국가 메시지</div>
<template v-if="messageNational.length == 0">
<div>메시지가 없습니다.</div>
@@ -68,6 +70,7 @@
</template>
</div>
<div class="PrivateTalk">
<div class="stickyAnchor"></div>
<div class="BoardHeader bg0">개인 메시지</div>
<template v-if="messagePrivate.length == 0">
<div>메시지가 없습니다.</div>
@@ -85,6 +88,7 @@
</template>
</div>
<div class="DiplomacyTalk">
<div class="stickyAnchor"></div>
<div class="BoardHeader bg0">외교 메시지</div>
<template v-if="messageDiplomacy.length == 0">
<div>메시지가 없습니다.</div>
@@ -512,4 +516,26 @@ onMounted(async () => {
border-right: 1px solid gray;
}
}
@include media-500px{
#msg_submit-col{
order: 2;
}
#msg_input-col {
order: 3;
}
.MessageInputForm{
position: sticky;
top: 0px;
z-index: 5;
}
.stickyAnchor{
position: relative;
top: -68px;
visibility: hidden;
}
}
</style>