wip
This commit is contained in:
syuilo
@@ -2,12 +2,6 @@
|
||||
<div class="mk-app">
|
||||
<div class="banner" v-if="$route.path === '/'" :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
|
||||
<div>
|
||||
<header>
|
||||
<MkA class="link" to="/">{{ $t('home') }}</MkA>
|
||||
<MkA class="link" to="/announcements">{{ $t('announcements') }}</MkA>
|
||||
<MkA class="link" to="/channels">{{ $t('channel') }}</MkA>
|
||||
<MkA class="link" to="/about">{{ $t('aboutX', { x: instanceName }) }}</MkA>
|
||||
</header>
|
||||
<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
|
||||
<div class="about" v-if="meta">
|
||||
<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
|
||||
@@ -20,16 +14,6 @@
|
||||
</div>
|
||||
<div class="banner-mini" v-else :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
|
||||
<div>
|
||||
<header>
|
||||
<MkA class="link" to="/">{{ $t('home') }}</MkA>
|
||||
<MkA class="link" to="/announcements">{{ $t('announcements') }}</MkA>
|
||||
<MkA class="link" to="/channels">{{ $t('channel') }}</MkA>
|
||||
<MkA class="link" to="/about">{{ $t('aboutX', { x: instanceName }) }}</MkA>
|
||||
<div class="action">
|
||||
<button class="_button primary" @click="signup()">{{ $t('signup') }}</button>
|
||||
<button class="_button" @click="signin()">{{ $t('login') }}</button>
|
||||
</div>
|
||||
</header>
|
||||
<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
|
||||
</div>
|
||||
</div>
|
||||
@@ -62,10 +46,8 @@ import { host, instanceName } from '@/config';
|
||||
import { search } from '@/scripts/search';
|
||||
import * as os from '@/os';
|
||||
import MkPagination from '@/components/ui/pagination.vue';
|
||||
import XSigninDialog from '@/components/signin-dialog.vue';
|
||||
import XSignupDialog from '@/components/signup-dialog.vue';
|
||||
import MkButton from '@/components/ui/button.vue';
|
||||
import XHeader from '../_common_/header.vue';
|
||||
import XHeader from './header.vue';
|
||||
|
||||
const DESKTOP_THRESHOLD = 1100;
|
||||
|
||||
@@ -150,18 +132,6 @@ export default defineComponent({
|
||||
onTransition() {
|
||||
if (window._scroll) window._scroll();
|
||||
},
|
||||
|
||||
signin() {
|
||||
os.popup(XSigninDialog, {
|
||||
autoSet: true
|
||||
}, {}, 'closed');
|
||||
},
|
||||
|
||||
signup() {
|
||||
os.popup(XSignupDialog, {
|
||||
autoSet: true
|
||||
}, {}, 'closed');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -264,59 +234,6 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
> .main {
|
||||
> header {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background: var(--panel);
|
||||
padding: 0 32px;
|
||||
text-align: left;
|
||||
overflow: auto;
|
||||
white-space: nowrap;
|
||||
|
||||
> .link {
|
||||
display: inline-block;
|
||||
line-height: 60px;
|
||||
padding: 0 0.7em;
|
||||
|
||||
&.MkA-active {
|
||||
box-shadow: 0 -2px 0 0 var(--accent) inset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
&.asBg {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
background: linear-gradient(transparent, var(--bg));
|
||||
}
|
||||
|
||||
> h1 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 8px #000;
|
||||
line-height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
> .contents {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@@ -326,14 +243,6 @@ export default defineComponent({
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
-webkit-backdrop-filter: blur(32px);
|
||||
backdrop-filter: blur(32px);
|
||||
background-color: var(--header);
|
||||
border-bottom: 1px solid var(--divider);
|
||||
}
|
||||
|
||||
> .powered-by {
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<div class="desc" v-html="meta.description || $t('introMisskey')"></div>
|
||||
</div>
|
||||
<div class="action">
|
||||
<button class="_button primary" @click="signup()">{{ $t('signup') }}</button>
|
||||
<button class="_buttonPrimary" @click="signup()">{{ $t('signup') }}</button>
|
||||
<button class="_button" @click="signin()">{{ $t('login') }}</button>
|
||||
</div>
|
||||
<div class="announcements panel">
|
||||
@@ -27,13 +27,6 @@
|
||||
</div>
|
||||
|
||||
<div class="main">
|
||||
<header>
|
||||
<MkA class="link" to="/">{{ $t('home') }}</MkA>
|
||||
<MkA class="link" to="/announcements">{{ $t('announcements') }}</MkA>
|
||||
<MkA class="link" to="/channels">{{ $t('channel') }}</MkA>
|
||||
<MkA class="link" to="/about">{{ $t('aboutX', { x: instanceName }) }}</MkA>
|
||||
</header>
|
||||
|
||||
<div v-if="narrow" class="banner" :style="{ backgroundImage: `url(${ $store.state.instance.meta.bannerUrl })` }">
|
||||
<h1 v-if="meta"><img class="logo" v-if="meta.logoImageUrl" :src="meta.logoImageUrl"><span v-else class="text">{{ instanceName }}</span></h1>
|
||||
</div>
|
||||
@@ -181,6 +174,7 @@ export default defineComponent({
|
||||
left: 0;
|
||||
width: 500px;
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
|
||||
@@ -235,11 +229,9 @@ export default defineComponent({
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
border-radius: 999px;
|
||||
background: var(--panel);
|
||||
|
||||
&.primary {
|
||||
background: var(--accent);
|
||||
color: #fff;
|
||||
&._button {
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
|
||||
171
src/client/ui/visitor/header.vue
Normal file
171
src/client/ui/visitor/header.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<div class="sqxihjet">
|
||||
<div class="content">
|
||||
<MkA to="/" class="link" active-class="active">{{ $t('home') }}</MkA>
|
||||
<MkA to="/explore" class="link" active-class="active">{{ $t('explore') }}</MkA>
|
||||
<MkA to="/featured" class="link" active-class="active">{{ $t('featured') }}</MkA>
|
||||
<MkA to="/channels" class="link" active-class="active">{{ $t('channel') }}</MkA>
|
||||
<div class="page link" v-if="info">
|
||||
<div class="title">
|
||||
<Fa v-if="info.icon" :icon="info.icon" :key="info.icon" class="icon"/>
|
||||
<MkAvatar v-else-if="info.avatar" class="avatar" :user="info.avatar" :disable-preview="true"/>
|
||||
<span v-if="info.title" class="text">{{ info.title }}</span>
|
||||
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
|
||||
</div>
|
||||
<button class="_button action" v-if="info.action" @click.stop="info.action.handler"><Fa :icon="info.action.icon" :key="info.action.icon"/></button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button class="_button search" @click="search()"><Fa :icon="faSearch" class="icon"/><span>{{ $t('search') }}</span></button>
|
||||
<button class="_buttonPrimary signup" @click="signup()">{{ $t('signup') }}</button>
|
||||
<button class="_button login" @click="signin()">{{ $t('login') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { faSearch } from '@fortawesome/free-solid-svg-icons';
|
||||
import XSigninDialog from '@/components/signin-dialog.vue';
|
||||
import XSignupDialog from '@/components/signup-dialog.vue';
|
||||
import * as os from '@/os';
|
||||
import { search } from '@/scripts/search';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
info: {
|
||||
required: true
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
faSearch
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
signin() {
|
||||
os.popup(XSigninDialog, {
|
||||
autoSet: true
|
||||
}, {}, 'closed');
|
||||
},
|
||||
|
||||
signup() {
|
||||
os.popup(XSignupDialog, {
|
||||
autoSet: true
|
||||
}, {}, 'closed');
|
||||
},
|
||||
|
||||
search
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sqxihjet {
|
||||
$height: 60px;
|
||||
line-height: $height;
|
||||
background: var(--panel);
|
||||
|
||||
> .content {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .link {
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
line-height: $height - 4px;
|
||||
border-top: solid 2px transparent;
|
||||
border-bottom: solid 2px transparent;
|
||||
|
||||
&.page {
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
> .page {
|
||||
> .title {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
|
||||
> .indicator {
|
||||
position: absolute;
|
||||
top: initial;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
color: var(--indicator);
|
||||
font-size: 12px;
|
||||
animation: blink 1s infinite;
|
||||
}
|
||||
|
||||
> .icon + .text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
$size: 32px;
|
||||
display: inline-block;
|
||||
width: $size;
|
||||
height: $size;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&._button {
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
box-shadow: 0 -2px 0 0 var(--accent) inset;
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
> .action {
|
||||
padding: 0 0 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> .right {
|
||||
margin-left: auto;
|
||||
|
||||
> .search {
|
||||
background: var(--bg);
|
||||
border-radius: 999px;
|
||||
width: 230px;
|
||||
line-height: $height - 20px;
|
||||
margin-right: 16px;
|
||||
text-align: left;
|
||||
|
||||
> * {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> .icon {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> .signup {
|
||||
border-radius: 999px;
|
||||
padding: 0 24px;
|
||||
line-height: $height - 20px;
|
||||
}
|
||||
|
||||
> .login {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user