chore: format

This commit is contained in:
freeplay 2023-07-05 23:49:09 -04:00
parent 0bc4a6b758
commit 53a09b91c7
6 changed files with 108 additions and 61 deletions

View file

@ -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

View file

@ -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>

View file

@ -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",

View file

@ -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;

View file

@ -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>

View file

@ -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 {