chore: format
This commit is contained in:
Freeplay
parent
11d4fdaea8
commit
a441dd193d
11 changed files with 96 additions and 125 deletions
|
|
@ -97,7 +97,8 @@
|
|||
|
||||
let fontSize = localStorage.getItem("fontSize");
|
||||
if (fontSize) {
|
||||
if (fontSize < 10) { // need to do this for now, as values before were 1, 2, 3 depending on the option
|
||||
if (fontSize < 10) {
|
||||
// need to do this for now, as values before were 1, 2, 3 depending on the option
|
||||
localStorage.setItem("fontSize", null);
|
||||
fontSize = localStorage.getItem("fontSize");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,9 @@
|
|||
<template>
|
||||
<div
|
||||
class="instance-ticker"
|
||||
v-tooltip="instance.softwareName ? capitalize(instance.softwareName) : null"
|
||||
v-tooltip="
|
||||
instance.softwareName ? capitalize(instance.softwareName) : null
|
||||
"
|
||||
ref="ticker"
|
||||
:style="bg"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -4,11 +4,7 @@
|
|||
<slot name="key"></slot>
|
||||
</div>
|
||||
<div class="value">
|
||||
<Mfm
|
||||
v-if="text"
|
||||
:text="text"
|
||||
:advancedMfm="false"
|
||||
></Mfm>
|
||||
<Mfm v-if="text" :text="text" :advancedMfm="false"></Mfm>
|
||||
<slot v-else name="value"></slot>
|
||||
<button
|
||||
v-if="copy"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
<template>
|
||||
<a
|
||||
v-if="to"
|
||||
class="mention"
|
||||
:href="to"
|
||||
rel="noopener"
|
||||
@click.stop
|
||||
>
|
||||
<a v-if="to" class="mention" :href="to" rel="noopener" @click.stop>
|
||||
<i class="icon ph-bold ph-large" :class="'ph-' + icon"></i>
|
||||
<span class="main">
|
||||
<slot></slot>
|
||||
|
|
@ -58,19 +52,19 @@ const props = defineProps<{
|
|||
icon?: string;
|
||||
}>();
|
||||
|
||||
const canonical =
|
||||
props.host ?
|
||||
props.host === localHost
|
||||
const canonical = props.host
|
||||
? props.host === localHost
|
||||
? `@${props.username}`
|
||||
: `@${props.username}@${toUnicode(props.host)}` : null;
|
||||
: `@${props.username}@${toUnicode(props.host)}`
|
||||
: null;
|
||||
|
||||
const url = `/${canonical}`;
|
||||
|
||||
const isMe =
|
||||
props.username ?
|
||||
$i &&
|
||||
const isMe = props.username
|
||||
? $i &&
|
||||
`@${props.username}@${toUnicode(props.host)}` ===
|
||||
`@${$i.username}@${toUnicode(localHost)}`.toLowerCase() : null;
|
||||
`@${$i.username}@${toUnicode(localHost)}`.toLowerCase()
|
||||
: null;
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -115,7 +109,7 @@ const isMe =
|
|||
> i.icon {
|
||||
vertical-align: middle;
|
||||
font-size: 1.2em;
|
||||
margin-left: .4em;
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
|
||||
> .main > .host {
|
||||
|
|
|
|||
|
|
@ -75,10 +75,7 @@
|
|||
<div class="main">
|
||||
<div class="header-container">
|
||||
<MkAvatar class="avatar" :user="appearNote.user" />
|
||||
<XNoteHeader
|
||||
class="header"
|
||||
:note="appearNote"
|
||||
/>
|
||||
<XNoteHeader class="header" :note="appearNote" />
|
||||
</div>
|
||||
<div class="body">
|
||||
<MkSubNoteContent
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ const props = defineProps<{
|
|||
background: var(--buttonBg);
|
||||
border-radius: 6px;
|
||||
font-size: 0.9em;
|
||||
transition: background .2s;
|
||||
transition: background 0.2s;
|
||||
|
||||
&._button:hover {
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -79,7 +79,9 @@
|
|||
ref="tabsEl"
|
||||
v-if="hasTabs"
|
||||
class="tabs"
|
||||
:class="{ collapse: hasTabs && tabs.length > 3 && !noTabCollapse }"
|
||||
:class="{
|
||||
collapse: hasTabs && tabs.length > 3 && !noTabCollapse,
|
||||
}"
|
||||
>
|
||||
<button
|
||||
v-for="tab in tabs"
|
||||
|
|
@ -183,10 +185,9 @@ const props = withDefaults(
|
|||
to?: string;
|
||||
}>(),
|
||||
{
|
||||
displayHomeButton: !$i
|
||||
displayHomeButton: !$i,
|
||||
}
|
||||
)
|
||||
|
||||
);
|
||||
|
||||
const displayBackButton =
|
||||
props.displayBackButton &&
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
@slide-change="onSlideChange"
|
||||
>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<XKanban v-if="isActive"/>
|
||||
<XKanban v-if="isActive" />
|
||||
</swiper-slide>
|
||||
<swiper-slide v-slot="{ isActive }">
|
||||
<MkSpacer :content-max="800" v-if="isActive">
|
||||
|
|
@ -152,11 +152,13 @@ watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
|
|||
const headerActions = $computed(() => []);
|
||||
|
||||
const headerTabs = $computed(() => [
|
||||
!isDesktop ? {
|
||||
!isDesktop
|
||||
? {
|
||||
key: "home",
|
||||
icon: "ph-house ph-bold ph-lg",
|
||||
title: i18n.ts.home,
|
||||
} : [],
|
||||
}
|
||||
: [],
|
||||
{
|
||||
key: "local",
|
||||
icon: "ph-lightning ph-bold ph-lg",
|
||||
|
|
@ -220,10 +222,9 @@ let wallpaper = $ref(String);
|
|||
|
||||
os.api("meta", { detail: true }).then((res) => {
|
||||
meta = res;
|
||||
wallpaper = `url("${res.backgroundImageUrl}")`
|
||||
wallpaper = `url("${res.backgroundImageUrl}")`;
|
||||
});
|
||||
|
||||
|
||||
const paginationForLocal = {
|
||||
endpoint: "notes/featured" as const,
|
||||
limit: 10,
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@
|
|||
<XWidgets @mounted="attachSticky" />
|
||||
</div>
|
||||
|
||||
|
||||
<button
|
||||
v-if="!isDesktop && !isMobile"
|
||||
class="widgetButton _button"
|
||||
|
|
|
|||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<XKanban sticky v-if="isDesktop" />
|
||||
<main
|
||||
id="maincontent"
|
||||
>
|
||||
<XKanban mini v-if="!isDesktop && mainRouter.currentRoute.value.name !== 'index'" />
|
||||
<main id="maincontent">
|
||||
<XKanban
|
||||
mini
|
||||
v-if="!isDesktop && mainRouter.currentRoute.value.name !== 'index'"
|
||||
/>
|
||||
<RouterView />
|
||||
<footer class="powered-by">
|
||||
<MkA to="/">
|
||||
|
|
|
|||
|
|
@ -1,51 +1,34 @@
|
|||
<template>
|
||||
<header v-if="mini" class="mini-header">
|
||||
<img
|
||||
class="logo"
|
||||
:src="meta.logoImageUrl"
|
||||
/>
|
||||
<img class="logo" :src="meta.logoImageUrl" />
|
||||
<h1>
|
||||
<MkA
|
||||
to="/" class="link"
|
||||
>{{ instanceName }}</MkA>
|
||||
<MkA to="/" class="link">{{ instanceName }}</MkA>
|
||||
</h1>
|
||||
<MkButton
|
||||
class="home"
|
||||
:to="'/'"
|
||||
link
|
||||
rounded
|
||||
>
|
||||
<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="instance-info-container" v-else :class="{ sticky }">
|
||||
<header id="instance-info" v-on:scroll.passive="onScroll">
|
||||
<div class="banner">
|
||||
<img :src="meta.backgroundImageUrl" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="header">
|
||||
<img
|
||||
class="logo"
|
||||
:src="meta.logoImageUrl"
|
||||
/>
|
||||
<img class="logo" :src="meta.logoImageUrl" />
|
||||
<h1>
|
||||
<MkA
|
||||
to="/" class="link"
|
||||
>{{ instanceName }}</MkA>
|
||||
<MkA to="/" class="link">{{ instanceName }}</MkA>
|
||||
</h1>
|
||||
</div>
|
||||
<!-- <MkA class="_buttonIcon home" :to="'/'" v-tooltip="i18n.ts.home">
|
||||
<i class="ph-house ph-bold ph-lg"></i>
|
||||
</MkA> -->
|
||||
<button class="_buttonIcon menu" @click="showMenu" v-tooltip="i18n.ts.more">
|
||||
<button
|
||||
class="_buttonIcon menu"
|
||||
@click="showMenu"
|
||||
v-tooltip="i18n.ts.more"
|
||||
>
|
||||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<div v-if="meta" class="about">
|
||||
|
|
@ -63,23 +46,12 @@
|
|||
|
||||
<section>
|
||||
<div class="_formLinksGridFlex">
|
||||
<MkButton
|
||||
primary gradate
|
||||
rounded
|
||||
@click="signup"
|
||||
>
|
||||
<i
|
||||
class="ph-sign-in ph-bold"
|
||||
></i>
|
||||
<MkButton primary gradate rounded @click="signup">
|
||||
<i class="ph-sign-in ph-bold"></i>
|
||||
{{ i18n.ts.signup }}
|
||||
</MkButton>
|
||||
<MkButton
|
||||
rounded
|
||||
@click="signin"
|
||||
>
|
||||
<i
|
||||
class="ph-sign-out ph-bold"
|
||||
></i>
|
||||
<MkButton rounded @click="signin">
|
||||
<i class="ph-sign-out ph-bold"></i>
|
||||
{{ i18n.ts.login }}
|
||||
</MkButton>
|
||||
<MkButton
|
||||
|
|
@ -88,9 +60,7 @@
|
|||
rounded
|
||||
to="https://calckey.org/join/"
|
||||
>
|
||||
<i
|
||||
class="ph-airplane-tilt ph-bold"
|
||||
></i>
|
||||
<i class="ph-airplane-tilt ph-bold"></i>
|
||||
{{ i18n.ts.findAnotherInstance }}
|
||||
</MkButton>
|
||||
<MkButton
|
||||
|
|
@ -100,9 +70,7 @@
|
|||
rounded
|
||||
to="https://calckey.org/apps/"
|
||||
>
|
||||
<i
|
||||
class="ph-device-mobile ph-bold"
|
||||
></i>
|
||||
<i class="ph-device-mobile ph-bold"></i>
|
||||
{{ i18n.ts.apps }}
|
||||
</MkButton>
|
||||
</div>
|
||||
|
|
@ -114,30 +82,37 @@
|
|||
</p>
|
||||
|
||||
<FormSection v-if="announcement">
|
||||
<FormLink :to="'/announcements'"
|
||||
naked
|
||||
<FormLink :to="'/announcements'" naked
|
||||
><template #icon
|
||||
><i
|
||||
class="ph-megaphone-simple ph-bold ph-lg _flip"
|
||||
></i></template
|
||||
>{{ announcement.title }}:
|
||||
<span style="opacity: 0.8; font-weight: 400;">{{ announcement.text }}</span>
|
||||
<span style="opacity: 0.8; font-weight: 400">{{
|
||||
announcement.text
|
||||
}}</span>
|
||||
</FormLink>
|
||||
</FormSection>
|
||||
|
||||
<FormSection v-if="meta.maintainerName || meta.maintainerEmail">
|
||||
<FormSection
|
||||
v-if="meta.maintainerName || meta.maintainerEmail"
|
||||
>
|
||||
<div class="_formLinksGrid">
|
||||
<MkKeyValue v-if="meta.maintainerName" :text="meta.maintainerName">
|
||||
<MkKeyValue
|
||||
v-if="meta.maintainerName"
|
||||
:text="meta.maintainerName"
|
||||
>
|
||||
<template #key>{{
|
||||
i18n.ts.administrator
|
||||
}}</template>
|
||||
</MkKeyValue>
|
||||
<MkKeyValue v-if="meta.maintainerEmail">
|
||||
<template #key>{{
|
||||
i18n.ts.contact
|
||||
}}</template>
|
||||
<template #key>{{ i18n.ts.contact }}</template>
|
||||
<template #value>
|
||||
<MkMention :to="'mailto:' + meta.maintainerEmail" :icon="'envelope'">
|
||||
<MkMention
|
||||
:to="'mailto:' + meta.maintainerEmail"
|
||||
:icon="'envelope'"
|
||||
>
|
||||
{{ meta.maintainerEmail }}
|
||||
</MkMention>
|
||||
</template>
|
||||
|
|
@ -225,17 +200,16 @@ let collapsed = $ref(!isLong);
|
|||
|
||||
os.api("meta", { detail: true }).then((res) => {
|
||||
meta = res;
|
||||
isLong = meta.description && (meta.description.length > 500);
|
||||
isLong = meta.description && meta.description.length > 500;
|
||||
});
|
||||
|
||||
let announcement = $ref();
|
||||
os.api("announcements", {
|
||||
limit: 1
|
||||
limit: 1,
|
||||
}).then((res) => {
|
||||
announcement = res[0];
|
||||
});
|
||||
|
||||
|
||||
function signin() {
|
||||
os.popup(
|
||||
XSigninDialog,
|
||||
|
|
@ -245,7 +219,7 @@ function signin() {
|
|||
{},
|
||||
"closed"
|
||||
);
|
||||
};
|
||||
}
|
||||
|
||||
function signup() {
|
||||
os.popup(
|
||||
|
|
@ -256,7 +230,7 @@ function signup() {
|
|||
{},
|
||||
"closed"
|
||||
);
|
||||
};
|
||||
}
|
||||
function showMenu(ev) {
|
||||
openHelpMenu_(ev);
|
||||
}
|
||||
|
|
@ -302,7 +276,7 @@ function showMenu(ev) {
|
|||
}
|
||||
}
|
||||
margin-left: -1px;
|
||||
box-shadow: 0 0 48px -24px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 0 48px -24px rgba(0, 0, 0, 0.1);
|
||||
z-index: 9000;
|
||||
}
|
||||
#instance-info {
|
||||
|
|
@ -312,7 +286,7 @@ function showMenu(ev) {
|
|||
background: var(--accent);
|
||||
height: max-content;
|
||||
min-height: 100%;
|
||||
transition: transform .4s cubic-bezier(.5,0,0,1);
|
||||
transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
|
||||
.banner {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
|
|
@ -320,7 +294,7 @@ function showMenu(ev) {
|
|||
margin-inline: -1px;
|
||||
padding-top: 56.25%;
|
||||
mask: linear-gradient(to bottom, black, calc(100% - 50px), transparent);
|
||||
transition: min-height .4s, max-height .4s, filter .7s;
|
||||
transition: min-height 0.4s, max-height 0.4s, filter 0.7s;
|
||||
img {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -360,7 +334,11 @@ function showMenu(ev) {
|
|||
z-index: -1;
|
||||
clip-path: inset(55px 0 0 0 round var(--radius));
|
||||
mask: linear-gradient(transparent 55px, #000 50px, transparent);
|
||||
-webkit-mask: linear-gradient(transparent 55px, #000 50px, transparent);
|
||||
-webkit-mask: linear-gradient(
|
||||
transparent 55px,
|
||||
#000 50px,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
> .logo {
|
||||
height: 90px;
|
||||
|
|
@ -368,22 +346,23 @@ function showMenu(ev) {
|
|||
max-width: 100%;
|
||||
border-radius: var(--radius);
|
||||
margin-top: -5px;
|
||||
transition: transform .4s cubic-bezier(0.5,0,0,1);
|
||||
transition: transform 0.4s cubic-bezier(0.5, 0, 0, 1);
|
||||
}
|
||||
> h1 {
|
||||
margin-block: .7em;
|
||||
margin-block: 0.7em;
|
||||
font-size: 1.5em;
|
||||
color: var(--fgHighlighted)
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
.menu, .home {
|
||||
.menu,
|
||||
.home {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 100px;
|
||||
background: var(--buttonBg)
|
||||
background: var(--buttonBg);
|
||||
}
|
||||
.home {
|
||||
right: unset;
|
||||
|
|
@ -417,7 +396,7 @@ section {
|
|||
margin-top: 2em;
|
||||
}
|
||||
._formLinksGrid {
|
||||
grid-template-columns: repeat(2,minmax(150px,1fr));
|
||||
grid-template-columns: repeat(2, minmax(150px, 1fr));
|
||||
text-align: initial;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue