feat: optimize translation display

This commit is contained in:
DIYgod 2025-02-13 17:35:17 +08:00
parent 0f39431cc3
commit 3f01ce87fa
No known key found for this signature in database
2 changed files with 10 additions and 7 deletions

View File

@ -50,11 +50,14 @@ export function ListItem({ entryId, entryPreview, translation }: UniversalItemPr
const lineClamp = useMemo(() => {
const envIsSafari = isSafari()
let lineClampTitle = settingWideMode ? 1 : 2
const lineClampDescription = settingWideMode ? 1 : 2
let lineClampDescription = settingWideMode ? 1 : 2
if (translation?.title) {
lineClampTitle += 1
}
if (translation?.description) {
lineClampDescription += 1
}
// for tailwind
// line-clamp-[1] line-clamp-[2] line-clamp-[3] line-clamp-[4] line-clamp-[5] line-clamp-[6] line-clamp-[7] line-clamp-[8]

View File

@ -24,12 +24,8 @@ export const EntryTranslation: Component<{
<div>
{isHTML ? (
<>
<HTML as="div" className={cn("prose align-middle dark:prose-invert", className)} noMedia>
{source}
</HTML>
{nextTarget && (
<>
<i className="i-mgc-translate-2-cute-re mb-1 mt-4 align-middle" />
<HTML
as="div"
className={cn("prose align-middle dark:prose-invert", className)}
@ -37,19 +33,23 @@ export const EntryTranslation: Component<{
>
{nextTarget}
</HTML>
<i className="i-mgc-translate-2-cute-re mb-4 mt-1 align-middle" />
</>
)}
<HTML as="div" className={cn("prose align-middle dark:prose-invert", className)} noMedia>
{source}
</HTML>
</>
) : (
<>
<div className={cn("inline align-middle", className)}>
<span className="align-middle">{source}</span>
{nextTarget && (
<>
<i className="i-mgc-translate-2-cute-re ml-2 mr-0.5 align-middle" />
<span className="align-middle">{nextTarget}</span>
<i className="i-mgc-translate-2-cute-re mr-2 align-middle" />
</>
)}
<span className="align-middle">{source}</span>
</div>
</>
)}