kaslo/pawkey-sk
1
0
Fork 0
Code Packages Activity

better block display for <bdi> elements

Browse Source 
We use MfM in all sorts of places, and only some of them are actual
blocks. We can now tell the `Mfm` component to make the top-level
`<bdi>` a block when we need to (mostly note bodies, user
descriptions, announcements) and leave it inline in all other places.

This should still rendener inline rtl content embedded in ltr text in
a sensible way, while providing right-alignment for fully rtl blocks.
This commit is contained in:
dakkar
2024-06-07 11:01:49 +01:00
parent b2088e60b7
commit 43c0ffe7f8
29 changed files with 72 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/src/pages/announcements.vue
+1 -1
View File
@@ -24,7 +24,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<span>{{ announcement.title }}</span>
</div>
<div :class="$style.content">
<Mfm :text="announcement.text"/>
<Mfm :text="announcement.text" :isBlock="true" />
<img v-if="announcement.imageUrl" :src="announcement.imageUrl"/>
<div style="opacity: 0.7; font-size: 85%;">
<MkTime :time="announcement.updatedAt ?? announcement.createdAt" mode="detail"/>
packages/frontend/src/pages/channel.vue
+1 -1
View File
@@ -22,7 +22,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.bannerFade"></div>
</div>
<div v-if="channel.description" :class="$style.description">
<Mfm :text="channel.description" :isNote="false"/>
<Mfm :text="channel.description" :isBlock="true" :isNote="false"/>
</div>
</div>
packages/frontend/src/pages/clip.vue
+1 -1
View File
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="clip" class="_gaps">
<div class="_panel">
<div v-if="clip.description" :class="$style.description">
<Mfm :text="clip.description" :isNote="false"/>
<Mfm :text="clip.description" :isBlock="true" :isNote="false"/>
</div>
<MkButton v-if="favorited" v-tooltip="i18n.ts.unfavorite" asLike rounded primary @click="unfavorite()"><i class="ph-heart ph-bold ph-lg"></i><span v-if="clip.favoritedCount > 0" style="margin-left: 6px;">{{ clip.favoritedCount }}</span></MkButton>
<MkButton v-else v-tooltip="i18n.ts.favorite" asLike rounded @click="favorite()"><i class="ph-heart ph-bold ph-lg"></i><span v-if="clip.favoritedCount > 0" style="margin-left: 6px;">{{ clip.favoritedCount }}</span></MkButton>
packages/frontend/src/pages/flash/flash.vue
+1 -1
View File
@@ -25,7 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-else :class="$style.ready">
<div class="_panel main">
<div class="title">{{ flash.title }}</div>
<div class="summary"><Mfm :text="flash.summary"/></div>
<div class="summary"><Mfm :text="flash.summary" :isBlock="true"/></div>
<MkButton class="start" gradate rounded large @click="start">Play</MkButton>
<div class="info">
<span v-tooltip="i18n.ts.numberOfLikes"><i class="ph-heart ph-bold ph-lg"></i> {{ flash.likedCount }}</span>
packages/frontend/src/pages/gallery/post.vue
+1 -1
View File
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div class="body">
<div class="title">{{ post.title }}</div>
<div class="description"><Mfm :text="post.description"/></div>
<div class="description"><Mfm :text="post.description" :isBlock="true"/></div>
<div class="info">
<i class="ph-clock ph-bold ph-lg"></i> <MkTime :time="post.createdAt" mode="detail"/>
</div>
packages/frontend/src/pages/user/home.vue
+1 -1
View File
@@ -74,7 +74,7 @@ SPDX-License-Identifier: AGPL-3.0-only
/>
</div>
<div class="description">
<Mfm v-if="user.description" :text="user.description" :isNote="false" :author="user"/>
<Mfm v-if="user.description" :text="user.description" :isBlock="true" :isNote="false" :author="user"/>
<p v-else class="empty">{{ i18n.ts.noAccountDescription }}</p>
</div>
<div class="fields system">
packages/frontend/src/pages/welcome.timeline.vue
+1 -1
View File
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div class="_panel" :class="$style.content">
<div>
<MkA v-if="note.replyId" class="reply" :to="`/notes/${note.replyId}`"><i class="ph-arrow-u-up-left ph-bold ph-lg"></i></MkA>
<Mfm v-if="note.text" :text="note.text" :author="note.user"/>
<Mfm v-if="note.text" :text="note.text" :isBlock="true" :author="note.user"/>
<MkA v-if="note.renoteId" class="rp" :to="`/notes/${note.renoteId}`">RN: ...</MkA>
</div>
<div v-if="note.files.length > 0" :class="$style.richcontent">