mirror of
https://github.com/paricafe/misskey.git
synced 2024-12-01 02:56:43 -06:00
🎨
This commit is contained in:
syuilo
parent
955b3e313b
commit
3ec6101b16
5 changed files with 146 additions and 85 deletions
70
src/client/components/global/spacer.vue
Normal file
70
src/client/components/global/spacer.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
<template>
|
||||||
|
<div ref="root" :class="$style.root" :style="{ padding: margin + 'px' }">
|
||||||
|
<div ref="content" :class="$style.content">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
props: {
|
||||||
|
contentMax: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setup(props, context) {
|
||||||
|
let ro: ResizeObserver;
|
||||||
|
const root = ref<HTMLElement>(null);
|
||||||
|
const content = ref<HTMLElement>(null);
|
||||||
|
const margin = ref(0);
|
||||||
|
const adjust = (rect: { width: number; height: number; }) => {
|
||||||
|
if (rect.width > (props.contentMax || 500)) {
|
||||||
|
margin.value = 32;
|
||||||
|
} else {
|
||||||
|
margin.value = 12;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
ro = new ResizeObserver((entries) => {
|
||||||
|
adjust({
|
||||||
|
width: entries[0].borderBoxSize[0].inlineSize,
|
||||||
|
height: entries[0].borderBoxSize[0].blockSize,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
ro.observe(root.value);
|
||||||
|
|
||||||
|
if (props.contentMax) {
|
||||||
|
content.value.style.maxWidth = `${props.contentMax}px`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
ro.disconnect();
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
root,
|
||||||
|
content,
|
||||||
|
margin,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" module>
|
||||||
|
.root {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -14,6 +14,7 @@ import loading from './global/loading.vue';
|
||||||
import error from './global/error.vue';
|
import error from './global/error.vue';
|
||||||
import ad from './global/ad.vue';
|
import ad from './global/ad.vue';
|
||||||
import header from './global/header.vue';
|
import header from './global/header.vue';
|
||||||
|
import spacer from './global/spacer.vue';
|
||||||
|
|
||||||
export default function(app: App) {
|
export default function(app: App) {
|
||||||
app.component('I18n', i18n);
|
app.component('I18n', i18n);
|
||||||
|
|
@ -30,4 +31,5 @@ export default function(app: App) {
|
||||||
app.component('MkError', error);
|
app.component('MkError', error);
|
||||||
app.component('MkAd', ad);
|
app.component('MkAd', ad);
|
||||||
app.component('MkHeader', header);
|
app.component('MkHeader', header);
|
||||||
|
app.component('MkSpacer', spacer);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,77 +2,79 @@
|
||||||
<div>
|
<div>
|
||||||
<MkHeader :info="header"/>
|
<MkHeader :info="header"/>
|
||||||
|
|
||||||
<div class="lznhrdub _root">
|
<MkSpacer :content-max="1200">
|
||||||
<div v-if="tab === 'local'">
|
<div class="lznhrdub">
|
||||||
<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
|
<div v-if="tab === 'local'">
|
||||||
<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
|
<div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
|
||||||
<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
|
<header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
|
||||||
</div>
|
<div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
|
||||||
|
|
||||||
<template v-if="tag == null">
|
|
||||||
<MkFolder class="_gap" persist-key="explore-pinned-users">
|
|
||||||
<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.pinnedUsers }}</template>
|
|
||||||
<XUserList :pagination="pinnedUsers"/>
|
|
||||||
</MkFolder>
|
|
||||||
<MkFolder class="_gap" persist-key="explore-popular-users">
|
|
||||||
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
|
|
||||||
<XUserList :pagination="popularUsers"/>
|
|
||||||
</MkFolder>
|
|
||||||
<MkFolder class="_gap" persist-key="explore-recently-updated-users">
|
|
||||||
<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
|
|
||||||
<XUserList :pagination="recentlyUpdatedUsers"/>
|
|
||||||
</MkFolder>
|
|
||||||
<MkFolder class="_gap" persist-key="explore-recently-registered-users">
|
|
||||||
<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyRegisteredUsers }}</template>
|
|
||||||
<XUserList :pagination="recentlyRegisteredUsers"/>
|
|
||||||
</MkFolder>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="tab === 'remote'">
|
|
||||||
<div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
|
|
||||||
<header><span>{{ $ts.exploreFediverse }}</span></header>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<MkFolder :foldable="true" :expanded="false" ref="tags" class="_gap">
|
|
||||||
<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
|
|
||||||
|
|
||||||
<div class="vxjfqztj">
|
|
||||||
<MkA v-for="tag in tagsLocal" :to="`/explore/tags/${tag.tag}`" :key="'local:' + tag.tag" class="local">{{ tag.tag }}</MkA>
|
|
||||||
<MkA v-for="tag in tagsRemote" :to="`/explore/tags/${tag.tag}`" :key="'remote:' + tag.tag">{{ tag.tag }}</MkA>
|
|
||||||
</div>
|
</div>
|
||||||
</MkFolder>
|
|
||||||
|
|
||||||
<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
|
<template v-if="tag == null">
|
||||||
<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
|
<MkFolder class="_gap" persist-key="explore-pinned-users">
|
||||||
<XUserList :pagination="tagUsers"/>
|
<template #header><i class="fas fa-bookmark fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.pinnedUsers }}</template>
|
||||||
</MkFolder>
|
<XUserList :pagination="pinnedUsers"/>
|
||||||
|
</MkFolder>
|
||||||
<template v-if="tag == null">
|
<MkFolder class="_gap" persist-key="explore-popular-users">
|
||||||
<MkFolder class="_gap">
|
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
|
||||||
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
|
<XUserList :pagination="popularUsers"/>
|
||||||
<XUserList :pagination="popularUsersF"/>
|
</MkFolder>
|
||||||
</MkFolder>
|
<MkFolder class="_gap" persist-key="explore-recently-updated-users">
|
||||||
<MkFolder class="_gap">
|
<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
|
||||||
<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
|
<XUserList :pagination="recentlyUpdatedUsers"/>
|
||||||
<XUserList :pagination="recentlyUpdatedUsersF"/>
|
</MkFolder>
|
||||||
</MkFolder>
|
<MkFolder class="_gap" persist-key="explore-recently-registered-users">
|
||||||
<MkFolder class="_gap">
|
<template #header><i class="fas fa-plus fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyRegisteredUsers }}</template>
|
||||||
<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyDiscoveredUsers }}</template>
|
<XUserList :pagination="recentlyRegisteredUsers"/>
|
||||||
<XUserList :pagination="recentlyRegisteredUsersF"/>
|
</MkFolder>
|
||||||
</MkFolder>
|
</template>
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
<div v-else-if="tab === 'search'">
|
|
||||||
<div class="_isolated">
|
|
||||||
<MkInput v-model="query" :debounce="true" type="search">
|
|
||||||
<template #prefix><i class="fas fa-search"></i></template>
|
|
||||||
<template #label>{{ $ts.searchUser }}</template>
|
|
||||||
</MkInput>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div v-else-if="tab === 'remote'">
|
||||||
|
<div class="localfedi7 _block _isolated" v-if="tag == null" :style="{ backgroundImage: `url(/static-assets/client/fedi.jpg)` }">
|
||||||
|
<header><span>{{ $ts.exploreFediverse }}</span></header>
|
||||||
|
</div>
|
||||||
|
|
||||||
<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
|
<MkFolder :foldable="true" :expanded="false" ref="tags" class="_gap">
|
||||||
|
<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularTags }}</template>
|
||||||
|
|
||||||
|
<div class="vxjfqztj">
|
||||||
|
<MkA v-for="tag in tagsLocal" :to="`/explore/tags/${tag.tag}`" :key="'local:' + tag.tag" class="local">{{ tag.tag }}</MkA>
|
||||||
|
<MkA v-for="tag in tagsRemote" :to="`/explore/tags/${tag.tag}`" :key="'remote:' + tag.tag">{{ tag.tag }}</MkA>
|
||||||
|
</div>
|
||||||
|
</MkFolder>
|
||||||
|
|
||||||
|
<MkFolder v-if="tag != null" :key="`${tag}`" class="_gap">
|
||||||
|
<template #header><i class="fas fa-hashtag fa-fw" style="margin-right: 0.5em;"></i>{{ tag }}</template>
|
||||||
|
<XUserList :pagination="tagUsers"/>
|
||||||
|
</MkFolder>
|
||||||
|
|
||||||
|
<template v-if="tag == null">
|
||||||
|
<MkFolder class="_gap">
|
||||||
|
<template #header><i class="fas fa-chart-line fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.popularUsers }}</template>
|
||||||
|
<XUserList :pagination="popularUsersF"/>
|
||||||
|
</MkFolder>
|
||||||
|
<MkFolder class="_gap">
|
||||||
|
<template #header><i class="fas fa-comment-alt fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyUpdatedUsers }}</template>
|
||||||
|
<XUserList :pagination="recentlyUpdatedUsersF"/>
|
||||||
|
</MkFolder>
|
||||||
|
<MkFolder class="_gap">
|
||||||
|
<template #header><i class="fas fa-rocket fa-fw" style="margin-right: 0.5em;"></i>{{ $ts.recentlyDiscoveredUsers }}</template>
|
||||||
|
<XUserList :pagination="recentlyRegisteredUsersF"/>
|
||||||
|
</MkFolder>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div v-else-if="tab === 'search'">
|
||||||
|
<div class="_isolated">
|
||||||
|
<MkInput v-model="query" :debounce="true" type="search">
|
||||||
|
<template #prefix><i class="fas fa-search"></i></template>
|
||||||
|
<template #label>{{ $ts.searchUser }}</template>
|
||||||
|
</MkInput>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<XUserList v-if="query" class="_gap" :pagination="searchPagination" ref="search"/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</MkSpacer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -214,12 +216,6 @@ export default defineComponent({
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.lznhrdub {
|
|
||||||
max-width: 1400px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.localfedi7 {
|
.localfedi7 {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,11 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<MkHeader :info="header"/>
|
<MkHeader :info="header"/>
|
||||||
<div class="clupoqwt" v-size="{ min: [800] }">
|
<MkSpacer :content-max="800">
|
||||||
<XNotifications class="notifications" @before="before" @after="after" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
|
<div class="clupoqwt">
|
||||||
</div>
|
<XNotifications class="notifications" @before="before" @after="after" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
|
||||||
|
</div>
|
||||||
|
</MkSpacer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -90,14 +92,5 @@ export default defineComponent({
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.clupoqwt {
|
.clupoqwt {
|
||||||
&.min-width_800px {
|
|
||||||
background: var(--bg);
|
|
||||||
padding: 32px 0;
|
|
||||||
|
|
||||||
> .notifications {
|
|
||||||
max-width: 800px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -20,7 +20,7 @@
|
||||||
renote: '@accent',
|
renote: '@accent',
|
||||||
mention: 'rgb(212, 153, 76)',
|
mention: 'rgb(212, 153, 76)',
|
||||||
mentionMe: 'rgb(212, 210, 76)',
|
mentionMe: 'rgb(212, 210, 76)',
|
||||||
hashtag: 'rgb(76, 212, 180)',
|
hashtag: '#5bcbb0',
|
||||||
link: '@accent',
|
link: '@accent',
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue