enhance: ダイアログのお知らせにも画像がある場合見せるように (#157)

MisskeyIO · Aug 22, 2023 · 001f637 · 001f637
1 parent e1218de
commit 001f637
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/frontend/src/components/MkAnnouncementDialog.vue b/packages/frontend/src/components/MkAnnouncementDialog.vue
@@ -15,7 +15,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</span>
 			<Mfm :text="announcement.title"/>
 		</div>
-		<div :class="$style.content"><Mfm :text="announcement.text"/></div>
+		<div :class="$style.content">
+			<Mfm :text="announcement.text"/>
+			<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
+		</div>
 		<MkButton :class="$style.gotIt" primary full :disabled="gotItDisabled" @click="gotIt">{{ i18n.ts.gotIt }}<span v-if="secVisible"> ({{ sec }})</span></MkButton>
 	</div>
 </MkModal>
@@ -109,6 +112,7 @@ onMounted(() => {
 }
 
 .header {
+	font-weight: bold;
 	font-size: 120%;
 }
 
@@ -118,5 +122,10 @@ onMounted(() => {
 
 .content {
 	margin: 1em 0;
+	> img {
+		display: block;
+		max-height: 300px;
+		max-width: 100%;
+	}
 }
 </style>
diff --git a/packages/frontend/src/pages/announcements.vue b/packages/frontend/src/pages/announcements.vue
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div :class="$style.content">
 						<Mfm :text="announcement.text"/>
 						<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
-						<div style="opacity: 0.7; font-size: 85%;">
+						<div style="margin-top: 8px; opacity: 0.7; font-size: 85%;">
 							<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
 						</div>
 					</div>
@@ -137,6 +137,7 @@ watch(() => $i?.unreadAnnouncements.length ?? 0, () => {
 .header {
 	margin-bottom: 16px;
 	font-weight: bold;
+	font-size: 120%;
 }
 
 .content {