From 8b4be8cad1d207be7226e510b46e5c6041dcbd0c Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Mon, 11 Jul 2022 13:45:00 -0700
Subject: [PATCH 1/2] Fix broken chats
Co-authored-by: @ltlapy
---
.../client/src/components/ui/pagination.vue | 30 ++++++++++---------
.../src/pages/messaging/messaging-room.vue | 3 +-
2 files changed, 18 insertions(+), 15 deletions(-)
diff --git a/packages/client/src/components/ui/pagination.vue b/packages/client/src/components/ui/pagination.vue
index a03c2b3a1d..4544dfc43b 100644
--- a/packages/client/src/components/ui/pagination.vue
+++ b/packages/client/src/components/ui/pagination.vue
@@ -196,21 +196,23 @@ const prepend = (item: Item): void => {
if (props.pagination.reversed) {
if (rootEl.value) {
const container = getScrollContainer(rootEl.value);
- if (container == null) return; // TODO?
-
- const pos = getScrollPosition(rootEl.value);
- const viewHeight = container.clientHeight;
- const height = container.scrollHeight;
- const isBottom = (pos + viewHeight > height - 32);
- if (isBottom) {
- // オーバーフローしたら古いアイテムは捨てる
- if (items.value.length >= props.displayLimit) {
- // このやり方だとVue 3.2以降アニメーションが動かなくなる
- //items.value = items.value.slice(-props.displayLimit);
- while (items.value.length >= props.displayLimit) {
- items.value.shift();
+ if (container == null) {
+ // TODO?
+ } else {
+ const pos = getScrollPosition(rootEl.value);
+ const viewHeight = container.clientHeight;
+ const height = container.scrollHeight;
+ const isBottom = (pos + viewHeight > height - 32);
+ if (isBottom) {
+ // オーバーフローしたら古いアイテムは捨てる
+ if (items.value.length >= props.displayLimit) {
+ // このやり方だとVue 3.2以降アニメーションが動かなくなる
+ //items.value = items.value.slice(-props.displayLimit);
+ while (items.value.length >= props.displayLimit) {
+ items.value.shift();
+ }
+ more.value = true;
}
- more.value = true;
}
}
}
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 2e00c3ab19..f38acb5ef7 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -292,6 +292,7 @@ definePageMetadata(computed(() => !fetching ? user ? {
<style lang="scss" scoped>
.mk-messaging-room {
position: relative;
+ overflow: auto;
> .body {
.more {
@@ -337,7 +338,7 @@ definePageMetadata(computed(() => !fetching ? user ? {
padding-top: 8px;
@media (max-width: 500px) {
- bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
+ bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
}
> .new-message {
From 6f09e14225712f841534ed0f100652b07b649879 Mon Sep 17 00:00:00 2001
From: Kainoa Kanter <44733677+ThatOneCalculator@users.noreply.github.com>
Date: Mon, 11 Jul 2022 15:00:48 -0700
Subject: [PATCH 2/2] :art:
---
packages/client/src/pages/messaging/messaging-room.vue | 5 +----
1 file changed, 1 insertion(+), 4 deletions(-)
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index f38acb5ef7..fe1590b240 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -336,10 +336,7 @@ definePageMetadata(computed(() => !fetching ? user ? {
z-index: 2;
bottom: 0;
padding-top: 8px;
-
- @media (max-width: 500px) {
- bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
- }
+ bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
> .new-message {
width: 100%;