Commit 142008cb authored by JuniorJPDJ's avatar JuniorJPDJ Committed by Georg Krause
Browse files

Resolve "Too long radio descriptions resize the entire row"

parent 0873a6e9
Fix showing too long radio descriptions (#1556)
...@@ -13,7 +13,11 @@ ...@@ -13,7 +13,11 @@
{{ radio.name }} {{ radio.name }}
</template> </template>
</h4> </h4>
<div class="description"> <div
class="description"
:class="{expanded: isDescriptionExpanded}"
@click="isDescriptionExpanded = !isDescriptionExpanded"
>
{{ radio.description }} {{ radio.description }}
</div> </div>
</div> </div>
...@@ -55,6 +59,11 @@ export default { ...@@ -55,6 +59,11 @@ export default {
customRadio: { type: Object, required: false, default: () => { return {} } }, customRadio: { type: Object, required: false, default: () => { return {} } },
objectId: { type: String, required: false, default: null } objectId: { type: String, required: false, default: null }
}, },
data () {
return {
isDescriptionExpanded: false
}
},
computed: { computed: {
radio () { radio () {
if (Object.keys(this.customRadio).length > 0) { if (Object.keys(this.customRadio).length > 0) {
......
.ui.cards {
align-items: flex-start;
.card .description {
word-wrap: break-word;
} }
.ui.cards > .card, .ui.cards > .card,
.ui.card { .ui.card {
color: var(--card-text-color); color: var(--card-text-color);
background: var(--card-background); background: var(--card-background);
min-height: 200px;
&:not(.flat) { &:not(.flat) {
box-shadow: var(--card-box-shadow); box-shadow: var(--card-box-shadow);
} }
...@@ -22,9 +20,22 @@ ...@@ -22,9 +20,22 @@
.meta { .meta {
color: var(--discrete-text-color); 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 { .ui.cards.app-cards {
$card-width: 14em; $card-width: 14em;
$card-height: 23em; $card-height: 23em;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment