ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Make overflow more dynamic in HighlightSidebar

This commit is contained in:
Ramon Wenger 2024-02-28 15:38:21 +01:00
parent 799e09aefe
commit c2561c2014
1 changed files with 17 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/components/highlights/HighlightSidebar.vue
View File

@ -13,7 +13,7 @@
<h2 class="heading-4">Meine Markierung</h2> <h2 class="heading-4">Meine Markierung</h2>
<mark <mark
class="paragraph highlight-sidebar__highlighted-text" class="paragraph highlight-sidebar__highlighted-text"
:class="[`highlight--${highlight.color}`]" :class="[`highlight--${highlight.color}`, { 'highlight-sidebar__highlighted-text--overflow': isOverflowing }]"
data-cy="highlight-in-sidebar" data-cy="highlight-in-sidebar"
ref="highlightMark" ref="highlightMark"
> >
@ -112,6 +112,14 @@ const parseUrls = (text: string) => {
const noteWithUrls = computed(() => { const noteWithUrls = computed(() => {
return parseUrls(note.value); return parseUrls(note.value);
}); });
const isOverflowing = computed(() => {
const element = highlightMark.value;
if (element) {
return element.scrollHeight > element.clientHeight;
}
return false;
});
</script> </script>
<style scoped lang="postcss"> <style scoped lang="postcss">
@ -161,11 +169,14 @@ const noteWithUrls = computed(() => {
text-overflow: ellipsis; text-overflow: ellipsis;
position: relative; position: relative;
/* white-space: nowrap; */ /* white-space: nowrap; */
&::after {
content: '...'; &--overflow {
position: absolute; &::after {
right: 5px; content: '...';
bottom: 0; position: absolute;
right: 10px;
bottom: 0;
}
} }
} }