diff --git a/changes/changelog.d/1556.bugfix b/changes/changelog.d/1556.bugfix new file mode 100644 index 000000000..81e39ab58 --- /dev/null +++ b/changes/changelog.d/1556.bugfix @@ -0,0 +1 @@ +Fix showing too long radio descriptions (#1556) diff --git a/front/src/components/radios/Card.vue b/front/src/components/radios/Card.vue index d71c7d0b2..e280a91a9 100644 --- a/front/src/components/radios/Card.vue +++ b/front/src/components/radios/Card.vue @@ -13,7 +13,11 @@ {{ radio.name }} -
+
{{ radio.description }}
@@ -55,6 +59,11 @@ export default { customRadio: { type: Object, required: false, default: () => { return {} } }, objectId: { type: String, required: false, default: null } }, + data () { + return { + isDescriptionExpanded: false + } + }, computed: { radio () { if (Object.keys(this.customRadio).length > 0) { diff --git a/front/src/style/components/_card.scss b/front/src/style/components/_card.scss index f653cdc06..d9d9b8137 100644 --- a/front/src/style/components/_card.scss +++ b/front/src/style/components/_card.scss @@ -1,13 +1,11 @@ - - -.card .description { - word-wrap: break-word; +.ui.cards { + align-items: flex-start; } - .ui.cards > .card, .ui.card { color: var(--card-text-color); background: var(--card-background); + min-height: 200px; &:not(.flat) { box-shadow: var(--card-box-shadow); } @@ -22,9 +20,22 @@ .meta { color: var(--discrete-text-color); } + .description { + word-wrap: break-word; + text-overflow: ellipsis; + overflow: hidden; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + display: -webkit-box; + } + .description.expanded { + text-overflow: initial; + overflow: initial; + -webkit-line-clamp: initial; + -webkit-box-orient: initial; + } } - .ui.cards.app-cards { $card-width: 14em; $card-height: 23em;