Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-24 07:39:41 +02:00
Code Issues Releases Activity

fix: text overflow on RecipeCard (#1830)

Browse source 
* fix the text overflow on RecipeCard

* add a wrapper class for description text for recipes
This commit is contained in:
Jambaldorj Ochirpurev 2022-11-27 20:33:03 +01:00 • committed by GitHub
parent 01aac0ca5d
commit ac6554efdd
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/components/Domain/Recipe/RecipeCard.vue
View file

@ -19,7 +19,9 @@
<v-expand-transition v-if="description"> <v-expand-transition v-if="description">
<div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal" style="height: 100%"> <div v-if="hover" class="d-flex transition-fast-in-fast-out secondary v-card--reveal" style="height: 100%">
<v-card-text class="v-card--text-show white--text"> <v-card-text class="v-card--text-show white--text">
{{ description }} <div class="descriptionWrapper">
{{ description}}
</div>
</v-card-text> </v-card-text>
</div> </div>
</v-expand-transition> </v-expand-transition>
@ -143,4 +145,10 @@ export default defineComponent({
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.descriptionWrapper{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 8;
overflow: hidden;
}
</style> </style>