mirror of
https://github.com/misskey-dev/misskey
synced 2024-09-07 17:40:50 +02:00
parent
8da278a279
commit
488fe2e7bd
|
@ -413,9 +413,11 @@ common/views/pages/explore.vue:
|
||||||
popular-users: "人気のユーザー"
|
popular-users: "人気のユーザー"
|
||||||
recently-updated-users: "最近投稿したユーザー"
|
recently-updated-users: "最近投稿したユーザー"
|
||||||
recently-registered-users: "新規ユーザー"
|
recently-registered-users: "新規ユーザー"
|
||||||
|
recently-discovered-users: "最近発見されたユーザー"
|
||||||
popular-tags: "人気のタグ"
|
popular-tags: "人気のタグ"
|
||||||
federated: "連合"
|
federated: "連合"
|
||||||
explore: "{host}を探索"
|
explore: "{host}を探索"
|
||||||
|
explore-fediverse: "Fediverseを探索"
|
||||||
users-info: "現在{users}ユーザーが登録されています"
|
users-info: "現在{users}ユーザーが登録されています"
|
||||||
|
|
||||||
common/views/components/reactions-viewer.details.vue:
|
common/views/components/reactions-viewer.details.vue:
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<ui-container :body-togglable="true">
|
<ui-container :body-togglable="true" :expanded="expanded">
|
||||||
<template #header><slot></slot></template>
|
<template #header><slot></slot></template>
|
||||||
|
|
||||||
<mk-error v-if="error" @retry="init()"/>
|
<mk-error v-if="error" @retry="init()"/>
|
||||||
|
@ -50,7 +50,11 @@ export default Vue.extend({
|
||||||
iconOnly: {
|
iconOnly: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
}
|
},
|
||||||
|
expanded: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
|
|
@ -1,15 +1,30 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<ui-container :show-header="false" v-if="meta && stats">
|
<div class="localfedi7" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
|
||||||
<div class="kpdsmpnk" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
|
<header>{{ $t('explore', { host: meta.name }) }}</header>
|
||||||
<div>
|
<div>{{ $t('users-info', { users: num(stats.originalUsersCount) }) }}</div>
|
||||||
<router-link to="/explore" class="title">{{ $t('explore', { host: meta.name || 'Misskey' }) }}</router-link>
|
|
||||||
<span>{{ $t('users-info', { users: num(stats.originalUsersCount) }) }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</ui-container>
|
|
||||||
|
|
||||||
<ui-container :body-togglable="true" :expanded="tag == null" ref="tags">
|
<template v-if="tag == null">
|
||||||
|
<mk-user-list :pagination="pinnedUsers" :expanded="false">
|
||||||
|
<fa :icon="faBookmark" fixed-width/>{{ $t('pinned-users') }}
|
||||||
|
</mk-user-list>
|
||||||
|
<mk-user-list :pagination="popularUsers" :expanded="false">
|
||||||
|
<fa :icon="faChartLine" fixed-width/>{{ $t('popular-users') }}
|
||||||
|
</mk-user-list>
|
||||||
|
<mk-user-list :pagination="recentlyUpdatedUsers" :expanded="false">
|
||||||
|
<fa :icon="faCommentAlt" fixed-width/>{{ $t('recently-updated-users') }}
|
||||||
|
</mk-user-list>
|
||||||
|
<mk-user-list :pagination="recentlyRegisteredUsers" :expanded="false">
|
||||||
|
<fa :icon="faPlus" fixed-width/>{{ $t('recently-registered-users') }}
|
||||||
|
</mk-user-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div class="localfedi7" v-if="tag == null" :style="{ backgroundImage: `url(/assets/fedi.jpg)` }">
|
||||||
|
<header>{{ $t('explore-fediverse') }}</header>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ui-container :body-togglable="true" :expanded="false" ref="tags">
|
||||||
<template #header><fa :icon="faHashtag" fixed-width/>{{ $t('popular-tags') }}</template>
|
<template #header><fa :icon="faHashtag" fixed-width/>{{ $t('popular-tags') }}</template>
|
||||||
|
|
||||||
<div class="vxjfqztj">
|
<div class="vxjfqztj">
|
||||||
|
@ -18,25 +33,18 @@
|
||||||
</div>
|
</div>
|
||||||
</ui-container>
|
</ui-container>
|
||||||
|
|
||||||
<mk-user-list v-if="tag != null" :pagination="tagUsers" :key="`${tag}-local`">
|
<mk-user-list v-if="tag != null" :pagination="tagUsers" :key="`${tag}`">
|
||||||
<fa :icon="faHashtag" fixed-width/>{{ tag }}
|
<fa :icon="faHashtag" fixed-width/>{{ tag }}
|
||||||
</mk-user-list>
|
</mk-user-list>
|
||||||
<mk-user-list v-if="tag != null" :pagination="tagRemoteUsers" :key="`${tag}-remote`">
|
|
||||||
<fa :icon="faHashtag" fixed-width/>{{ tag }} ({{ $t('federated') }})
|
|
||||||
</mk-user-list>
|
|
||||||
|
|
||||||
<template v-if="tag == null">
|
<template v-if="tag == null">
|
||||||
<mk-user-list :pagination="pinnedUsers">
|
<mk-user-list :pagination="popularUsersF" :expanded="false">
|
||||||
<fa :icon="faBookmark" fixed-width/>{{ $t('pinned-users') }}
|
|
||||||
</mk-user-list>
|
|
||||||
<mk-user-list :pagination="popularUsers">
|
|
||||||
<fa :icon="faChartLine" fixed-width/>{{ $t('popular-users') }}
|
<fa :icon="faChartLine" fixed-width/>{{ $t('popular-users') }}
|
||||||
</mk-user-list>
|
</mk-user-list>
|
||||||
<mk-user-list :pagination="recentlyUpdatedUsers">
|
<mk-user-list :pagination="recentlyUpdatedUsersF" :expanded="false">
|
||||||
<fa :icon="faCommentAlt" fixed-width/>{{ $t('recently-updated-users') }}
|
<fa :icon="faCommentAlt" fixed-width/>{{ $t('recently-updated-users') }}
|
||||||
</mk-user-list>
|
</mk-user-list>
|
||||||
<mk-user-list :pagination="recentlyRegisteredUsers">
|
<mk-user-list :pagination="recentlyRegisteredUsersF" :expanded="false">
|
||||||
<fa :icon="faPlus" fixed-width/>{{ $t('recently-registered-users') }}
|
<fa :icon="faRocket" fixed-width/>{{ $t('recently-discovered-users') }}
|
||||||
</mk-user-list>
|
</mk-user-list>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
@ -45,7 +53,7 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import i18n from '../../../i18n';
|
import i18n from '../../../i18n';
|
||||||
import { faChartLine, faPlus, faHashtag } from '@fortawesome/free-solid-svg-icons';
|
import { faChartLine, faPlus, faHashtag, faRocket } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
|
import { faBookmark, faCommentAlt } from '@fortawesome/free-regular-svg-icons';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
|
@ -58,6 +66,12 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
inject: {
|
||||||
|
inNakedDeckColumn: {
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pinnedUsers: { endpoint: 'pinned-users' },
|
pinnedUsers: { endpoint: 'pinned-users' },
|
||||||
|
@ -75,12 +89,25 @@ export default Vue.extend({
|
||||||
state: 'alive',
|
state: 'alive',
|
||||||
sort: '+createdAt',
|
sort: '+createdAt',
|
||||||
} },
|
} },
|
||||||
|
popularUsersF: { endpoint: 'users', limit: 10, params: {
|
||||||
|
state: 'alive',
|
||||||
|
origin: 'combined',
|
||||||
|
sort: '+follower',
|
||||||
|
} },
|
||||||
|
recentlyUpdatedUsersF: { endpoint: 'users', limit: 10, params: {
|
||||||
|
origin: 'combined',
|
||||||
|
sort: '+updatedAt',
|
||||||
|
} },
|
||||||
|
recentlyRegisteredUsersF: { endpoint: 'users', limit: 10, params: {
|
||||||
|
origin: 'combined',
|
||||||
|
sort: '+createdAt',
|
||||||
|
} },
|
||||||
tagsLocal: [],
|
tagsLocal: [],
|
||||||
tagsRemote: [],
|
tagsRemote: [],
|
||||||
stats: null,
|
stats: null,
|
||||||
meta: null,
|
meta: null,
|
||||||
num: Vue.filter('number'),
|
num: Vue.filter('number'),
|
||||||
faBookmark, faChartLine, faCommentAlt, faPlus, faHashtag
|
faBookmark, faChartLine, faCommentAlt, faPlus, faHashtag, faRocket
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -91,21 +118,7 @@ export default Vue.extend({
|
||||||
limit: 30,
|
limit: 30,
|
||||||
params: {
|
params: {
|
||||||
tag: this.tag,
|
tag: this.tag,
|
||||||
state: 'alive',
|
origin: 'combined',
|
||||||
origin: 'local',
|
|
||||||
sort: '+follower',
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
tagRemoteUsers(): any {
|
|
||||||
return {
|
|
||||||
endpoint: 'hashtags/users',
|
|
||||||
limit: 30,
|
|
||||||
params: {
|
|
||||||
tag: this.tag,
|
|
||||||
state: 'alive',
|
|
||||||
origin: 'remote',
|
|
||||||
sort: '+follower',
|
sort: '+follower',
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -152,6 +165,28 @@ export default Vue.extend({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
<style lang="stylus" scoped>
|
||||||
|
.localfedi7
|
||||||
|
overflow hidden
|
||||||
|
background var(--face)
|
||||||
|
color #fff
|
||||||
|
text-shadow 0 0 8px #000
|
||||||
|
border-radius 6px
|
||||||
|
padding 16px
|
||||||
|
margin-top 16px
|
||||||
|
margin-bottom 16px
|
||||||
|
height 80px
|
||||||
|
background-position 50%
|
||||||
|
background-size cover
|
||||||
|
> header
|
||||||
|
font-size 20px
|
||||||
|
font-weight bold
|
||||||
|
> div
|
||||||
|
font-size 14px
|
||||||
|
opacity 0.8
|
||||||
|
|
||||||
|
.localfedi7:first-child
|
||||||
|
margin-top 0
|
||||||
|
|
||||||
.vxjfqztj
|
.vxjfqztj
|
||||||
padding 16px
|
padding 16px
|
||||||
|
|
||||||
|
@ -160,35 +195,4 @@ export default Vue.extend({
|
||||||
|
|
||||||
&.local
|
&.local
|
||||||
font-weight bold
|
font-weight bold
|
||||||
|
|
||||||
.kpdsmpnk
|
|
||||||
min-height 100px
|
|
||||||
padding 16px
|
|
||||||
background-position center
|
|
||||||
background-size cover
|
|
||||||
|
|
||||||
&:before
|
|
||||||
content ""
|
|
||||||
display block
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
left 0
|
|
||||||
width 100%
|
|
||||||
height 100%
|
|
||||||
background rgba(0, 0, 0, 0.3)
|
|
||||||
|
|
||||||
> div
|
|
||||||
color #fff
|
|
||||||
text-shadow 0 0 8px #00
|
|
||||||
|
|
||||||
> .title
|
|
||||||
display block
|
|
||||||
font-size 20px
|
|
||||||
font-weight bold
|
|
||||||
color inherit
|
|
||||||
|
|
||||||
> span
|
|
||||||
font-size 14px
|
|
||||||
opacity 0.8
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="kedshtep" :class="{ naked, inNakedDeckColumn, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
|
<div class="kedshtep" :class="{ naked, inNakedDeckColumn, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
|
||||||
<header v-if="showHeader">
|
<header v-if="showHeader" :class="{ bodyTogglable }" @click="toggleContent(!showBody)">
|
||||||
<div class="title"><slot name="header"></slot></div>
|
<div class="title"><slot name="header"></slot></div>
|
||||||
<slot name="func"></slot>
|
<slot name="func"></slot>
|
||||||
<button v-if="bodyTogglable" @click="toggleContent(!showBody)">
|
<button v-if="bodyTogglable">
|
||||||
<template v-if="showBody"><fa icon="angle-up"/></template>
|
<template v-if="showBody"><fa icon="angle-up"/></template>
|
||||||
<template v-else><fa icon="angle-down"/></template>
|
<template v-else><fa icon="angle-down"/></template>
|
||||||
</button>
|
</button>
|
||||||
|
@ -47,6 +47,7 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleContent(show: boolean) {
|
toggleContent(show: boolean) {
|
||||||
|
if (!this.bodyTogglable) return;
|
||||||
this.showBody = show;
|
this.showBody = show;
|
||||||
this.$emit('toggle', show);
|
this.$emit('toggle', show);
|
||||||
}
|
}
|
||||||
|
@ -77,6 +78,9 @@ export default Vue.extend({
|
||||||
> header
|
> header
|
||||||
background var(--faceHeader)
|
background var(--faceHeader)
|
||||||
|
|
||||||
|
&.bodyTogglable
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
> .title
|
> .title
|
||||||
z-index 1
|
z-index 1
|
||||||
margin 0
|
margin 0
|
||||||
|
@ -120,6 +124,9 @@ export default Vue.extend({
|
||||||
color var(--text)
|
color var(--text)
|
||||||
background var(--deckColumnBg)
|
background var(--deckColumnBg)
|
||||||
|
|
||||||
|
&.bodyTogglable
|
||||||
|
cursor pointer
|
||||||
|
|
||||||
> button
|
> button
|
||||||
position absolute
|
position absolute
|
||||||
top 0
|
top 0
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="ukygtjoj" :class="{ naked, inNakedDeckColumn, hideHeader: !showHeader, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
|
<div class="ukygtjoj" :class="{ naked, inNakedDeckColumn, hideHeader: !showHeader, shadow: $store.state.device.useShadow, round: $store.state.device.roundedCorners }">
|
||||||
<header v-if="showHeader">
|
<header v-if="showHeader" @click="() => showBody = !showBody">
|
||||||
<div class="title"><slot name="header"></slot></div>
|
<div class="title"><slot name="header"></slot></div>
|
||||||
<slot name="func"></slot>
|
<slot name="func"></slot>
|
||||||
<button v-if="bodyTogglable" @click="() => showBody = !showBody">
|
<button v-if="bodyTogglable">
|
||||||
<template v-if="showBody"><fa icon="angle-up"/></template>
|
<template v-if="showBody"><fa icon="angle-up"/></template>
|
||||||
<template v-else><fa icon="angle-down"/></template>
|
<template v-else><fa icon="angle-down"/></template>
|
||||||
</button>
|
</button>
|
||||||
|
@ -47,6 +47,7 @@ export default Vue.extend({
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
toggleContent(show: boolean) {
|
toggleContent(show: boolean) {
|
||||||
|
if (!this.bodyTogglable) return;
|
||||||
this.showBody = show;
|
this.showBody = show;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
BIN
src/client/assets/fedi.jpg
Normal file
BIN
src/client/assets/fedi.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 76 KiB |
Loading…
Reference in a new issue