Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 14:16:39 +01:00
Code Issues Projects Releases Packages Wiki Activity

Fix pronunciation block toggle not working in Safari

Browse source 
Also fix the masking when it's 1 or 2 liner
This commit is contained in:
Lim Chee Aun 2023-03-31 14:09:21 +08:00
parent 72eb9a5789
commit c80c3732eb
2 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -94,11 +94,11 @@
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
mask-image: linear-gradient(to top, transparent, black 16px); mask-image: linear-gradient(to bottom, black 3em, transparent);
} }
.status-translation-block .status-translation-block
.translated-block .translated-block
output.translated-pronunciation-content:is(:active, :focus) { output.translated-pronunciation-content.expand {
display: block; display: block;
-webkit-line-clamp: unset; -webkit-line-clamp: unset;
-webkit-box-orient: unset; -webkit-box-orient: unset;

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

@ -146,6 +146,9 @@ function TranslationBlock({
<output <output
class="translated-pronunciation-content" class="translated-pronunciation-content"
tabIndex={-1} tabIndex={-1}
onClick={(e) => {
e.target.classList.toggle('expand');
}}
> >
{pronunciationContent} {pronunciationContent}
</output> </output>