settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

css: prevent overflow in QuoteCard

Browse Source
This commit is contained in:
Settel 2022-08-25 16:28:45 +02:00
parent c5e28eeb0a
commit 39dff4a928
1 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
client/src/components/QuoteCard.vue
View File

@ -1,13 +1,15 @@
<template>
<div class="quote-card__container" :class="{ 'quote-card__container__editable': editable }">
<div :class="['quote-card__container', { 'quote-card__container__editable': editable }]">
<div v-if="editable" class="quote-card__action-buttons">
<QuoteCardActionButton @click="editQuote" icon="edit" />
<QuoteCardActionButton @click="deleteQuote" icon="trash" />
</div>
<div :id="quoteElId" class="quote__quote" :contenteditable="isEditMode">
<div class="quote-card__text-container">
<div :id="quoteElId" class="quote-card__quote" :contenteditable="isEditMode">
{{ quote.quote }}
</div>
</div>
</div>
</template>
<script setup lang="ts">
@ -45,8 +47,6 @@ const deleteQuote = () => useEngine().deleteQuote(props.quote.id)
.quote-card {
&__container {
position: relative;
display: flex;
align-items: center;
width: 300px;
height: 150px;
margin: 32px;
@ -55,14 +55,22 @@ const deleteQuote = () => useEngine().deleteQuote(props.quote.id)
border: $quote-border;
border-radius: 0 16px 0 0;
color: $quote-text-color;
}
&__editable {
cursor: text;
& .quote__quote {
& .quote-card__quote {
cursor: text;
}
}
&__text-container {
display: flex;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
}
&__quote {