mirror of
https://github.com/misskey-dev/misskey.git
synced 2024-12-28 14:30:39 +01:00
🎨
This commit is contained in:
syuilo
parent
5a7a1d0be9
commit
eacdc0136f
3 changed files with 26 additions and 234 deletions
|
|
@ -190,7 +190,7 @@ function exploreOtherServers() {
|
||||||
border-radius: var(--radius);
|
border-radius: var(--radius);
|
||||||
overflow: clip;
|
overflow: clip;
|
||||||
box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
|
box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
|
||||||
padding: 16px;
|
padding: 16px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.statsItemLabel {
|
.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>
|
||||||
|
|
||||||
<div class="main">
|
<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">
|
<div class="contents">
|
||||||
<XHeader v-if="!root" class="header"/>
|
|
||||||
<main v-if="!root" style="container-type: inline-size;">
|
<main v-if="!root" style="container-type: inline-size;">
|
||||||
<RouterView/>
|
<RouterView/>
|
||||||
</main>
|
</main>
|
||||||
<main v-else>
|
<main v-else>
|
||||||
<RouterView/>
|
<RouterView/>
|
||||||
</main>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -60,7 +66,6 @@
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ComputedRef, onMounted, provide } from 'vue';
|
import { ComputedRef, onMounted, provide } from 'vue';
|
||||||
import XCommon from './_common_/common.vue';
|
import XCommon from './_common_/common.vue';
|
||||||
import XHeader from './visitor.header.vue';
|
|
||||||
import { host, instanceName } from '@/config';
|
import { host, instanceName } from '@/config';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
import { instance } from '@/instance';
|
import { instance } from '@/instance';
|
||||||
|
|
@ -203,23 +208,21 @@ defineExpose({
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
|
||||||
> .banner {
|
> .header {
|
||||||
}
|
background: var(--panel);
|
||||||
|
|
||||||
> .contents {
|
> .wide {
|
||||||
position: relative;
|
line-height: 50px;
|
||||||
z-index: 1;
|
padding: 0 16px;
|
||||||
|
|
||||||
> .powered-by {
|
> .link {
|
||||||
padding: 28px;
|
padding: 0 16px;
|
||||||
font-size: 14px;
|
}
|
||||||
text-align: center;
|
}
|
||||||
border-top: 1px solid var(--divider);
|
|
||||||
|
|
||||||
> small {
|
> .narrow {
|
||||||
display: block;
|
> .menu {
|
||||||
margin-top: 8px;
|
padding: 16px;
|
||||||
opacity: 0.5;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue