トップページデザインを改修

This commit is contained in:
syuilo 2020-12-05 16:05:40 +09:00
parent fbbc7d005d
commit feca9940bc
11 changed files with 125 additions and 183 deletions

View file

@ -320,6 +320,8 @@ pinnedUsers: "ピン留めユーザー"
pinnedUsersDescription: "「みつける」ページなどにピン留めしたいユーザーを改行で区切って記述します。" pinnedUsersDescription: "「みつける」ページなどにピン留めしたいユーザーを改行で区切って記述します。"
pinnedPages: "ピン留めページ" pinnedPages: "ピン留めページ"
pinnedPagesDescription: "インスタンスのトップページにピン留めしたいページのパスを改行で区切って記述します。" pinnedPagesDescription: "インスタンスのトップページにピン留めしたいページのパスを改行で区切って記述します。"
pinnedClipId: "ピン留めするクリップのID"
pinnedNotes: "ピン留めされたノート"
hcaptcha: "hCaptcha" hcaptcha: "hCaptcha"
enableHcaptcha: "hCaptchaを有効にする" enableHcaptcha: "hCaptchaを有効にする"
hcaptchaSiteKey: "サイトキー" hcaptchaSiteKey: "サイトキー"

View file

@ -0,0 +1,14 @@
import {MigrationInterface, QueryRunner} from "typeorm";
export class instancePinnedClip1607151207216 implements MigrationInterface {
name = 'instancePinnedClip1607151207216'
public async up(queryRunner: QueryRunner): Promise<void> {
await queryRunner.query(`ALTER TABLE "meta" ADD "pinnedClipId" character varying(32)`);
}
public async down(queryRunner: QueryRunner): Promise<void> {
await queryRunner.query(`ALTER TABLE "meta" DROP COLUMN "pinnedClipId"`);
}
}

View file

