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

Add max height to finished highlight note also

This commit is contained in:
Ramon Wenger 2024-05-13 12:22:54 +02:00
parent 7bc1c8dba4
commit c0001d98e5
1 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,7 +46,7 @@ their own content to be displayed -->
<!-- eslint-disable vue/no-v-html --> <!-- eslint-disable vue/no-v-html -->
<p <p
data-cy="highlight-note-text" data-cy="highlight-note-text"
class="highlight-sidebar__note" class="highlight-sidebar__note-text"
v-html="noteWithUrls" v-html="noteWithUrls"
/> />
<!-- .stop to prevent the click handler to close the sidebar (as the element won't be a child of the <!-- .stop to prevent the click handler to close the sidebar (as the element won't be a child of the
@ -122,6 +122,12 @@ const isOverflowing = computed(() => {
}); });
</script> </script>
<style lang="postcss">
:root {
--max-note-height: 250px;
}
</style>
<style scoped lang="postcss"> <style scoped lang="postcss">
@import 'styles/css/mixins/desktop.css'; @import 'styles/css/mixins/desktop.css';
@ -186,9 +192,11 @@ const isOverflowing = computed(() => {
min-height: 100px; min-height: 100px;
} }
&__note { &__note-text {
white-space: pre-line; /* display newlines as linebreaks */
margin-bottom: var(--medium-spacing); margin-bottom: var(--medium-spacing);
max-height: var(--max-note-height);
overflow: scroll;
white-space: pre-line; /* display newlines as linebreaks */
} }
&__edit-note { &__edit-note {
@ -196,7 +204,7 @@ const isOverflowing = computed(() => {
} }
&__textarea { &__textarea {
max-height: 250px; max-height: var(--max-note-height);
} }
} }
</style> </style>