mirror of
https://codeberg.org/yeentown/barkey.git
synced 2025-10-26 19:14:12 +00:00
enhance(client): improve channel ui
This commit is contained in:
syuilo
parent
b303d65450
commit
e4fc9ea816
1 changed files with 53 additions and 108 deletions
|
|
@ -1,28 +1,23 @@
|
||||||
<template>
|
<template>
|
||||||
<MkStickyContainer>
|
<MkStickyContainer>
|
||||||
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
|
<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
|
||||||
<MkSpacer :content-max="700">
|
<MkSpacer :content-max="700" :class="$style.main">
|
||||||
<div v-if="channel && tab === 'timeline'" class="_gaps">
|
<div v-if="channel && tab === 'overview'" class="_gaps">
|
||||||
<div class="wpgynlbz _panel" :class="{ hide: !showBanner }">
|
<div class="_panel" :class="$style.bannerContainer">
|
||||||
<XChannelFollowButton :channel="channel" :full="true" class="subscribe"/>
|
<XChannelFollowButton :channel="channel" :full="true" :class="$style.subscribe"/>
|
||||||
<button class="_button toggle" @click="() => showBanner = !showBanner">
|
<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" :class="$style.banner">
|
||||||
<template v-if="showBanner"><i class="ti ti-chevron-up"></i></template>
|
<div :class="$style.bannerStatus">
|
||||||
<template v-else><i class="ti ti-chevron-down"></i></template>
|
|
||||||
</button>
|
|
||||||
<div v-if="!showBanner" class="hideOverlay">
|
|
||||||
</div>
|
|
||||||
<div :style="{ backgroundImage: channel.bannerUrl ? `url(${channel.bannerUrl})` : null }" class="banner">
|
|
||||||
<div class="status">
|
|
||||||
<div><i class="ti ti-users ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
|
<div><i class="ti ti-users ti-fw"></i><I18n :src="i18n.ts._channel.usersCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.usersCount }}</b></template></I18n></div>
|
||||||
<div><i class="ti ti-pencil ti-fw"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
|
<div><i class="ti ti-pencil ti-fw"></i><I18n :src="i18n.ts._channel.notesCount" tag="span" style="margin-left: 4px;"><template #n><b>{{ channel.notesCount }}</b></template></I18n></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="fade"></div>
|
<div :class="$style.bannerFade"></div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="channel.description" class="description">
|
<div v-if="channel.description" :class="$style.description">
|
||||||
<Mfm :text="channel.description" :is-note="false" :i="$i"/>
|
<Mfm :text="channel.description" :is-note="false" :i="$i"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-if="channel && tab === 'timeline'" class="_gaps">
|
||||||
<!-- スマホ・タブレットの場合、キーボードが表示されると投稿が見づらくなるので、デスクトップ場合のみ自動でフォーカスを当てる -->
|
<!-- スマホ・タブレットの場合、キーボードが表示されると投稿が見づらくなるので、デスクトップ場合のみ自動でフォーカスを当てる -->
|
||||||
<MkPostForm v-if="$i && defaultStore.reactiveState.showFixedPostFormInChannel.value" :channel="channel" class="post-form _panel" fixed :autofocus="deviceKind === 'desktop'"/>
|
<MkPostForm v-if="$i && defaultStore.reactiveState.showFixedPostFormInChannel.value" :channel="channel" class="post-form _panel" fixed :autofocus="deviceKind === 'desktop'"/>
|
||||||
|
|
||||||
|
|
@ -68,7 +63,6 @@ const props = defineProps<{
|
||||||
|
|
||||||
let tab = $ref('timeline');
|
let tab = $ref('timeline');
|
||||||
let channel = $ref(null);
|
let channel = $ref(null);
|
||||||
let showBanner = $ref(true);
|
|
||||||
const featuredPagination = $computed(() => ({
|
const featuredPagination = $computed(() => ({
|
||||||
endpoint: 'notes/featured' as const,
|
endpoint: 'notes/featured' as const,
|
||||||
limit: 10,
|
limit: 10,
|
||||||
|
|
@ -113,6 +107,10 @@ const headerActions = $computed(() => channel && channel.userId ? [{
|
||||||
}] : null);
|
}] : null);
|
||||||
|
|
||||||
const headerTabs = $computed(() => [{
|
const headerTabs = $computed(() => [{
|
||||||
|
key: 'overview',
|
||||||
|
title: i18n.ts.overview,
|
||||||
|
icon: 'ti ti-info-circle',
|
||||||
|
}, {
|
||||||
key: 'timeline',
|
key: 'timeline',
|
||||||
title: i18n.ts.timeline,
|
title: i18n.ts.timeline,
|
||||||
icon: 'ti ti-home',
|
icon: 'ti ti-home',
|
||||||
|
|
@ -129,109 +127,56 @@ definePageMetadata(computed(() => channel ? {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" module>
|
<style lang="scss" module>
|
||||||
|
.main {
|
||||||
|
min-height: calc(var(--containerHeight) - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
|
||||||
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
-webkit-backdrop-filter: var(--blur, blur(15px));
|
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||||
backdrop-filter: var(--blur, blur(15px));
|
backdrop-filter: var(--blur, blur(15px));
|
||||||
border-top: solid 0.5px var(--divider);
|
border-top: solid 0.5px var(--divider);
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
.bannerContainer {
|
||||||
.wpgynlbz {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
> .subscribe {
|
.subscribe {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
top: 16px;
|
top: 16px;
|
||||||
left: 16px;
|
left: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .toggle {
|
.banner {
|
||||||
position: absolute;
|
position: relative;
|
||||||
z-index: 2;
|
height: 200px;
|
||||||
top: 8px;
|
background-position: center;
|
||||||
right: 8px;
|
background-size: cover;
|
||||||
font-size: 1.2em;
|
}
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
color: #fff;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 100%;
|
|
||||||
|
|
||||||
> i {
|
.bannerFade {
|
||||||
vertical-align: middle;
|
position: absolute;
|
||||||
}
|
bottom: 0;
|
||||||
}
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 64px;
|
||||||
|
background: linear-gradient(0deg, var(--panel), var(--X15));
|
||||||
|
}
|
||||||
|
|
||||||
> .banner {
|
.bannerStatus {
|
||||||
position: relative;
|
position: absolute;
|
||||||
height: 200px;
|
z-index: 1;
|
||||||
background-position: center;
|
bottom: 16px;
|
||||||
background-size: cover;
|
right: 16px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
font-size: 80%;
|
||||||
|
background: rgba(0, 0, 0, 0.7);
|
||||||
|
border-radius: 6px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
> .fade {
|
.description {
|
||||||
position: absolute;
|
padding: 16px;
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 64px;
|
|
||||||
background: linear-gradient(0deg, var(--panel), var(--X15));
|
|
||||||
}
|
|
||||||
|
|
||||||
> .status {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
bottom: 16px;
|
|
||||||
right: 16px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
font-size: 80%;
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
border-radius: 6px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .description {
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .hideOverlay {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
-webkit-backdrop-filter: var(--blur, blur(16px));
|
|
||||||
backdrop-filter: var(--blur, blur(16px));
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hide {
|
|
||||||
> .subscribe {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .toggle {
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .banner {
|
|
||||||
height: 42px;
|
|
||||||
filter: blur(8px);
|
|
||||||
|
|
||||||
> * {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .description {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue