mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-22 17:25:40 +03:00
Code Issues Projects Releases Packages Wiki Activity

Move translation pronunciation down and collapse to max 3 lines

Browse source
This commit is contained in:
Lim Chee Aun 2023-03-31 09:44:12 +08:00
parent e4b30d95fc
commit 5fe5d97611
2 changed files with 25 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/translation-block.css
View file

@ -82,13 +82,26 @@
}
.status-translation-block .translated-block output {
display: block;
margin-top: 1em;
margin-top: 0.75em;
}
.status-translation-block
.translated-block
output.translated-pronunciation-content {
opacity: 0.75;
padding-bottom: 1em;
border-top: var(--hairline-width) solid var(--bg-color);
border-bottom: var(--hairline-width) solid var(--outline-color);
padding-top: 0.75em;
border-top: var(--hairline-width) solid var(--outline-color);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
mask-image: linear-gradient(to top, transparent, black 16px);
}
.status-translation-block
.translated-block
output.translated-pronunciation-content:is(:active, :focus) {
display: block;
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
overflow: visible;
mask-image: none;
}

13
src/components/translation-block.jsx
View file

@ -139,14 +139,17 @@ function TranslationBlock({
) : (
!!translatedContent && (
<>
{!!pronunciationContent && (
<output class="translated-pronunciation-content">
{pronunciationContent}
</output>
)}
<output class="translated-content" lang={targetLang}>
{translatedContent}
</output>
{!!pronunciationContent && (
<output
class="translated-pronunciation-content"
tabIndex={-1}
>
{pronunciationContent}
</output>
)}
</>
)
)}