remove unused visitor ui variant
This commit is contained in:
parent
30d8bc9259
commit
455758e542
GPG key ID:
9EE6577A2A06F8F1
1 changed files with 0 additions and 235 deletions
|
|
@ -1,235 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="mk-app">
|
|
||||||
<div v-if="mainRouter.currentRoute?.name === 'index'" class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
|
|
||||||
<div>
|
|
||||||
<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
|
|
||||||
<div v-if="meta" class="about">
|
|
||||||
<!-- eslint-disable-next-line vue/no-v-html -->
|
|
||||||
<div class="desc" v-html="meta.description || $ts.introMisskey"></div>
|
|
||||||
</div>
|
|
||||||
<div class="action">
|
|
||||||
<button class="_button primary" @click="signup()">{{ $ts.signup }}</button>
|
|
||||||
<button class="_button" @click="signin()">{{ $ts.login }}</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="banner-mini" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }">
|
|
||||||
<div>
|
|
||||||
<h1 v-if="meta"><img v-if="meta.logoImageUrl" class="logo" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="main">
|
|
||||||
<div ref="contents" class="contents" :class="{ wallpaper }">
|
|
||||||
<header v-show="mainRouter.currentRoute?.name !== 'index'" ref="header" class="header">
|
|
||||||
<XHeader :info="pageInfo"/>
|
|
||||||
</header>
|
|
||||||
<main ref="main">
|
|
||||||
<RouterView/>
|
|
||||||
</main>
|
|
||||||
<div class="powered-by">
|
|
||||||
<b><MkA to="/">{{ host }}</MkA></b>
|
|
||||||
<small>Powered by <a href="https://github.com/misskey-dev/misskey" target="_blank">Misskey</a></small>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import { defineComponent, defineAsyncComponent } from 'vue';
|
|
||||||
import XHeader from './header.vue';
|
|
||||||
import { host, instanceName } from '@/config';
|
|
||||||
import { search } from '@/scripts/search';
|
|
||||||
import * as os from '@/os';
|
|
||||||
import MkPagination from '@/components/ui/pagination.vue';
|
|
||||||
import MkButton from '@/components/ui/button.vue';
|
|
||||||
import { ColdDeviceStorage } from '@/store';
|
|
||||||
import { mainRouter } from '@/router';
|
|
||||||
|
|
||||||
const DESKTOP_THRESHOLD = 1100;
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
components: {
|
|
||||||
XHeader,
|
|
||||||
MkPagination,
|
|
||||||
MkButton,
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
host,
|
|
||||||
instanceName,
|
|
||||||
pageInfo: null,
|
|
||||||
meta: null,
|
|
||||||
narrow: window.innerWidth < 1280,
|
|
||||||
announcements: {
|
|
||||||
endpoint: 'announcements',
|
|
||||||
limit: 10,
|
|
||||||
},
|
|
||||||
mainRouter,
|
|
||||||
isDesktop: window.innerWidth >= DESKTOP_THRESHOLD,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
keymap(): any {
|
|
||||||
return {
|
|
||||||
'd': () => {
|
|
||||||
if (ColdDeviceStorage.get('syncDeviceDarkMode')) return;
|
|
||||||
this.$store.set('darkMode', !this.$store.state.darkMode);
|
|
||||||
},
|
|
||||||
's': search,
|
|
||||||
'h|/': () => {
|
|
||||||
window.open('https://misskey-hub.net/docs/keyboard-shortcut.md', '_blank');
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
document.documentElement.style.overflowY = 'scroll';
|
|
||||||
|
|
||||||
os.api('meta', { detail: true }).then(meta => {
|
|
||||||
this.meta = meta;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
if (!this.isDesktop) {
|
|
||||||
window.addEventListener('resize', () => {
|
|
||||||
if (window.innerWidth >= DESKTOP_THRESHOLD) this.isDesktop = true;
|
|
||||||
}, { passive: true });
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.mk-app {
|
|
||||||
min-height: 100vh;
|
|
||||||
|
|
||||||
> .banner {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
* {
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
> h1 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 96px 32px 0 32px;
|
|
||||||
text-shadow: 0 0 8px black;
|
|
||||||
|
|
||||||
> .logo {
|
|
||||||
vertical-align: bottom;
|
|
||||||
max-height: 150px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .about {
|
|
||||||
padding: 32px;
|
|
||||||
max-width: 580px;
|
|
||||||
margin: 0 auto;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-shadow: 0 0 8px black;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .action {
|
|
||||||
padding-bottom: 64px;
|
|
||||||
|
|
||||||
> button {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 10px 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: var(--panel);
|
|
||||||
color: var(--fg);
|
|
||||||
|
|
||||||
&.primary {
|
|
||||||
background: var(--accent);
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-right: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .banner-mini {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
background-position: center;
|
|
||||||
background-size: cover;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
|
|
||||||
* {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
> header {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
> h1 {
|
|
||||||
margin: 0;
|
|
||||||
padding: 32px;
|
|
||||||
text-shadow: 0 0 8px black;
|
|
||||||
|
|
||||||
> .logo {
|
|
||||||
vertical-align: bottom;
|
|
||||||
max-height: 100px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
> .main {
|
|
||||||
> .contents {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
|
|
||||||
> .header {
|
|
||||||
position: sticky;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
> .powered-by {
|
|
||||||
padding: 28px;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
border-top: 1px solid var(--divider);
|
|
||||||
|
|
||||||
> small {
|
|
||||||
display: block;
|
|
||||||
margin-top: 8px;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in a new issue