From 2aa800cd556cd3213f50cb8147db9a4ad5249c7e Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Thu, 9 Feb 2023 17:34:45 +0900
Subject: [PATCH] Update about-misskey.vue
---
packages/frontend/src/pages/about-misskey.vue | 36 ++++++++++++++++++-
1 file changed, 35 insertions(+), 1 deletion(-)
diff --git a/packages/frontend/src/pages/about-misskey.vue b/packages/frontend/src/pages/about-misskey.vue
index 0a62768d22..efd4bfec8e 100644
--- a/packages/frontend/src/pages/about-misskey.vue
+++ b/packages/frontend/src/pages/about-misskey.vue
@@ -73,7 +73,13 @@
</FormSection>
<FormSection>
<template #label><Mfm text="$[jelly ❤]"/> {{ i18n.ts._aboutMisskey.patrons }}</template>
- <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-gap: 12px;">
+ <div :class="$style.patronsWithIcon">
+ <div v-for="patron in patronsWithIcon" :class="$style.patronWithIcon">
+ <img :src="patron.icon" :class="$style.patronIcon">
+ <span :class="$style.patronName">{{ patron.name }}</span>
+ </div>
+ </div>
+ <div style="margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-gap: 12px;">
<div v-for="patron in patrons" :key="patron">{{ patron }}</div>
</div>
<p>{{ i18n.ts._aboutMisskey.morePatrons }}</p>
@@ -99,6 +105,11 @@ import { definePageMetadata } from '@/scripts/page-metadata';
import { claimAchievement, claimedAchievements } from '@/scripts/achievements';
import { $i } from '@/account';
+const patronsWithIcon = [{
+ name: 'カイヤン',
+ icon: 'https://misskey-hub.net/patrons/a2820716883e408cb87773e377ce7c8d.jpg',
+}];
+
const patrons = [
'まっちゃとーにゅ',
'mametsuko',
@@ -353,4 +364,27 @@ definePageMetadata({
.contributorUsername {
margin-left: 12px;
}
+
+.patronsWithIcon {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ grid-gap: 12px;
+}
+
+.patronWithIcon {
+ display: flex;
+ align-items: center;
+ padding: 12px;
+ background: var(--buttonBg);
+ border-radius: 6px;
+}
+
+.patronIcon {
+ width: 24px;
+ border-radius: 100%;
+}
+
+.patronName {
+ margin-left: 12px;
+}
</style>