@ -18,6 +18,8 @@
</div> </div>
</section> </section>
<MkInput v-model:value="pinnedClipId">{{ $t('pinnedClipId') }}</MkInput>
<section class="_card _vMargin"> <section class="_card _vMargin">
<div class="_content"> <div class="_content">
<MkInput v-model:value="maxNoteTextLength" type="number" :save="() => save()"><template #icon><Fa :icon="faPencilAlt"/></template>{{ $t('maxNoteTextLength') }}</MkInput> <MkInput v-model:value="maxNoteTextLength" type="number" :save="() => save()"><template #icon><Fa :icon="faPencilAlt"/></template>{{ $t('maxNoteTextLength') }}</MkInput>
@ -285,6 +287,7 @@ export default defineComponent({
blockedHosts: '', blockedHosts: '',
pinnedUsers: '', pinnedUsers: '',
pinnedPages: '', pinnedPages: '',
pinnedClipId: null,
maintainerName: null, maintainerName: null,
maintainerEmail: null, maintainerEmail: null,
name: null, name: null,
@ -373,6 +376,7 @@ export default defineComponent({
this.blockedHosts = this.meta.blockedHosts.join('\n'); this.blockedHosts = this.meta.blockedHosts.join('\n');
this.pinnedUsers = this.meta.pinnedUsers.join('\n'); this.pinnedUsers = this.meta.pinnedUsers.join('\n');
this.pinnedPages = this.meta.pinnedPages.join('\n'); this.pinnedPages = this.meta.pinnedPages.join('\n');
this.pinnedClipId = this.meta.pinnedClipId;
this.enableServiceWorker = this.meta.enableServiceWorker; this.enableServiceWorker = this.meta.enableServiceWorker;
this.swPublicKey = this.meta.swPublickey; this.swPublicKey = this.meta.swPublickey;
this.swPrivateKey = this.meta.swPrivateKey; this.swPrivateKey = this.meta.swPrivateKey;
@ -526,6 +530,7 @@ export default defineComponent({
blockedHosts: this.blockedHosts.split('\n') || [], blockedHosts: this.blockedHosts.split('\n') || [],
pinnedUsers: this.pinnedUsers ? this.pinnedUsers.split('\n') : [], pinnedUsers: this.pinnedUsers ? this.pinnedUsers.split('\n') : [],
pinnedPages: this.pinnedPages ? this.pinnedPages.split('\n') : [], pinnedPages: this.pinnedPages ? this.pinnedPages.split('\n') : [],
pinnedClipId: (this.pinnedClipId && this.pinnedClipId) != '' ? this.pinnedClipId : null,
enableServiceWorker: this.enableServiceWorker, enableServiceWorker: this.enableServiceWorker,
swPublicKey: this.swPublicKey, swPublicKey: this.swPublicKey,
swPrivateKey: this.swPrivateKey, swPrivateKey: this.swPrivateKey,

View file

@ -1,142 +0,0 @@
<template>
<div class="xyeqzsjl _panel">
<header>
<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
<XHeader class="title" :info="pageInfo" :with-back="false"/>
</header>
<div>
<component :is="component" v-bind="props" :ref="changePage"/>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
import XWindow from '@/components/ui/window.vue';
import XHeader from '@/ui/_common_/header.vue';
import { popout } from '@/scripts/popout';
import { resolve } from '@/router';
import { url } from '@/config';
export default defineComponent({
components: {
XWindow,
XHeader,
},
provide() {
return {
navHook: (path) => {
this.navigate(path);
}
};
},
props: {
initialPath: {
type: String,
required: true,
},
},
data() {
return {
pageInfo: null,
path: this.initialPath,
component: null,
props: null,
history: [],
faChevronLeft,
};
},
computed: {
url(): string {
return url + this.path;
},
},
created() {
const { component, props } = resolve(this.initialPath);
this.component = component;
this.props = props;
},
methods: {
changePage(page) {
if (page == null) return;
if (page.INFO) {
this.pageInfo = page.INFO;
}
},
navigate(path, record = true) {
if (record) this.history.push(this.path);
this.path = path;
const { component, props } = resolve(path);
this.component = component;
this.props = props;
},
back() {
this.navigate(this.history.pop(), false);
},
expand() {
this.$router.push(this.path);
this.$refs.window.close();
},
popout() {
popout(this.path, this.$el);
this.$refs.window.close();
},
},
});
</script>
<style lang="scss" scoped>
.xyeqzsjl {
--section-padding: 16px;
display: flex;
flex-direction: column;
contain: content;
> header {
$height: 50px;
display: flex;
position: relative;
z-index: 1;
height: $height;
line-height: $height;
box-shadow: 0px 1px var(--divider);
> button {
height: $height;
width: $height;
&:hover {
color: var(--fgHighlighted);
}
}
> .title {
flex: 1;
position: relative;
line-height: $height;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
}
> div {
flex: 1;
overflow: auto;
background: var(--bg);
}
}
</style>

View file

@ -1,8 +1,9 @@
<template> <template>
<div class="rsqzvsbo _section" v-if="meta"> <div class="rsqzvsbo _section" v-if="meta">
<div class="blocks"> <h2># {{ $t('pinnedNotes') }}</h2>
<XBlock class="block" v-for="path in meta.pinnedPages" :initial-path="path" :key="path"/> <MkPagination :pagination="pagination" #default="{items}">
</div> <XNote class="kmkqjgkl" v-for="note in items" :note="note" :key="note.id"/>
</MkPagination>
</div> </div>
</template> </template>
@ -12,16 +13,16 @@ import { toUnicode } from 'punycode';
import XSigninDialog from '@/components/signin-dialog.vue'; import XSigninDialog from '@/components/signin-dialog.vue';
import XSignupDialog from '@/components/signup-dialog.vue'; import XSignupDialog from '@/components/signup-dialog.vue';
import MkButton from '@/components/ui/button.vue'; import MkButton from '@/components/ui/button.vue';
import XNotes from '@/components/notes.vue'; import XNote from '@/components/note.vue';
import XBlock from './welcome.entrance.block.vue'; import MkPagination from '@/components/ui/pagination.vue';
import { host, instanceName } from '@/config'; import { host, instanceName } from '@/config';
import * as os from '@/os'; import * as os from '@/os';
export default defineComponent({ export default defineComponent({
components: { components: {
MkButton, MkButton,
XNotes, XNote,
XBlock, MkPagination,
}, },
data() { data() {
@ -29,6 +30,13 @@ export default defineComponent({
host: toUnicode(host), host: toUnicode(host),
instanceName, instanceName,
meta: null, meta: null,
pagination: {
endpoint: 'clips/notes',
limit: 10,
params: () => ({
clipId: this.meta.pinnedClipId,
})
},
}; };
}, },
@ -62,19 +70,28 @@ export default defineComponent({
.rsqzvsbo { .rsqzvsbo {
text-align: center; text-align: center;
> .blocks { > h2 {
display: grid; display: inline-block;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); color: #fff;
grid-gap: var(--margin); margin: 16px;
text-align: left; padding: 8px 12px;
background: rgba(0, 0, 0, 0.5);
> .block {
height: 600px;
} }
}
.kmkqjgkl {
display: inline-block;
vertical-align: middle;
width: 600px;
margin: 16px;
text-align: left;
box-shadow: 0 6px 46px rgb(0 0 0 / 30%);
border-radius: 12px;
@media (max-width: 800px) { @media (max-width: 800px) {
grid-template-columns: 1fr; display: block;
} width: 100%;
margin: 12px 0;
} }
} }
</style> </style>

View file

@ -2,7 +2,7 @@
:root { :root {
--baseContentWidth: 760px; --baseContentWidth: 760px;
--radius: 8px; --radius: 12px;
--marginFull: 16px; --marginFull: 16px;
--marginHalf: 10px; --marginHalf: 10px;
@ -320,6 +320,7 @@ hr {
._popup { ._popup {
background: var(--panel); background: var(--panel);
border-radius: var(--radius); border-radius: var(--radius);
contain: content;
} }
._section { ._section {

View file

@ -1,14 +1,14 @@
<template> <template>
<div class="mk-app"> <div class="mk-app" :style="{ backgroundImage: root ? `url(${ $store.state.instance.meta.backgroundImageUrl })` : 'none' }">
<div class="side" v-if="!narrow && $route.path !== '/'"> <div class="side" v-if="!narrow">
<XKanban class="kanban" full/> <XKanban class="kanban" full :transparent="root" :powered-by="root"/>
</div> </div>
<div class="main"> <div class="main">
<XKanban class="banner" :full="$route.path === '/'" v-if="narrow || $route.path === '/'"/> <XKanban class="banner" :full="root" :transparent="root" :powered-by="root" v-if="narrow"/>
<div class="contents"> <div class="contents">
<XHeader class="header" :info="pageInfo" v-if="$route.path !== '/'"/> <XHeader class="header" :info="pageInfo" v-if="!root"/>
<main> <main>
<router-view v-slot="{ Component }"> <router-view v-slot="{ Component }">
<transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition"> <transition :name="$store.state.device.animation ? 'page' : ''" mode="out-in" @enter="onTransition">
@ -16,7 +16,7 @@
</transition> </transition>
</router-view> </router-view>
</main> </main>
<div class="powered-by"> <div class="powered-by" v-if="!root">
<b><MkA to="/">{{ host }}</MkA></b> <b><MkA to="/">{{ host }}</MkA></b>
<small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small> <small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small>
</div> </div>
@ -97,6 +97,10 @@ export default defineComponent({
'h|/': this.help 'h|/': this.help
}; };
}, },
root(): boolean {
return this.$route.path === '/';
},
}, },
watch: { watch: {
@ -182,6 +186,9 @@ export default defineComponent({
.mk-app { .mk-app {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;
background-position: center;
background-size: cover;
background-attachment: fixed;
> .side { > .side {
width: 500px; width: 500px;
@ -199,6 +206,7 @@ export default defineComponent({
> .main { > .main {
flex: 1; flex: 1;
min-width: 0;
> .banner { > .banner {
} }

View file

@ -1,7 +1,6 @@
<template> <template>
<div class="rwqkcmrc" :style="{ backgroundImage: `url(${ $store.state.instance.meta.backgroundImageUrl })` }"> <div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $store.state.instance.meta.backgroundImageUrl })` }">
<div class="back"></div> <div class="back" :class="{ transparent }"></div>
<div class="fade" v-if="full"></div>
<div class="contents"> <div class="contents">
<div class="wrapper"> <div class="wrapper">
<h1 v-if="meta" :class="{ full }"> <h1 v-if="meta" :class="{ full }">
@ -27,6 +26,10 @@
</section> </section>
</MkPagination> </MkPagination>
</div> </div>
<div class="powered-by" v-if="poweredBy">
<b><MkA to="/">{{ host }}</MkA></b>
<small>Powered by <a href="https://github.com/syuilo/misskey" target="_blank">Misskey</a></small>
</div>
</template> </template>
</div> </div>
</div> </div>
@ -50,11 +53,21 @@ export default defineComponent({
}, },
props: { props: {
full :{ full: {
type: Boolean, type: Boolean,
required: false, required: false,
default: false, default: false,
} },
transparent: {
type: Boolean,
required: false,
default: false,
},
poweredBy: {
type: Boolean,
required: false,
default: false,
},
}, },
data() { data() {
@ -107,17 +120,12 @@ export default defineComponent({
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: var(--bg); background: rgba(0, 0, 0, 0.3);
opacity: 0.5;
}
> .fade { &.transparent {
position: absolute; -webkit-backdrop-filter: blur(12px);
top: 0; backdrop-filter: blur(12px);
left: 0; }
width: 100%;
height: 300px;
background: linear-gradient(rgba(#000, 0.5), transparent);
} }
> .contents { > .contents {
@ -223,6 +231,20 @@ export default defineComponent({
} }
} }
} }
> .powered-by {
padding: 28px;
font-size: 14px;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.5);
color: #fff;
> small {
display: block;
margin-top: 8px;
opacity: 0.5;
}
}
} }
} }
} }

View file

@ -1,6 +1,7 @@
import { Entity, Column, PrimaryColumn, ManyToOne, JoinColumn } from 'typeorm'; import { Entity, Column, PrimaryColumn, ManyToOne, JoinColumn } from 'typeorm';
import { User } from './user'; import { User } from './user';
import { id } from '../id'; import { id } from '../id';
import { Clip } from './clip';
@Entity() @Entity()
export class Meta { export class Meta {
@ -81,6 +82,12 @@ export class Meta {
}) })
public pinnedPages: string[]; public pinnedPages: string[];
@Column({
...id(),
nullable: true,
})
public pinnedClipId: Clip['id'] | null;
@Column('varchar', { @Column('varchar', {
length: 512, length: 512,
nullable: true, nullable: true,

View file

@ -220,6 +220,10 @@ export const meta = {
validator: $.optional.arr($.str), validator: $.optional.arr($.str),
}, },
pinnedClipId: {
validator: $.optional.nullable.type(ID),
},
langs: { langs: {
validator: $.optional.arr($.str), validator: $.optional.arr($.str),
desc: { desc: {
@ -561,6 +565,10 @@ export default define(meta, async (ps, me) => {
set.pinnedPages = ps.pinnedPages.filter(Boolean); set.pinnedPages = ps.pinnedPages.filter(Boolean);
} }
if (ps.pinnedClipId !== undefined) {
set.pinnedClipId = ps.pinnedClipId;
}
if (ps.summalyProxy !== undefined) { if (ps.summalyProxy !== undefined) {
set.summalyProxy = ps.summalyProxy; set.summalyProxy = ps.summalyProxy;
} }

View file

@ -142,7 +142,7 @@ export default define(meta, async (ps, me) => {
enableServiceWorker: instance.enableServiceWorker, enableServiceWorker: instance.enableServiceWorker,
...(ps.detail ? { ...(ps.detail ? {
pinnedPages: instance.pinnedPages, pinnedClipId: instance.pinnedClipId,
cacheRemoteFiles: instance.cacheRemoteFiles, cacheRemoteFiles: instance.cacheRemoteFiles,
proxyRemoteFiles: instance.proxyRemoteFiles, proxyRemoteFiles: instance.proxyRemoteFiles,
requireSetup: (await Users.count({ requireSetup: (await Users.count({