Frontend: Continued rebrand and overdue fixes
ci/woodpecker/push/ociImagePush Pipeline was successful
Details
ci/woodpecker/push/ociImagePush Pipeline was successful
Details
This commit is contained in:
parent
ac901161ab
commit
e91c1040e2
GPG Key ID:
BF6CB659ADEE60EC
Binary file not shown.
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 17 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
|
@ -7,6 +7,47 @@
|
|||
>
|
||||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<span
|
||||
class="follow-menu"
|
||||
:class="{
|
||||
large,
|
||||
full,
|
||||
}"
|
||||
v-if="
|
||||
$i != null && $i.id != user.id && user.hasPendingFollowRequestToYou
|
||||
"
|
||||
>
|
||||
<span v-if="full">
|
||||
{{ i18n.ts.followRequestYou }}
|
||||
</span>
|
||||
<span v-else>
|
||||
<i
|
||||
class="ph-hand-waving ph-bold ph-lg"
|
||||
:aria-label="i18n.ts.followRequestYou"
|
||||
></i>
|
||||
</span>
|
||||
<template v-if="waitIncoming">
|
||||
<i class="ph-circle-notch ph-bold ph-lg fa-pulse"></i>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
class="_button follow-incoming"
|
||||
:disabled="waitIncoming"
|
||||
@click.stop="accept(user)"
|
||||
v-tooltip="i18n.ts.accept"
|
||||
>
|
||||
<i class="ph-check ph-bold ph-lg"></i>
|
||||
</button>
|
||||
<button
|
||||
class="_button follow-incoming"
|
||||
:disabled="waitIncoming"
|
||||
@click.stop="reject(user)"
|
||||
v-tooltip="i18n.ts.reject"
|
||||
>
|
||||
<i class="ph-x ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</template>
|
||||
</span>
|
||||
<button
|
||||
v-if="$i != null && $i.id != user.id"
|
||||
class="kpoogebi _button follow-button"
|
||||
|
|
@ -95,8 +136,23 @@ let hasPendingFollowRequestFromYou = $ref(
|
|||
props.user.hasPendingFollowRequestFromYou
|
||||
);
|
||||
let wait = $ref(false);
|
||||
let waitIncoming = $ref(false);
|
||||
const connection = stream.useChannel("main");
|
||||
|
||||
function accept(user) {
|
||||
waitIncoming = true;
|
||||
os.api("following/requests/accept", { userId: user.id }).then(() => {
|
||||
emit("refresh");
|
||||
});
|
||||
}
|
||||
|
||||
function reject(user) {
|
||||
waitIncoming = true;
|
||||
os.api("following/requests/reject", { userId: user.id }).then(() => {
|
||||
emit("refresh");
|
||||
});
|
||||
}
|
||||
|
||||
if (props.user.isFollowing == null) {
|
||||
os.api("users/show", {
|
||||
userId: props.user.id,
|
||||
|
|
@ -186,6 +242,55 @@ onBeforeUnmount(() => {
|
|||
height: 2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.follow-menu {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
border: solid 1px var(--accent);
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
height: 2em;
|
||||
border-radius: 100px;
|
||||
background: var(--bg);
|
||||
vertical-align: middle;
|
||||
|
||||
&.full {
|
||||
padding: 0.2em 0.7em;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
&.large {
|
||||
font-size: 16px;
|
||||
height: 38px;
|
||||
padding: 0 12px 0 16px;
|
||||
}
|
||||
|
||||
&.follow-incoming {
|
||||
margin: 0 0.5em;
|
||||
|
||||
border-inline-start: solid 1px var(--accent);
|
||||
|
||||
&.active {
|
||||
color: var(--fgOnAccent);
|
||||
background: var(--accent);
|
||||
|
||||
&:hover {
|
||||
background: var(--accentLighten);
|
||||
border-color: var(--accentLighten);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(--accentDarken);
|
||||
border-color: var(--accentDarken);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.follow-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
|
|
|
|||
|
|
@ -33,6 +33,16 @@
|
|||
class="followed"
|
||||
>{{ i18n.ts.followsYou }}</span
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
$i &&
|
||||
$i.id != user.id &&
|
||||
user.hasPendingFollowRequestToYou
|
||||
"
|
||||
class="followed"
|
||||
>
|
||||
{{ i18n.ts.followRequestYou }}
|
||||
</span>
|
||||
</div>
|
||||
<MkAvatar
|
||||
class="avatar"
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
@load="iconLoaded"
|
||||
@click="gravity"
|
||||
/>
|
||||
<div class="misskey">Calckey</div>
|
||||
<div class="misskey">Magnetar</div>
|
||||
<div class="version">v{{ version }}</div>
|
||||
<span
|
||||
v-for="emoji in easterEggEmojis"
|
||||
|
|
@ -43,17 +43,12 @@
|
|||
</div>
|
||||
<div class="_formBlock" style="text-align: center">
|
||||
{{ i18n.ts._aboutMisskey.about }}<br /><a
|
||||
href="https://calckey.org/"
|
||||
href="https://git.astolfo.cool/natty/magnetar"
|
||||
target="_blank"
|
||||
class="_link"
|
||||
>{{ i18n.ts.learnMore }}</a
|
||||
>
|
||||
</div>
|
||||
<div class="_formBlock" style="text-align: center">
|
||||
<MkButton primary rounded inline @click="iLoveMisskey"
|
||||
>I <Mfm text="$[jelly ❤]" /> #Calckey</MkButton
|
||||
>
|
||||
</div>
|
||||
<FormSection>
|
||||
<div class="_formLinks">
|
||||
<FormLink
|
||||
|
|
@ -64,8 +59,11 @@
|
|||
><i class="ph-code ph-bold ph-lg"></i
|
||||
></template>
|
||||
{{ i18n.ts._aboutMisskey.source }}
|
||||
<template #suffix>Codeberg</template>
|
||||
<template #suffix>
|
||||
git.astolfo.cool/natty/magnetar
|
||||
</template>
|
||||
</FormLink>
|
||||
<!--
|
||||
<FormLink
|
||||
to="https://opencollective.com/calckey"
|
||||
external
|
||||
|
|
@ -86,12 +84,26 @@
|
|||
{{ i18n.ts._aboutMisskey.translation }}
|
||||
<template #suffix>Translate</template>
|
||||
</FormLink>
|
||||
-->
|
||||
</div>
|
||||
</FormSection>
|
||||
<FormSection>
|
||||
<template #label>{{
|
||||
i18n.ts._aboutMisskey.contributors
|
||||
}}</template>
|
||||
<template #label
|
||||
>{{ i18n.ts._aboutMisskey.contributors }}
|
||||
(Magnetar)
|
||||
</template>
|
||||
<div class="_formLinks">
|
||||
<FormLink to="/@natty@astolfo.social"
|
||||
><Mfm
|
||||
:text="'@natty@astolfo.social (Main developer)'"
|
||||
/></FormLink>
|
||||
</div>
|
||||
</FormSection>
|
||||
<FormSection>
|
||||
<template #label
|
||||
>{{ i18n.ts._aboutMisskey.contributors }}
|
||||
(Calckey)
|
||||
</template>
|
||||
<div class="_formLinks">
|
||||
<FormLink to="/@kainoa@calckey.social"
|
||||
><Mfm
|
||||
|
|
@ -134,9 +146,7 @@ import { nextTick, onBeforeUnmount } from "vue";
|
|||
import { version } from "@/config";
|
||||
import FormLink from "@/components/form/link.vue";
|
||||
import FormSection from "@/components/form/section.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import MkLink from "@/components/MkLink.vue";
|
||||
import MkSparkle from "@/components/MkSparkle.vue";
|
||||
import { physics } from "@/scripts/physics";
|
||||
import { i18n } from "@/i18n";
|
||||
import { defaultStore } from "@/store";
|
||||
|
|
@ -60,10 +60,10 @@
|
|||
|
||||
<FormSection>
|
||||
<MkKeyValue class="_formBlock" :copy="version">
|
||||
<template #key>Calckey</template>
|
||||
<template #key>Magnetar</template>
|
||||
<template #value>{{ version }}</template>
|
||||
</MkKeyValue>
|
||||
<FormLink to="/about-calckey">{{
|
||||
<FormLink to="/about-magnetar">{{
|
||||
i18n.ts.aboutMisskey
|
||||
}}</FormLink>
|
||||
</FormSection>
|
||||
|
|
@ -163,12 +163,12 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted, watch } from "vue";
|
||||
import { computed, onMounted, watch } from "vue";
|
||||
import { Virtual } from "swiper";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import XEmojis from "./about.emojis.vue";
|
||||
import XFederation from "./about.federation.vue";
|
||||
import { version, instanceName, host } from "@/config";
|
||||
import { host, version } from "@/config";
|
||||
import FormLink from "@/components/form/link.vue";
|
||||
import FormSection from "@/components/form/section.vue";
|
||||
import FormSuspense from "@/components/form/suspense.vue";
|
||||
|
|
|
|||
|
|
@ -125,6 +125,16 @@
|
|||
class="followed"
|
||||
>{{ i18n.ts.followsYou }}</span
|
||||
>
|
||||
<span
|
||||
v-if="
|
||||
$i &&
|
||||
$i.id != user.id &&
|
||||
user.hasPendingFollowRequestToYou
|
||||
"
|
||||
class="followed"
|
||||
>
|
||||
{{ i18n.ts.followRequestYou }}
|
||||
</span>
|
||||
<div v-if="$i?.isModerator || $i?.isAdmin">
|
||||
<span
|
||||
v-if="user.isSilenced"
|
||||
|
|
@ -356,12 +366,10 @@ import MkRemoteCaution from "@/components/MkRemoteCaution.vue";
|
|||
import MkInfo from "@/components/MkInfo.vue";
|
||||
import MkMoved from "@/components/MkMoved.vue";
|
||||
import { getScrollPosition } from "@/scripts/scroll";
|
||||
import number from "@/filters/number";
|
||||
import { userPage } from "@/filters/user";
|
||||
import * as os from "@/os";
|
||||
import { i18n } from "@/i18n";
|
||||
import { $i } from "@/account";
|
||||
import { host } from "@/config";
|
||||
import * as os from "@/os";
|
||||
|
||||
const XPhotos = defineAsyncComponent(() => import("./index.photos.vue"));
|
||||
const XActivity = defineAsyncComponent(() => import("./index.activity.vue"));
|
||||
|
|
@ -374,6 +382,14 @@ const props = withDefaults(
|
|||
{}
|
||||
);
|
||||
|
||||
function accept(user) {
|
||||
os.api("following/requests/accept", { userId: user.id });
|
||||
}
|
||||
|
||||
function reject(user) {
|
||||
os.api("following/requests/reject", { userId: user.id }).then();
|
||||
}
|
||||
|
||||
let parallaxAnimationId = $ref<null | number>(null);
|
||||
let narrow = $ref<null | boolean>(null);
|
||||
let rootEl = $ref<null | HTMLElement>(null);
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
<MkEmoji :normal="true" :no-style="true" emoji="💢" />
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="😥" />
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="😇" />
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🥴" />
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🍮" />
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🦊" />
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🦋" />
|
||||
</div>
|
||||
<div class="main">
|
||||
<img
|
||||
|
|
@ -98,18 +98,14 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {} from "vue";
|
||||
import { toUnicode } from "punycode/";
|
||||
import XTimeline from "./welcome.timeline.vue";
|
||||
import MarqueeText from "@/components/MkMarquee.vue";
|
||||
import XSigninDialog from "@/components/MkSigninDialog.vue";
|
||||
import XSignupDialog from "@/components/MkSignupDialog.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import XNote from "@/components/MkNote.vue";
|
||||
import MkFeaturedPhotos from "@/components/MkFeaturedPhotos.vue";
|
||||
import { host, instanceName } from "@/config";
|
||||
import { instanceName } from "@/config";
|
||||
import * as os from "@/os";
|
||||
import number from "@/filters/number";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
let meta = $ref();
|
||||
|
|
@ -180,7 +176,7 @@ function showMenu(ev) {
|
|||
text: i18n.ts.aboutMisskey,
|
||||
icon: "ph-info ph-bold ph-lg",
|
||||
action: () => {
|
||||
os.pageWindow("/about-calckey");
|
||||
os.pageWindow("/about-magnetar");
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,304 +0,0 @@
|
|||
<template>
|
||||
<div v-if="meta" class="rsqzvsbo">
|
||||
<div class="top">
|
||||
<MkFeaturedPhotos class="bg" />
|
||||
<XTimeline class="tl" />
|
||||
<div class="shape"></div>
|
||||
<div class="main">
|
||||
<h1>
|
||||
<img
|
||||
v-if="meta.logoImageUrl"
|
||||
class="logo"
|
||||
:src="meta.logoImageUrl"
|
||||
/><span v-else class="text">{{ instanceName }}</span>
|
||||
</h1>
|
||||
<div class="about">
|
||||
<div
|
||||
class="desc"
|
||||
v-html="meta.description || i18n.ts.headlineMisskey"
|
||||
></div>
|
||||
</div>
|
||||
<div class="action">
|
||||
<MkButton class="signup" inline gradate @click="signup()">{{
|
||||
i18n.ts.signup
|
||||
}}</MkButton>
|
||||
<MkButton class="signin" inline @click="signin()">{{
|
||||
i18n.ts.login
|
||||
}}</MkButton>
|
||||
</div>
|
||||
<div v-if="onlineUsersCount && stats" class="status">
|
||||
<div>
|
||||
<I18n
|
||||
:src="i18n.ts.nUsers"
|
||||
text-tag="span"
|
||||
class="users"
|
||||
>
|
||||
<template #n
|
||||
><b>{{
|
||||
number(stats.originalUsersCount)
|
||||
}}</b></template
|
||||
>
|
||||
</I18n>
|
||||
<I18n
|
||||
:src="i18n.ts.nNotes"
|
||||
text-tag="span"
|
||||
class="notes"
|
||||
>
|
||||
<template #n
|
||||
><b>{{
|
||||
number(stats.originalNotesCount)
|
||||
}}</b></template
|
||||
>
|
||||
</I18n>
|
||||
</div>
|
||||
<I18n
|
||||
:src="i18n.ts.onlineUsersCount"
|
||||
text-tag="span"
|
||||
class="online"
|
||||
>
|
||||
<template #n
|
||||
><b>{{ onlineUsersCount }}</b></template
|
||||
>
|
||||
</I18n>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/client-assets/misskey.svg" class="misskey" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { toUnicode } from "punycode/";
|
||||
import XSigninDialog from "@/components/MkSigninDialog.vue";
|
||||
import XSignupDialog from "@/components/MkSignupDialog.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import XNote from "@/components/MkNote.vue";
|
||||
import MkFeaturedPhotos from "@/components/MkFeaturedPhotos.vue";
|
||||
import XTimeline from "./welcome.timeline.vue";
|
||||
import { host, instanceName } from "@/config";
|
||||
import * as os from "@/os";
|
||||
import number from "@/filters/number";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
XNote,
|
||||
XTimeline,
|
||||
MkFeaturedPhotos,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
host: toUnicode(host),
|
||||
instanceName,
|
||||
meta: null,
|
||||
stats: null,
|
||||
tags: [],
|
||||
onlineUsersCount: null,
|
||||
i18n,
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
os.api("meta", { detail: true }).then((meta) => {
|
||||
this.meta = meta;
|
||||
});
|
||||
|
||||
os.api("stats").then((stats) => {
|
||||
this.stats = stats;
|
||||
});
|
||||
|
||||
os.api("get-online-users-count").then((res) => {
|
||||
this.onlineUsersCount = res.count;
|
||||
});
|
||||
|
||||
os.api("hashtags/list", {
|
||||
sort: "+mentionedLocalUsers",
|
||||
limit: 8,
|
||||
}).then((tags) => {
|
||||
this.tags = tags;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
signin() {
|
||||
os.popup(
|
||||
XSigninDialog,
|
||||
{
|
||||
autoSet: true,
|
||||
},
|
||||
{},
|
||||
"closed"
|
||||
);
|
||||
},
|
||||
|
||||
signup() {
|
||||
os.popup(
|
||||
XSignupDialog,
|
||||
{
|
||||
autoSet: true,
|
||||
},
|
||||
{},
|
||||
"closed"
|
||||
);
|
||||
},
|
||||
|
||||
showMenu(ev) {
|
||||
os.popupMenu(
|
||||
[
|
||||
{
|
||||
text: i18n.t("aboutX", { x: instanceName }),
|
||||
icon: "ph-info ph-bold ph-lg",
|
||||
action: () => {
|
||||
os.pageWindow("/about");
|
||||
},
|
||||
},
|
||||
{
|
||||
text: i18n.ts.aboutMisskey,
|
||||
icon: "ph-info ph-bold ph-lg",
|
||||
action: () => {
|
||||
os.pageWindow("/about-calckey");
|
||||
},
|
||||
},
|
||||
null,
|
||||
{
|
||||
text: i18n.ts.help,
|
||||
icon: "ph-question ph-bold ph-lg",
|
||||
action: () => {
|
||||
window.open(
|
||||
`https://misskey-hub.net/help.md`,
|
||||
"_blank"
|
||||
);
|
||||
},
|
||||
},
|
||||
],
|
||||
ev.currentTarget ?? ev.target
|
||||
);
|
||||
},
|
||||
|
||||
number,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rsqzvsbo {
|
||||
> .top {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
|
||||
> .bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
> .tl {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 64px;
|
||||
margin: auto;
|
||||
width: 500px;
|
||||
height: calc(100% - 128px);
|
||||
overflow: hidden;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 1) 128px,
|
||||
rgba(0, 0, 0, 1) calc(100% - 128px),
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
mask-image: linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0) 0%,
|
||||
rgba(0, 0, 0, 1) 128px,
|
||||
rgba(0, 0, 0, 1) calc(100% - 128px),
|
||||
rgba(0, 0, 0, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
> .shape {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--accent);
|
||||
clip-path: polygon(0% 0%, 40% 0%, 22% 100%, 0% 100%);
|
||||
}
|
||||
|
||||
> .misskey {
|
||||
position: absolute;
|
||||
bottom: 64px;
|
||||
left: 64px;
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
> .main {
|
||||
position: relative;
|
||||
width: min(450px, 100%);
|
||||
padding: 64px;
|
||||
color: #fff;
|
||||
font-size: 1.1em;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
> h1 {
|
||||
display: block;
|
||||
margin: 0 0 32px 0;
|
||||
padding: 0;
|
||||
|
||||
> .logo {
|
||||
vertical-align: bottom;
|
||||
max-height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
> .about {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
> .action {
|
||||
margin: 32px 0;
|
||||
|
||||
> * {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
> .signup {
|
||||
background: var(--panel);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
> .signin {
|
||||
background: var(--accent);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
> .status {
|
||||
margin: 32px 0;
|
||||
border-top: solid 1px rgba(255, 255, 255, 0.5);
|
||||
font-size: 90%;
|
||||
|
||||
> div {
|
||||
padding: 16px 0;
|
||||
|
||||
> span:not(:last-child) {
|
||||
padding-right: 1em;
|
||||
margin-right: 1em;
|
||||
border-right: solid 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,358 +0,0 @@
|
|||
<template>
|
||||
<div v-if="meta" class="rsqzvsbo">
|
||||
<div class="top">
|
||||
<MkFeaturedPhotos class="bg" />
|
||||
<div class="fade"></div>
|
||||
<div class="emojis">
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="👍" />
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="❤" />
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="😆" />
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🎉" />
|
||||
<MkEmoji :normal="true" :no-style="true" emoji="🍮" />
|
||||
</div>
|
||||
<div class="main">
|
||||
<img src="/client-assets/misskey.svg" class="misskey" />
|
||||
<div class="form _panel">
|
||||
<div class="bg">
|
||||
<div class="fade"></div>
|
||||
</div>
|
||||
<div class="fg">
|
||||
<h1>
|
||||
<img
|
||||
v-if="meta.logoImageUrl"
|
||||
class="logo"
|
||||
:src="meta.logoImageUrl"
|
||||
/><span v-else class="text">{{
|
||||
instanceName
|
||||
}}</span>
|
||||
</h1>
|
||||
<div class="about">
|
||||
<div
|
||||
class="desc"
|
||||
v-html="
|
||||
meta.description || i18n.ts.headlineMisskey
|
||||
"
|
||||
></div>
|
||||
</div>
|
||||
<div class="action">
|
||||
<MkButton inline gradate @click="signup()">{{
|
||||
i18n.ts.signup
|
||||
}}</MkButton>
|
||||
<MkButton inline @click="signin()">{{
|
||||
i18n.ts.login
|
||||
}}</MkButton>
|
||||
</div>
|
||||
<div v-if="onlineUsersCount && stats" class="status">
|
||||
<div>
|
||||
<I18n
|
||||
:src="i18n.ts.nUsers"
|
||||
text-tag="span"
|
||||
class="users"
|
||||
>
|
||||
<template #n
|
||||
><b>{{
|
||||
number(stats.originalUsersCount)
|
||||
}}</b></template
|
||||
>
|
||||
</I18n>
|
||||
<I18n
|
||||
:src="i18n.ts.nNotes"
|
||||
text-tag="span"
|
||||
class="notes"
|
||||
>
|
||||
<template #n
|
||||
><b>{{
|
||||
number(stats.originalNotesCount)
|
||||
}}</b></template
|
||||
>
|
||||
</I18n>
|
||||
</div>
|
||||
<I18n
|
||||
:src="i18n.ts.onlineUsersCount"
|
||||
text-tag="span"
|
||||
class="online"
|
||||
>
|
||||
<template #n
|
||||
><b>{{ onlineUsersCount }}</b></template
|
||||
>
|
||||
</I18n>
|
||||
</div>
|
||||
<button class="_button _acrylic menu" @click="showMenu">
|
||||
<i class="ph-dots-three-outline ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<MkA to="/announcements">{{ i18n.ts.announcements }}</MkA>
|
||||
<MkA to="/explore">{{ i18n.ts.explore }}</MkA>
|
||||
<MkA to="/featured">{{ i18n.ts.featured }}</MkA>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { toUnicode } from "punycode/";
|
||||
import XTimeline from "./welcome.timeline.vue";
|
||||
import XSigninDialog from "@/components/MkSigninDialog.vue";
|
||||
import XSignupDialog from "@/components/MkSignupDialog.vue";
|
||||
import MkButton from "@/components/MkButton.vue";
|
||||
import XNote from "@/components/MkNote.vue";
|
||||
import MkFeaturedPhotos from "@/components/MkFeaturedPhotos.vue";
|
||||
import { host, instanceName } from "@/config";
|
||||
import * as os from "@/os";
|
||||
import number from "@/filters/number";
|
||||
import { i18n } from "@/i18n";
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
MkButton,
|
||||
XNote,
|
||||
MkFeaturedPhotos,
|
||||
XTimeline,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
host: toUnicode(host),
|
||||
instanceName,
|
||||
meta: null,
|
||||
stats: null,
|
||||
tags: [],
|
||||
onlineUsersCount: null,
|
||||
i18n,
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
os.api("meta", { detail: true }).then((meta) => {
|
||||
this.meta = meta;
|
||||
});
|
||||
|
||||
os.api("stats").then((stats) => {
|
||||
this.stats = stats;
|
||||
});
|
||||
|
||||
os.api("get-online-users-count").then((res) => {
|
||||
this.onlineUsersCount = res.count;
|
||||
});
|
||||
|
||||
os.api("hashtags/list", {
|
||||
sort: "+mentionedLocalUsers",
|
||||
limit: 8,
|
||||
}).then((tags) => {
|
||||
this.tags = tags;
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
signin() {
|
||||
os.popup(
|
||||
XSigninDialog,
|
||||
{
|
||||
autoSet: true,
|
||||
},
|
||||
{},
|
||||
"closed"
|
||||
);
|
||||
},
|
||||
|
||||
signup() {
|
||||
os.popup(
|
||||
XSignupDialog,
|
||||
{
|
||||
autoSet: true,
|
||||
},
|
||||
{},
|
||||
"closed"
|
||||
);
|
||||
},
|
||||
|
||||
showMenu(ev) {
|
||||
os.popupMenu(
|
||||
[
|
||||
{
|
||||
text: i18n.t("aboutX", { x: instanceName }),
|
||||
icon: "ph-info ph-bold ph-lg",
|
||||
action: () => {
|
||||
os.pageWindow("/about");
|
||||
},
|
||||
},
|
||||
{
|
||||
text: i18n.ts.aboutMisskey,
|
||||
icon: "ph-info ph-bold ph-lg",
|
||||
action: () => {
|
||||
os.pageWindow("/about-calckey");
|
||||
},
|
||||
},
|
||||
],
|
||||
ev.currentTarget ?? ev.target
|
||||
);
|
||||
},
|
||||
number,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.rsqzvsbo {
|
||||
> .top {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
|
||||
> .bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
> .fade {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
> .emojis {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
left: 35px;
|
||||
|
||||
> * {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .main {
|
||||
position: relative;
|
||||
width: min(460px, 100%);
|
||||
margin: auto;
|
||||
|
||||
> .misskey {
|
||||
width: 150px;
|
||||
margin-bottom: 16px;
|
||||
|
||||
@media (max-width: 450px) {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
> .form {
|
||||
position: relative;
|
||||
box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
|
||||
|
||||
> .bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
opacity: 0.75;
|
||||
|
||||
> .fade {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 128px;
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
var(--panel),
|
||||
var(--X15)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
> .fg {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
> h1 {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 32px 32px 24px 32px;
|
||||
|
||||
> .logo {
|
||||
vertical-align: bottom;
|
||||
max-height: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
> .about {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
> .action {
|
||||
padding: 32px;
|
||||
|
||||
> * {
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
> .status {
|
||||
border-top: solid 0.5px var(--divider);
|
||||
padding: 32px;
|
||||
font-size: 90%;
|
||||
|
||||
> div {
|
||||
> span:not(:last-child) {
|
||||
padding-right: 1em;
|
||||
margin-right: 1em;
|
||||
border-right: solid 0.5px var(--divider);
|
||||
}
|
||||
}
|
||||
|
||||
> .online {
|
||||
::v-deep(b) {
|
||||
color: #41b781;
|
||||
}
|
||||
|
||||
::v-deep(span) {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .menu {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .nav {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 20px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 8px black;
|
||||
font-size: 0.9em;
|
||||
|
||||
> *:not(:last-child) {
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -325,8 +325,8 @@ export const routes = [
|
|||
hash: "initialTab",
|
||||
},
|
||||
{
|
||||
path: "/about-calckey",
|
||||
component: page(() => import("./pages/about-calckey.vue")),
|
||||
path: "/about-magnetar",
|
||||
component: page(() => import("./pages/about-magnetar.vue")),
|
||||
},
|
||||
{
|
||||
path: "/theme-editor",
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ export function openHelpMenu_(ev: MouseEvent) {
|
|||
type: "link",
|
||||
text: i18n.ts.aboutMisskey,
|
||||
icon: "ph-lightbulb ph-bold ph-lg",
|
||||
to: "/about-calckey",
|
||||
to: "/about-magnetar",
|
||||
},
|
||||
{
|
||||
type: "button",
|
||||
|
|
|
|||
|
|
@ -79,6 +79,7 @@ notes: "Poznámky"
|
|||
following: "Sledovaní"
|
||||
followers: "Sledující"
|
||||
followsYou: "Sledují vás"
|
||||
followRequestYou: "Žádá tě o sledování"
|
||||
createList: "Vytvořit seznam"
|
||||
manageLists: "Spravovat seznam"
|
||||
error: "Chyba"
|
||||
|
|
@ -92,7 +93,7 @@ enterListName: "Jméno seznamu"
|
|||
privacy: "Soukromí"
|
||||
makeFollowManuallyApprove: "Žádosti o sledování vyžadují potvrzení"
|
||||
defaultNoteVisibility: "Výchozí viditelnost"
|
||||
follow: "Sledovaní"
|
||||
follow: "Sledovat"
|
||||
followRequest: "Odeslat žádost o sledování"
|
||||
followRequests: "Žádosti o sledování"
|
||||
unfollow: "Přestat sledovat"
|
||||
|
|
@ -347,7 +348,7 @@ recentlyUpdatedUsers: "Nedávno aktívni uživatelé"
|
|||
popularTags: "Populární tagy"
|
||||
userList: "Seznamy"
|
||||
about: "Informace"
|
||||
aboutMisskey: "O Calckey"
|
||||
aboutMisskey: "O Magnetaru"
|
||||
administrator: "Administrátor"
|
||||
token: "Token"
|
||||
twoStepAuthentication: "Dvoufaktorová autentikace"
|
||||
|
|
@ -495,7 +496,7 @@ disableAll: "Vypnout vše"
|
|||
notificationType: "Typy oznámení"
|
||||
edit: "Upravit"
|
||||
emailServer: "Mailový server"
|
||||
enableEmail: "Zapnout email dystribuci"
|
||||
enableEmail: "Zapnout distribuci emailů"
|
||||
email: "Email"
|
||||
emailAddress: "Emailová adresa"
|
||||
smtpConfig: "Konfigurace SMTP serveru"
|
||||
|
|
@ -1007,3 +1008,4 @@ renoteMute: Ztlumit přeposílání
|
|||
renoteUnmute: Zrušit ztlumení přeposílání
|
||||
flagSpeakAsCat: Mluvit jako kočka
|
||||
flagSpeakAsCatDescription: Vaše příspěvky budou v kočičím režimu nyanifikovány.
|
||||
controlPanel: "Ovládací panel"
|
||||
|
|
@ -90,6 +90,7 @@ notes: "Posts"
|
|||
following: "Following"
|
||||
followers: "Followers"
|
||||
followsYou: "Follows you"
|
||||
followRequestYou: "Requested to follow you"
|
||||
createList: "Create list"
|
||||
manageLists: "Manage lists"
|
||||
error: "Error"
|
||||
|
|
@ -438,7 +439,7 @@ exploreFediverse: "Explore the Fediverse"
|
|||
popularTags: "Popular tags"
|
||||
userList: "Lists"
|
||||
about: "About"
|
||||
aboutMisskey: "About Calckey"
|
||||
aboutMisskey: "About Magnetar"
|
||||
administrator: "Administrator"
|
||||
token: "Token"
|
||||
twoStepAuthentication: "Two-factor authentication"
|
||||
|
|
@ -1201,8 +1202,7 @@ _registry:
|
|||
domain: "Domain"
|
||||
createKey: "Create key"
|
||||
_aboutMisskey:
|
||||
about: "Calckey is a fork of Misskey made by ThatOneCalculator, which has been in
|
||||
development since 2022."
|
||||
about: "Magnetar, developed by Natty, is a social media software based on Calckey."
|
||||
contributors: "Main contributors"
|
||||
allContributors: "All contributors"
|
||||
source: "Source code"
|
||||
|
|
|
|||
Loading…
Reference in New Issue