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

Experiment with overflowing text and ellipses

This commit is contained in:
Ramon Wenger 2024-01-22 11:59:04 +01:00
parent ebbbca72c4
commit eaca8f32e4
1 changed files with 49 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,19 +4,47 @@
<cross class="highlight-sidebar__close-icon" /> <cross class="highlight-sidebar__close-icon" />
</div> </div>
<div class="highlight-sidebar__section highlight-sidebar__highlight"> <div class="highlight-sidebar__section highlight-sidebar__highlight">
<h2 class="highlight-sidebar__section-title">Meine Markierung</h2> <h2 class="heading-4">Meine Markierung</h2>
<mark class="highlight-sidebar__highlighted-text"> <mark
Haben Sie sich beim Shoppen schon mal überlegt, aus welchem Beweggrund Sie ein b... class="paragraph highlight-sidebar__highlighted-text"
ref="highlightMark"
>
hier ist ein bischen mehr text blabla blabla bla blabla blabla bla bla blabla blabla bla blabla blabla bla bla
noch mehr text noch mehr text
</mark> </mark>
<pre>{{ overflowing }}</pre>
<pre>{{ highlightMark?.scrollHeight }}</pre>
<pre>{{ highlightMark?.clientHeight }}</pre>
</div> </div>
<div class="highlight-sidebar__section highlight-sidebar__note"> <div class="highlight-sidebar__section highlight-sidebar__note">
<h2 class="highlight-sidebar__section-title">Meine Notiz</h2> <h2 class="b">Meine Notiz</h2>
<div class="form-with-border highlight-sidebar__note-form">
<textarea
class="borderless-textarea"
placeholder="Hi"
v-auto-grow
></textarea>
</div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { defineAsyncComponent } from 'vue'; import { computed, defineAsyncComponent, ref } from 'vue';
const highlightMark = ref<HTMLElement | null>(null);
const overflowing = computed(() => {
const element = highlightMark.value;
if (element) {
console.log('element is here');
console.log(element.scrollHeight);
console.log(element.clientHeight);
console.log(element.scrollHeight > element.clientHeight);
return element.scrollHeight > element.clientHeight;
}
return false;
});
const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue')); const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vue'));
</script> </script>
@ -61,15 +89,24 @@ const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vu
padding: var(--large-spacing) 0; padding: var(--large-spacing) 0;
} }
&__section-title { &__highlighted-text {
font-family: var(--sans-serif-font-family); display: inline-block;
font-weight: 600; --num-lines: 3;
font-size: var(--regular-font-size); max-height: calc(var(--regular-font-size) * var(--paragraph-line-height) * var(--num-lines));
overflow: hidden;
text-overflow: ellipsis;
position: relative;
/* white-space: nowrap; */
&::after {
content: '...';
position: absolute;
right: 5px;
bottom: 0;
}
} }
&__highlighted-text { &__note-form {
font-family: var(--serif-font-family); min-height: 100px;
line-height: 1.5rem;
} }
} }
</style> </style>