diff --git a/src/client/components/global/spacer.vue b/src/client/components/global/spacer.vue
new file mode 100644
index 0000000000..9037de466c
--- /dev/null
+++ b/src/client/components/global/spacer.vue
@@ -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>
diff --git a/src/client/components/index.ts b/src/client/components/index.ts
index 8f071dfce1..ecf66ea0e8 100644
--- a/src/client/components/index.ts
+++ b/src/client/components/index.ts
@@ -14,6 +14,7 @@ import loading from './global/loading.vue';
import error from './global/error.vue';
import ad from './global/ad.vue';
import header from './global/header.vue';
+import spacer from './global/spacer.vue';
export default function(app: App) {
app.component('I18n', i18n);
@@ -30,4 +31,5 @@ export default function(app: App) {
app.component('MkError', error);
app.component('MkAd', ad);
app.component('MkHeader', header);
+ app.component('MkSpacer', spacer);
}
diff --git a/src/client/pages/explore.vue b/src/client/pages/explore.vue
index 26ce412612..2ca0668611 100644
--- a/src/client/pages/explore.vue
+++ b/src/client/pages/explore.vue
@@ -2,77 +2,79 @@
<div>
<MkHeader :info="header"/>
- <div class="lznhrdub _root">
- <div v-if="tab === 'local'">
- <div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
- <header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
- <div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
- </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>
+ <MkSpacer :content-max="1200">
+ <div class="lznhrdub">
+ <div v-if="tab === 'local'">
+ <div class="localfedi7 _block _isolated" v-if="meta && stats && tag == null" :style="{ backgroundImage: meta.bannerUrl ? `url(${meta.bannerUrl})` : null }">
+ <header><span>{{ $t('explore', { host: meta.name || 'Misskey' }) }}</span></header>
+ <div><span>{{ $t('exploreUsersCount', { count: num(stats.originalUsersCount) }) }}</span></div>
</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>
+ <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>
- <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>
+ </MkSpacer>
</div>
</template>
@@ -214,12 +216,6 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
-.lznhrdub {
- max-width: 1400px;
- margin: 0 auto;
- padding: 16px;
-}
-
.localfedi7 {
color: #fff;
padding: 16px;
diff --git a/src/client/pages/notifications.vue b/src/client/pages/notifications.vue
index c6d7ea9b31..049d057d02 100644
--- a/src/client/pages/notifications.vue
+++ b/src/client/pages/notifications.vue
@@ -1,9 +1,11 @@
<template>
<div>
<MkHeader :info="header"/>
- <div class="clupoqwt" v-size="{ min: [800] }">
- <XNotifications class="notifications" @before="before" @after="after" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
- </div>
+ <MkSpacer :content-max="800">
+ <div class="clupoqwt">
+ <XNotifications class="notifications" @before="before" @after="after" :include-types="includeTypes" :unread-only="tab === 'unread'"/>
+ </div>
+ </MkSpacer>
</div>
</template>
@@ -90,14 +92,5 @@ export default defineComponent({
<style lang="scss" scoped>
.clupoqwt {
- &.min-width_800px {
- background: var(--bg);
- padding: 32px 0;
-
- > .notifications {
- max-width: 800px;
- margin: 0 auto;
- }
- }
}
</style>
diff --git a/src/client/themes/d-botanical.json5 b/src/client/themes/d-botanical.json5
index f3665e22b2..c03b95e2d7 100644
--- a/src/client/themes/d-botanical.json5
+++ b/src/client/themes/d-botanical.json5
@@ -20,7 +20,7 @@
renote: '@accent',
mention: 'rgb(212, 153, 76)',
mentionMe: 'rgb(212, 210, 76)',
- hashtag: 'rgb(76, 212, 180)',
+ hashtag: '#5bcbb0',
link: '@accent',
},
}