🎨
This commit is contained in:
syuilo
parent
5a7a1d0be9
commit
eacdc0136f
|
|
@ -190,7 +190,7 @@ function exploreOtherServers() {
|
|||
border-radius: var(--radius);
|
||||
overflow: clip;
|
||||
box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
|
||||
padding: 16px;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.statsItemLabel {
|
||||
|
|
|
|||
|
|
@ -1,211 +0,0 @@
|
|||
<template>
|
||||
<div class="sqxihjet">
|
||||
<div v-if="narrow === false" class="wide">
|
||||
<div class="content">
|
||||
<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i>{{ i18n.ts.home }}</MkA>
|
||||
<MkA v-if="isTimelineAvailable" to="/timeline" class="link" active-class="active"><i class="ti ti-message icon"></i>{{ i18n.ts.timeline }}</MkA>
|
||||
<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i>{{ i18n.ts.explore }}</MkA>
|
||||
<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i>{{ i18n.ts.channel }}</MkA>
|
||||
<div class="right">
|
||||
<button class="_button search" @click="search()"><i class="ti ti-search icon"></i><span>{{ i18n.ts.search }}</span></button>
|
||||
<button class="_buttonPrimary signup" @click="signup()">{{ i18n.ts.signup }}</button>
|
||||
<button class="_button login" @click="signin()">{{ i18n.ts.login }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="narrow === true" class="narrow">
|
||||
<button class="menu _button" @click="$parent.showMenu = true">
|
||||
<i class="ti ti-menu-2 icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import XSigninDialog from '@/components/MkSigninDialog.vue';
|
||||
import XSignupDialog from '@/components/MkSignupDialog.vue';
|
||||
import * as os from '@/os';
|
||||
import { instance } from '@/instance';
|
||||
import { mainRouter } from '@/router';
|
||||
import { i18n } from '@/i18n';
|
||||
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
narrow: null,
|
||||
showMenu: false,
|
||||
isTimelineAvailable: instance.policies.ltlAvailable || instance.policies.gtlAvailable,
|
||||
i18n,
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.narrow = this.$el.clientWidth < 1300;
|
||||
},
|
||||
|
||||
methods: {
|
||||
signin() {
|
||||
os.popup(XSigninDialog, {
|
||||
autoSet: true,
|
||||
}, {}, 'closed');
|
||||
},
|
||||
|
||||
signup() {
|
||||
os.popup(XSignupDialog, {
|
||||
autoSet: true,
|
||||
}, {}, 'closed');
|
||||
},
|
||||
|
||||
search() {
|
||||
mainRouter.push('/search');
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sqxihjet {
|
||||
$height: 50px;
|
||||
position: sticky;
|
||||
width: 50px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1000;
|
||||
line-height: $height;
|
||||
-webkit-backdrop-filter: var(--blur, blur(32px));
|
||||
backdrop-filter: var(--blur, blur(32px));
|
||||
background-color: var(--X16);
|
||||
|
||||
> .wide {
|
||||
> .content {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .link {
|
||||
$line: 3px;
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
line-height: $height - ($line * 2);
|
||||
border-top: solid $line transparent;
|
||||
border-bottom: solid $line transparent;
|
||||
|
||||
> .icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
&.page {
|
||||
border-bottom-color: var(--accent);
|
||||
}
|
||||
}
|
||||
|
||||
> .page {
|
||||
> .title {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
|
||||
> .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .narrow {
|
||||
display: flex;
|
||||
|
||||
> .menu,
|
||||
> .action {
|
||||
width: $height;
|
||||
height: $height;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
> .title {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
> .icon + .text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
$size: 32px;
|
||||
display: inline-block;
|
||||
width: $size;
|
||||
height: $size;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -10,20 +10,26 @@
|
|||
</div>
|
||||
|
||||
<div class="main">
|
||||
<XKanban v-if="narrow && !root" class="banner" :powered-by="root"/>
|
||||
|
||||
<div class="header">
|
||||
<div v-if="narrow === false" class="wide">
|
||||
<MkA to="/" class="link" active-class="active"><i class="ti ti-home icon"></i> {{ i18n.ts.home }}</MkA>
|
||||
<MkA v-if="isTimelineAvailable" to="/timeline" class="link" active-class="active"><i class="ti ti-message icon"></i> {{ i18n.ts.timeline }}</MkA>
|
||||
<MkA to="/explore" class="link" active-class="active"><i class="ti ti-hash icon"></i> {{ i18n.ts.explore }}</MkA>
|
||||
<MkA to="/channels" class="link" active-class="active"><i class="ti ti-device-tv icon"></i> {{ i18n.ts.channel }}</MkA>
|
||||
</div>
|
||||
<div v-else-if="narrow === true" class="narrow">
|
||||
<button class="menu _button" @click="showMenu = true">
|
||||
<i class="ti ti-menu-2 icon"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contents">
|
||||
<XHeader v-if="!root" class="header"/>
|
||||
<main v-if="!root" style="container-type: inline-size;">
|
||||
<RouterView/>
|
||||
</main>
|
||||
<main v-else>
|
||||
<RouterView/>
|
||||
</main>
|
||||
<div v-if="!root" 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>
|
||||
|
||||
|
|
@ -60,7 +66,6 @@
|
|||
<script lang="ts" setup>
|
||||
import { ComputedRef, onMounted, provide } from 'vue';
|
||||
import XCommon from './_common_/common.vue';
|
||||
import XHeader from './visitor.header.vue';
|
||||
import { host, instanceName } from '@/config';
|
||||
import * as os from '@/os';
|
||||
import { instance } from '@/instance';
|
||||
|
|
@ -203,23 +208,21 @@ defineExpose({
|
|||
flex: 1;
|
||||
min-width: 0;
|
||||
|
||||
> .banner {
|
||||
}
|
||||
> .header {
|
||||
background: var(--panel);
|
||||
|
||||
> .contents {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
> .wide {
|
||||
line-height: 50px;
|
||||
padding: 0 16px;
|
||||
|
||||
> .powered-by {
|
||||
padding: 28px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
border-top: 1px solid var(--divider);
|
||||
> .link {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> small {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
opacity: 0.5;
|
||||
> .narrow {
|
||||
> .menu {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue