amechama/sharkey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

scroll both columns separately

Browse Source
This commit is contained in:
Hazel K 2024-10-02 20:20:51 -04:00
parent 9ddab63a6a
commit 508e76b672
1 changed files with 75 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
packages/frontend/src/pages/following-feed.vue
View File

@ -4,11 +4,11 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<MkStickyContainer> <div :class="$style.root">
<template #header><MkPageHeader v-model:tab="currentTab" :actions="headerActions" :tabs="headerTabs"/></template> <MkPageHeader :class="$style.header" v-model:tab="currentTab" :tabs="headerTabs" :actions="headerActions"/>
<div :class="$style.notes">
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs"> <MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
<MkSpacer :contentMax="1200">
<div :class="$style.columns">
<MkPullToRefresh :refresher="() => reloadLatestNotes()"> <MkPullToRefresh :refresher="() => reloadLatestNotes()">
<MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady"> <MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady">
<template #empty> <template #empty>
@ -25,19 +25,22 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
</MkPagination> </MkPagination>
</MkPullToRefresh> </MkPullToRefresh>
</MkHorizontalSwipe>
</div>
<MkPullToRefresh v-if="isWideViewport" :refresher="() => reloadUserNotes()"> <div v-if="isWideViewport" :class="$style.user">
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
<MkPullToRefresh :refresher="() => reloadUserNotes()">
<div v-if="selectedUser" :class="$style.userInfo"> <div v-if="selectedUser" :class="$style.userInfo">
<MkUserInfo class="user" :user="selectedUser"/> <MkUserInfo :class="$style.userInfo" class="user" :user="selectedUser"/>
<MkNotes :noGap="true" :pagination="userNotesPagination"/> <MkNotes :noGap="true" :pagination="userNotesPagination"/>
</div> </div>
<div v-else-if="selectedUserError" :class="$style.panel">{{ selectedUserError }}</div> <div v-else-if="selectedUserError" :class="$style.panel">{{ selectedUserError }}</div>
<MkLoading v-else-if="selectedUserId"/> <MkLoading v-else-if="selectedUserId"/>
</MkPullToRefresh> </MkPullToRefresh>
</div>
</MkSpacer>
</MkHorizontalSwipe> </MkHorizontalSwipe>
</MkStickyContainer> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -106,6 +109,10 @@ async function showUserNotes(userId: string): Promise<void> {
selectedUserId.value = userId; selectedUserId.value = userId;
selectedUser.value = null; selectedUser.value = null;
// Wait for 1 second to match the animation effects in MkHorizontalSwipe, MkPullToRefresh, and MkPagination.
// Otherwise, the page appears to load "backwards".
await new Promise(resolve => setTimeout(resolve, 1000));
if (userId) { if (userId) {
await misskeyApi('users/show', { userId }) await misskeyApi('users/show', { userId })
.then(user => selectedUser.value = user) .then(user => selectedUser.value = user)
@ -140,9 +147,6 @@ async function onListReady(): Promise<void> {
// This just gets the first user ID // This just gets the first user ID
const selectedNote: Misskey.entities.Note = latestNotesPaging.value.items.values().next().value; const selectedNote: Misskey.entities.Note = latestNotesPaging.value.items.values().next().value;
// Wait for 1 second to match the animation effects in MkHorizontalSwipe, MkPullToRefresh, and MkPagination.
// Otherwise, the page appears to load "backwards".
await new Promise(resolve => setTimeout(resolve, 1000));
await showUserNotes(selectedNote.userId); await showUserNotes(selectedNote.userId);
} }
} }
@ -215,74 +219,55 @@ definePageMetadata(() => ({
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.panel { .root {
background: var(--panel); display: grid;
grid-template-columns: min-content 1fr min-content;
grid-template-rows: min-content 1fr;
grid-template-areas:
"header header header"
"lm notes rm";
gap: 12px;
height: 100vh;
max-width: 1200px;
overflow: hidden;
} }
.info { .header {
margin-bottom: 6px; grid-area: header;
} }
@container (min-width: 451px) { .notes {
.info { grid-area: notes;
margin-bottom: 12px; overflow: auto;
}
} }
.columns { .user {
display: flex; grid-area: user;
flex-direction: row; overflow: auto;
width: 100%;
}
.columns > * {
flex: 1;
}
.columns > :last-child {
min-width: 60%;
}
.columns > :not(:first-child) {
margin-left: 6px;
}
.columns > :not(:last-child) {
margin-right: 6px;
}
@container (min-width: 451px) {
.columns > :not(:first-child) {
margin-left: 12px;
}
.columns > :not(:last-child) {
margin-right: 12px;
}
} }
.userInfo { .userInfo {
display: flex;
flex-direction: column;
align-items: stretch;
}
.userInfo > :not(:first-child) {
margin-top: 6px;
}
.userInfo > :not(:last-child) {
margin-bottom: 6px;
}
@container (min-width: 451px) {
.userInfo > :not(:first-child) {
margin-top: 12px;
}
.userInfo > :not(:last-child) {
margin-bottom: 12px; margin-bottom: 12px;
} }
@container (min-width: 751px) {
.root {
grid-template-columns: min-content 4fr 6fr min-content;
grid-template-rows: min-content 1fr;
grid-template-areas:
"header header header header"
"lm notes user rm";
gap: 24px;
}
.userInfo {
margin-bottom: 24px;
}
}
.panel {
background: var(--panel);
} }
</style> </style>