mini header
This commit is contained in:
Freeplay
parent
7e6ef0faae
commit
11d4fdaea8
4 changed files with 51 additions and 40 deletions
|
|
@ -99,15 +99,16 @@
|
|||
</nav>
|
||||
</template>
|
||||
<div class="buttons right">
|
||||
<MkButton
|
||||
<!-- <MkButton
|
||||
v-if="!$i && displayHomeButton"
|
||||
class="home"
|
||||
:to="'/'"
|
||||
link
|
||||
rounded
|
||||
>
|
||||
<i class="ph-house ph-bold ph-lg"></i>
|
||||
{{ i18n.ts.home }}
|
||||
</MkButton>
|
||||
</MkButton> -->
|
||||
<template v-if="metadata.avatar && $i">
|
||||
<MkFollowButton
|
||||
v-if="narrow"
|
||||
|
|
@ -153,7 +154,6 @@ import MkFollowButton from "@/components/MkFollowButton.vue";
|
|||
import MkButton from "@/components/MkButton.vue";
|
||||
import { popupMenu } from "@/os";
|
||||
import { scrollToTop } from "@/scripts/scroll";
|
||||
import { globalEvents } from "@/events";
|
||||
import { injectPageMetadata } from "@/scripts/page-metadata";
|
||||
import { $i, openAccountMenu as openAccountMenu_ } from "@/account";
|
||||
import { i18n } from "@/i18n";
|
||||
|
|
|
|||
|
|
@ -137,8 +137,6 @@ matchMedia(`(min-width: ${DESKTOP_THRESHOLD - 1}px)`).onchange = (mql) => {
|
|||
syncSlide(isDesktop ? 1 : 0);
|
||||
};
|
||||
|
||||
provide("shouldOmitHeaderTitle", true);
|
||||
|
||||
const tabs = [
|
||||
"home",
|
||||
"local",
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<main
|
||||
id="maincontent"
|
||||
>
|
||||
<XKanban mini v-if="!isDesktop && mainRouter.currentRoute.value.name !== 'index'" />
|
||||
<RouterView />
|
||||
<footer class="powered-by">
|
||||
<MkA to="/">
|
||||
|
|
@ -23,9 +24,6 @@ import XKanban from "@/ui/visitor/kanban.vue";
|
|||
import MkInstanceTicker from "@/components/MkInstanceTicker.vue";
|
||||
import * as os from "@/os";
|
||||
import { LiteInstanceMetadata } from "calckey-js/built/entities";
|
||||
import { host } from "@/config";
|
||||
|
||||
|
||||
|
||||
provide("router", mainRouter);
|
||||
|
||||
|
|
@ -35,16 +33,11 @@ matchMedia(`(min-width: ${DESKTOP_THRESHOLD - 1}px)`).onchange = (mql) => {
|
|||
isDesktop = mql.matches;
|
||||
};
|
||||
|
||||
const accentColor = getComputedStyle(document.documentElement).getPropertyValue("--accent");
|
||||
|
||||
console.log(accentColor);
|
||||
|
||||
let meta = $ref<LiteInstanceMetadata>();
|
||||
|
||||
os.api("meta").then((res) => {
|
||||
meta = res;
|
||||
});
|
||||
|
||||
</script>
|
||||
<style lang="scss">
|
||||
#calckey_app {
|
||||
|
|
|
|||
|
|
@ -1,30 +1,32 @@
|
|||
<template>
|
||||
<header v-if="mini" class="mini-header">
|
||||
<img
|
||||
class="logo"
|
||||
:src="meta.logoImageUrl"
|
||||
/>
|
||||
<h1>
|
||||
<MkA
|
||||
to="/" class="link"
|
||||
>{{ instanceName }}</MkA>
|
||||
</h1>
|
||||
<MkButton
|
||||
class="home"
|
||||
:to="'/'"
|
||||
link
|
||||
rounded
|
||||
>
|
||||
<i class="ph-house ph-bold ph-lg"></i>
|
||||
{{ i18n.ts.home }}
|
||||
</MkButton>
|
||||
</header>
|
||||
<div class="instance-info-container"
|
||||
v-else
|
||||
:class="{ sticky }"
|
||||
>
|
||||
<header
|
||||
id="instance-info"
|
||||
v-on:scroll.passive="onScroll"
|
||||
>
|
||||
<!-- <div class="ticker" v-if="!expanded">
|
||||
<img
|
||||
class="logo"
|
||||
:src="meta.logoImageUrl"
|
||||
/>
|
||||
<div>
|
||||
<h1>
|
||||
<MkA
|
||||
to="/" class="link"
|
||||
>{{ instanceName }}</MkA>
|
||||
</h1>
|
||||
<p>{{ meta.description || i18n.ts.introMisskey }}</p>
|
||||
</div>
|
||||
<MkButton
|
||||
primary
|
||||
rounded
|
||||
@click.stop="expanded = true"
|
||||
>{{ i18n.ts.instanceInfo }}</MkButton>
|
||||
</div> -->
|
||||
<div class="banner">
|
||||
<img :src="meta.backgroundImageUrl" />
|
||||
</div>
|
||||
|
|
@ -197,10 +199,8 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue";
|
||||
import { host, instanceName } from "@/config";
|
||||
import { instanceName } from "@/config";
|
||||
import * as os from "@/os";
|
||||
import MkPagination from "@/components/MkPagination.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import FormSection from "@/components/form/section.vue";
|
||||
import FormLink from "@/components/form/link.vue";
|
||||
|
|
@ -215,6 +215,7 @@ import MkMention from "@/components/MkMention.vue";
|
|||
|
||||
defineProps<{
|
||||
sticky?: boolean;
|
||||
mini?: boolean;
|
||||
}>();
|
||||
|
||||
let meta = $ref<DetailedInstanceMetadata>();
|
||||
|
|
@ -259,14 +260,33 @@ function signup() {
|
|||
function showMenu(ev) {
|
||||
openHelpMenu_(ev);
|
||||
}
|
||||
function onScroll(ev) {
|
||||
if (ev.target.scrollTop == 0) {
|
||||
expanded = false;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mini-header {
|
||||
padding: 0 12px;
|
||||
background: var(--panel);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1em;
|
||||
height: 60px;
|
||||
img {
|
||||
height: 40px;
|
||||
min-width: 40px;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 1.2em;
|
||||
width: 0;
|
||||
flex-grow: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
:deep(._button) {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.instance-info-container {
|
||||
margin-top: -55px;
|
||||
&.sticky {
|
||||
|
|
|
|||
Loading…
Reference in a new issue