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

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

@ -4,40 +4,43 @@ 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"/>
<MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
<MkSpacer :contentMax="1200">
<div :class="$style.columns">
<MkPullToRefresh :refresher="() => reloadLatestNotes()">
<MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady">
<template #empty>
<div class="_fullinfo">
<img :src="infoImageUrl" class="_ghost" :alt="i18n.ts.noNotes" aria-hidden="true"/>
<div>{{ i18n.ts.noNotes }}</div>
</div>
</template>
<template #default="{ items: notes }"> <div :class="$style.notes">
<MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true"> <MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
<FollowingFeedEntry :note="note" @select="userSelected"/> <MkPullToRefresh :refresher="() => reloadLatestNotes()">
</MkDateSeparatedList> <MkPagination ref="latestNotesPaging" :pagination="latestNotesPagination" @init="onListReady">
</template> <template #empty>
</MkPagination> <div class="_fullinfo">
</MkPullToRefresh> <img :src="infoImageUrl" class="_ghost" :alt="i18n.ts.noNotes" aria-hidden="true"/>
<div>{{ i18n.ts.noNotes }}</div>
</div>
</template>
<MkPullToRefresh v-if="isWideViewport" :refresher="() => reloadUserNotes()"> <template #default="{ items: notes }">
<div v-if="selectedUser" :class="$style.userInfo"> <MkDateSeparatedList v-slot="{ item: note }" :items="notes" :class="$style.panel" :noGap="true">
<MkUserInfo class="user" :user="selectedUser"/> <FollowingFeedEntry :note="note" @select="userSelected"/>
<MkNotes :noGap="true" :pagination="userNotesPagination"/> </MkDateSeparatedList>
</div> </template>
<div v-else-if="selectedUserError" :class="$style.panel">{{ selectedUserError }}</div> </MkPagination>
<MkLoading v-else-if="selectedUserId"/> </MkPullToRefresh>
</MkPullToRefresh> </MkHorizontalSwipe>
</div> </div>
</MkSpacer>
</MkHorizontalSwipe> <div v-if="isWideViewport" :class="$style.user">
</MkStickyContainer> <MkHorizontalSwipe v-model:tab="currentTab" :tabs="headerTabs">
<MkPullToRefresh :refresher="() => reloadUserNotes()">
<div v-if="selectedUser" :class="$style.userInfo">
<MkUserInfo :class="$style.userInfo" class="user" :user="selectedUser"/>
<MkNotes :noGap="true" :pagination="userNotesPagination"/>
</div>
<div v-else-if="selectedUserError" :class="$style.panel">{{ selectedUserError }}</div>
<MkLoading v-else-if="selectedUserId"/>
</MkPullToRefresh>
</MkHorizontalSwipe>
</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; margin-bottom: 12px;
flex-direction: column;
align-items: stretch;
} }
.userInfo > :not(:first-child) { @container (min-width: 751px) {
margin-top: 6px; .root {
} grid-template-columns: min-content 4fr 6fr min-content;
grid-template-rows: min-content 1fr;
.userInfo > :not(:last-child) { grid-template-areas:
margin-bottom: 6px; "header header header header"
} "lm notes user rm";
gap: 24px;
@container (min-width: 451px) {
.userInfo > :not(:first-child) {
margin-top: 12px;
} }
.userInfo > :not(:last-child) { .userInfo {
margin-bottom: 12px; margin-bottom: 24px;
} }
} }
.panel {
background: var(--panel);
}
</style> </style>