トップページデザインを改修
This commit is contained in:
syuilo
parent
fbbc7d005d
commit
feca9940bc
11 changed files with 125 additions and 183 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue