graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-11-23 01:03:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

2
locales/ja-JP.yml
View file

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

14
migration/1607151207216-instance-pinned-clip.ts Normal file
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"`);
}
}

5
src/client/pages/instance/settings.vue
View file

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

142
src/client/pages/welcome.entrance.block.vue
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>

53
src/client/pages/welcome.entrance.vue
View file

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

3
src/client/style.scss
View file

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

20
src/client/ui/visitor/b.vue
View file

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

52
src/client/ui/visitor/kanban.vue
View file

@ -1,7 +1,6 @@
<template>
<div class="rwqkcmrc" :style="{ backgroundImage: `url(${ $store.state.instance.meta.backgroundImageUrl })` }">
<div class="back"></div>
<div class="fade" v-if="full"></div>
<div class="rwqkcmrc" :style="{ backgroundImage: transparent ? 'none' : `url(${ $store.state.instance.meta.backgroundImageUrl })` }">
<div class="back" :class="{ transparent }"></div>
<div class="contents">
<div class="wrapper">
<h1 v-if="meta" :class="{ full }">
@ -27,6 +26,10 @@
</section>
</MkPagination>
</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>
</div>
</div>
@ -50,11 +53,21 @@ export default defineComponent({
},
props: {
full :{
full: {
type: Boolean,
required: false,
default: false,
}
},
transparent: {
type: Boolean,
required: false,
default: false,
},
poweredBy: {
type: Boolean,
required: false,
default: false,
},
},
data() {
@ -107,17 +120,12 @@ export default defineComponent({
left: 0;
width: 100%;
height: 100%;
background: var(--bg);
opacity: 0.5;
}
background: rgba(0, 0, 0, 0.3);
> .fade {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 300px;
background: linear-gradient(rgba(#000, 0.5), transparent);
&.transparent {
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
}
> .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;
}
}
}
}
}

7
src/models/entities/meta.ts
View file

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

8
src/server/api/endpoints/admin/update-meta.ts
View file

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

2
src/server/api/endpoints/meta.ts
View file

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