chore: format
This commit is contained in:
parent
0bc4a6b758
commit
53a09b91c7
6 changed files with 108 additions and 61 deletions
|
@ -128,8 +128,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="detailedView || (appearNote.channel && !inChannel)" class="info">
|
<div
|
||||||
<MkA v-if="detailedView" class="created-at" :to="notePage(appearNote)">
|
v-if="detailedView || (appearNote.channel && !inChannel)"
|
||||||
|
class="info"
|
||||||
|
>
|
||||||
|
<MkA
|
||||||
|
v-if="detailedView"
|
||||||
|
class="created-at"
|
||||||
|
:to="notePage(appearNote)"
|
||||||
|
>
|
||||||
<MkTime :time="appearNote.createdAt" mode="absolute" />
|
<MkTime :time="appearNote.createdAt" mode="absolute" />
|
||||||
</MkA>
|
</MkA>
|
||||||
<MkA
|
<MkA
|
||||||
|
|
|
@ -101,12 +101,7 @@
|
||||||
</nav>
|
</nav>
|
||||||
</template>
|
</template>
|
||||||
<div class="buttons right">
|
<div class="buttons right">
|
||||||
<MkButton
|
<MkButton v-if="!$i && displayHomeButton" :to="'/'" link rounded>
|
||||||
v-if="!$i && displayHomeButton"
|
|
||||||
:to="'/'"
|
|
||||||
link
|
|
||||||
rounded
|
|
||||||
>
|
|
||||||
<i class="ph-house ph-bold ph-lg"></i>
|
<i class="ph-house ph-bold ph-lg"></i>
|
||||||
{{ i18n.ts.home }}
|
{{ i18n.ts.home }}
|
||||||
</MkButton>
|
</MkButton>
|
||||||
|
|
|
@ -6,7 +6,6 @@ import XTutorial from "../components/MkTutorialDialog.vue";
|
||||||
import { i18n } from "@/i18n";
|
import { i18n } from "@/i18n";
|
||||||
import { $i } from "@/account";
|
import { $i } from "@/account";
|
||||||
|
|
||||||
|
|
||||||
export function openHelpMenu_(ev: MouseEvent) {
|
export function openHelpMenu_(ev: MouseEvent) {
|
||||||
os.popupMenu(
|
os.popupMenu(
|
||||||
[
|
[
|
||||||
|
@ -42,33 +41,39 @@ export function openHelpMenu_(ev: MouseEvent) {
|
||||||
window.open("https://calckey.org/apps", "_blank");
|
window.open("https://calckey.org/apps", "_blank");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
$i ? null : {
|
$i
|
||||||
type: "link",
|
? null
|
||||||
text: i18n.ts._mfm.cheatSheet,
|
: {
|
||||||
icon: "ph-question ph-bold ph-lg",
|
type: "link",
|
||||||
to: "/mfm-cheat-sheet",
|
text: i18n.ts._mfm.cheatSheet,
|
||||||
},
|
icon: "ph-question ph-bold ph-lg",
|
||||||
$i ? {
|
to: "/mfm-cheat-sheet",
|
||||||
type: "button",
|
},
|
||||||
action: async () => {
|
$i
|
||||||
defaultStore.set("tutorial", 0);
|
? {
|
||||||
os.popup(XTutorial, {}, {}, "closed");
|
type: "button",
|
||||||
},
|
action: async () => {
|
||||||
text: i18n.ts.replayTutorial,
|
defaultStore.set("tutorial", 0);
|
||||||
icon: "ph-circle-wavy-question ph-bold ph-lg",
|
os.popup(XTutorial, {}, {}, "closed");
|
||||||
} : undefined,
|
},
|
||||||
|
text: i18n.ts.replayTutorial,
|
||||||
|
icon: "ph-circle-wavy-question ph-bold ph-lg",
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
null,
|
null,
|
||||||
{
|
{
|
||||||
type: "parent",
|
type: "parent",
|
||||||
text: i18n.ts.developer,
|
text: i18n.ts.developer,
|
||||||
icon: "ph-code ph-bold ph-lg",
|
icon: "ph-code ph-bold ph-lg",
|
||||||
children: [
|
children: [
|
||||||
$i ? {
|
$i
|
||||||
type: "link",
|
? {
|
||||||
to: "/api-console",
|
type: "link",
|
||||||
text: "API Console",
|
to: "/api-console",
|
||||||
icon: "ph-terminal-window ph-bold ph-lg",
|
text: "API Console",
|
||||||
} : undefined,
|
icon: "ph-terminal-window ph-bold ph-lg",
|
||||||
|
}
|
||||||
|
: undefined,
|
||||||
{
|
{
|
||||||
text: i18n.ts.document,
|
text: i18n.ts.document,
|
||||||
icon: "ph-file-doc ph-bold ph-lg",
|
icon: "ph-file-doc ph-bold ph-lg",
|
||||||
|
|
|
@ -540,11 +540,13 @@ hr {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
._formLinksGridFlex { // "grid", anyways display flex my beloved
|
._formLinksGridFlex {
|
||||||
|
// "grid", anyways display flex my beloved
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
> ._button, > .linkBoxed {
|
> ._button,
|
||||||
|
> .linkBoxed {
|
||||||
flex-basis: 34%;
|
flex-basis: 34%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
width: 0;
|
width: 0;
|
||||||
|
|
|
@ -6,7 +6,10 @@
|
||||||
<XKanban sticky v-else-if="isDesktop" />
|
<XKanban sticky v-else-if="isDesktop" />
|
||||||
<main id="maincontent">
|
<main id="maincontent">
|
||||||
<RouterView />
|
<RouterView />
|
||||||
<footer class="powered-by" v-if="mainRouter.currentRoute.value.name !== 'index'">
|
<footer
|
||||||
|
class="powered-by"
|
||||||
|
v-if="mainRouter.currentRoute.value.name !== 'index'"
|
||||||
|
>
|
||||||
<MkA to="/">
|
<MkA to="/">
|
||||||
<MkInstanceTicker :instance="meta"></MkInstanceTicker>
|
<MkInstanceTicker :instance="meta"></MkInstanceTicker>
|
||||||
<small>{{ i18n.ts.poweredBy }}</small>
|
<small>{{ i18n.ts.poweredBy }}</small>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<header v-if="mini" class="mini-header">
|
<header v-if="mini" class="mini-header">
|
||||||
<img
|
<img
|
||||||
class="logo"
|
class="logo"
|
||||||
:src="
|
:src="
|
||||||
meta.logoImageUrl ||
|
meta.logoImageUrl ||
|
||||||
$instance.iconUrl ||
|
$instance.iconUrl ||
|
||||||
|
@ -17,22 +17,26 @@
|
||||||
{{ i18n.ts.home }}
|
{{ i18n.ts.home }}
|
||||||
</MkButton>
|
</MkButton>
|
||||||
</header>
|
</header>
|
||||||
<div class="instance-info-container" v-else :class="{ sticky, wallpaper: meta.backgroundImageUrl }">
|
<div
|
||||||
|
class="instance-info-container"
|
||||||
|
v-else
|
||||||
|
:class="{ sticky, wallpaper: meta.backgroundImageUrl }"
|
||||||
|
>
|
||||||
<header id="instance-info" v-on:scroll.passive="onScroll">
|
<header id="instance-info" v-on:scroll.passive="onScroll">
|
||||||
<div class="banner" v-if="meta.bannerUrl">
|
<div class="banner" v-if="meta.bannerUrl">
|
||||||
<img :src="meta.bannerUrl" />
|
<img :src="meta.bannerUrl" />
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<img
|
<img
|
||||||
class="logo"
|
class="logo"
|
||||||
:src="
|
:src="
|
||||||
$instance.iconUrl ||
|
$instance.iconUrl ||
|
||||||
$instance.faviconUrl ||
|
$instance.faviconUrl ||
|
||||||
'/favicon.ico'
|
'/favicon.ico'
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
<img
|
<img
|
||||||
v-if="meta.logoImageUrl"
|
v-if="meta.logoImageUrl"
|
||||||
:src="meta.logoImageUrl"
|
:src="meta.logoImageUrl"
|
||||||
class="logo"
|
class="logo"
|
||||||
|
@ -143,7 +147,10 @@
|
||||||
|
|
||||||
<FormSection v-if="meta.tosUrl">
|
<FormSection v-if="meta.tosUrl">
|
||||||
<div class="_formLinksGridFlex">
|
<div class="_formLinksGridFlex">
|
||||||
<FormLink v-if="meta.tosUrl" :to="meta.tosUrl" external
|
<FormLink
|
||||||
|
v-if="meta.tosUrl"
|
||||||
|
:to="meta.tosUrl"
|
||||||
|
external
|
||||||
><template #icon
|
><template #icon
|
||||||
><i
|
><i
|
||||||
class="ph-scroll ph-bold ph-lg"
|
class="ph-scroll ph-bold ph-lg"
|
||||||
|
@ -164,40 +171,53 @@
|
||||||
<div class="_formLinksGridFlex">
|
<div class="_formLinksGridFlex">
|
||||||
<FormLink wrap>
|
<FormLink wrap>
|
||||||
{{ i18n.ts.timelines }}
|
{{ i18n.ts.timelines }}
|
||||||
<template #suffix>{{
|
<template #suffix>{{
|
||||||
`${ i18n.ts._timelines.home },` +
|
`${i18n.ts._timelines.home},` +
|
||||||
(meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.local },`) +
|
(meta.disableLocalTimeline
|
||||||
(meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.social },`) +
|
? ""
|
||||||
(meta.disableRecommendedTimeline ? '' : ` ${ i18n.ts._timelines.recommended },`) +
|
: ` ${i18n.ts._timelines.local},`) +
|
||||||
(meta.disableGlobalTimeline ? '' : ` ${ i18n.ts._timelines.global }`)
|
(meta.disableLocalTimeline
|
||||||
|
? ""
|
||||||
|
: ` ${i18n.ts._timelines.social},`) +
|
||||||
|
(meta.disableRecommendedTimeline
|
||||||
|
? ""
|
||||||
|
: ` ${i18n.ts._timelines.recommended},`) +
|
||||||
|
(meta.disableGlobalTimeline
|
||||||
|
? ""
|
||||||
|
: ` ${i18n.ts._timelines.global}`)
|
||||||
}}</template>
|
}}</template>
|
||||||
</FormLink>
|
</FormLink>
|
||||||
<FormLink wrap>
|
<FormLink wrap>
|
||||||
{{ i18n.ts.characterLimit }}
|
{{ i18n.ts.characterLimit }}
|
||||||
<template #suffix>{{
|
<template #suffix>{{
|
||||||
i18n.t('_cw.chars', { count: meta.maxNoteTextLength })
|
i18n.t("_cw.chars", {
|
||||||
|
count: meta.maxNoteTextLength,
|
||||||
|
})
|
||||||
}}</template>
|
}}</template>
|
||||||
</FormLink>
|
</FormLink>
|
||||||
<FormLink wrap>
|
<FormLink wrap>
|
||||||
{{ i18n.ts.advancedSearch }}
|
{{ i18n.ts.advancedSearch }}
|
||||||
<template #suffix>{{
|
<template #suffix>{{
|
||||||
meta.features.searchFilters ? i18n.ts.yes : i18n.ts.no
|
meta.features.searchFilters
|
||||||
|
? i18n.ts.yes
|
||||||
|
: i18n.ts.no
|
||||||
}}</template>
|
}}</template>
|
||||||
</FormLink>
|
</FormLink>
|
||||||
<FormLink wrap>
|
<FormLink wrap>
|
||||||
{{ i18n.ts.driveCapacityPerLocalAccount }}
|
{{ i18n.ts.driveCapacityPerLocalAccount }}
|
||||||
<template #suffix>{{
|
<template #suffix>{{
|
||||||
meta.driveCapacityPerLocalUserMb + 'MB'
|
meta.driveCapacityPerLocalUserMb + "MB"
|
||||||
}}</template>
|
}}</template>
|
||||||
</FormLink>
|
</FormLink>
|
||||||
<FormLink wrap>
|
<FormLink wrap>
|
||||||
{{ i18n.ts.pushNotification }}
|
{{ i18n.ts.pushNotification }}
|
||||||
<template #suffix>{{
|
<template #suffix>{{
|
||||||
meta.features.serviceWorker ? i18n.ts.yes : i18n.ts.no
|
meta.features.serviceWorker
|
||||||
|
? i18n.ts.yes
|
||||||
|
: i18n.ts.no
|
||||||
}}</template>
|
}}</template>
|
||||||
</FormLink>
|
</FormLink>
|
||||||
|
|
||||||
|
|
||||||
<!-- <MkKeyValue
|
<!-- <MkKeyValue
|
||||||
:text="`${ i18n.ts._timelines.home },` +
|
:text="`${ i18n.ts._timelines.home },` +
|
||||||
(meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.local },`) +
|
(meta.disableLocalTimeline ? '' : ` ${ i18n.ts._timelines.local },`) +
|
||||||
|
@ -262,15 +282,18 @@ let meta = $ref<DetailedInstanceMetadata>();
|
||||||
|
|
||||||
let isLong = $ref(false);
|
let isLong = $ref(false);
|
||||||
let collapsed = $ref(!isLong);
|
let collapsed = $ref(!isLong);
|
||||||
const accentColor = getComputedStyle(document.documentElement).getPropertyValue("--accent");;
|
const accentColor = getComputedStyle(document.documentElement).getPropertyValue(
|
||||||
|
"--accent"
|
||||||
|
);
|
||||||
let wallpaper = $ref();
|
let wallpaper = $ref();
|
||||||
|
|
||||||
os.api("meta", { detail: true }).then((res) => {
|
os.api("meta", { detail: true }).then((res) => {
|
||||||
meta = res;
|
meta = res;
|
||||||
isLong = meta.description && meta.description.length > 500;
|
isLong = meta.description && meta.description.length > 500;
|
||||||
wallpaper =
|
wallpaper =
|
||||||
meta.backgroundImageUrl && props.sticky ? `url(${meta.backgroundImageUrl})`
|
meta.backgroundImageUrl && props.sticky
|
||||||
: meta.themeColor ?? accentColor;
|
? `url(${meta.backgroundImageUrl})`
|
||||||
|
: meta.themeColor ?? accentColor;
|
||||||
// wallpaper = meta.backgroundImageUrl ? null : meta.themeColor ?? accentColor;
|
// wallpaper = meta.backgroundImageUrl ? null : meta.themeColor ?? accentColor;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -357,7 +380,7 @@ function showMenu(ev) {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: v-bind('wallpaper');
|
background: v-bind("wallpaper");
|
||||||
background-position: center;
|
background-position: center;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-attachment: fixed;
|
background-attachment: fixed;
|
||||||
|
@ -372,7 +395,12 @@ function showMenu(ev) {
|
||||||
padding-top: min(56.25%, 70vh);
|
padding-top: min(56.25%, 70vh);
|
||||||
margin-bottom: calc(-120px - var(--radius));
|
margin-bottom: calc(-120px - var(--radius));
|
||||||
mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
|
mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
|
||||||
-webkit-mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
|
-webkit-mask: linear-gradient(
|
||||||
|
to bottom,
|
||||||
|
black,
|
||||||
|
calc(100% - 50px),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
transition: min-height 0.4s, max-height 0.4s, filter 0.7s;
|
transition: min-height 0.4s, max-height 0.4s, filter 0.7s;
|
||||||
img {
|
img {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -429,10 +457,14 @@ function showMenu(ev) {
|
||||||
filter: brightness(1.2);
|
filter: brightness(1.2);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
opacity: .5;
|
opacity: 0.5;
|
||||||
clip-path: inset(55px 0 0 0 round var(--radius));
|
clip-path: inset(55px 0 0 0 round var(--radius));
|
||||||
mask: linear-gradient(transparent 55px, #000 50px, transparent);
|
mask: linear-gradient(transparent 55px, #000 50px, transparent);
|
||||||
-webkit-mask: llinear-gradient(transparent 55px, #000 50px, transparent);
|
-webkit-mask: llinear-gradient(
|
||||||
|
transparent 55px,
|
||||||
|
#000 50px,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
}
|
}
|
||||||
> .logo {
|
> .logo {
|
||||||
height: 80px;
|
height: 80px;
|
||||||
|
@ -444,7 +476,7 @@ function showMenu(ev) {
|
||||||
&:last-child {
|
&:last-child {
|
||||||
display: block;
|
display: block;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
margin-block: .5em 1em !important;
|
margin-block: 0.5em 1em !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
> h1 {
|
> h1 {
|
||||||
|
@ -476,7 +508,10 @@ function showMenu(ev) {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-height: calc(9em + 50px);
|
max-height: calc(9em + 50px);
|
||||||
mask: linear-gradient(black calc(100% - 64px), transparent);
|
mask: linear-gradient(black calc(100% - 64px), transparent);
|
||||||
-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
|
-webkit-mask: linear-gradient(
|
||||||
|
black calc(100% - 64px),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.announcements {
|
.announcements {
|
||||||
|
|
Loading…
Reference in a new issue