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