chore: format
This commit is contained in:
parent
55d150f9b1
commit
33931fd896
2 changed files with 9 additions and 22 deletions
|
@ -35,16 +35,9 @@
|
||||||
i18n.ts.noAccountDescription
|
i18n.ts.noAccountDescription
|
||||||
}}</span>
|
}}</span>
|
||||||
</div>
|
</div>
|
||||||
<XShowMoreButton
|
<XShowMoreButton v-if="isLong" v-model="collapsed"></XShowMoreButton>
|
||||||
v-if="isLong"
|
|
||||||
v-model="collapsed"
|
|
||||||
></XShowMoreButton>
|
|
||||||
<div v-if="user.fields.length > 0 && detailed" class="fields">
|
<div v-if="user.fields.length > 0 && detailed" class="fields">
|
||||||
<dl
|
<dl v-for="(field, i) in user.fields" :key="i" class="field">
|
||||||
v-for="(field, i) in user.fields"
|
|
||||||
:key="i"
|
|
||||||
class="field"
|
|
||||||
>
|
|
||||||
<dt class="name">
|
<dt class="name">
|
||||||
<Mfm
|
<Mfm
|
||||||
:text="field.name"
|
:text="field.name"
|
||||||
|
@ -101,10 +94,8 @@ const props = defineProps<{
|
||||||
|
|
||||||
let isLong = $ref(
|
let isLong = $ref(
|
||||||
props.detailed &&
|
props.detailed &&
|
||||||
(
|
(props.user.description.split("\n").length > 9 ||
|
||||||
props.user.description.split("\n").length > 9 ||
|
props.user.description.length > 400),
|
||||||
props.user.description.length > 400
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
let collapsed = $ref(isLong);
|
let collapsed = $ref(isLong);
|
||||||
</script>
|
</script>
|
||||||
|
@ -148,7 +139,6 @@ let collapsed = $ref(isLong);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -210,12 +200,10 @@ let collapsed = $ref(isLong);
|
||||||
position: relative;
|
position: relative;
|
||||||
max-height: calc(9em + 50px);
|
max-height: calc(9em + 50px);
|
||||||
mask: linear-gradient(black calc(100% - 64px), transparent);
|
mask: linear-gradient(black calc(100% - 64px), transparent);
|
||||||
-webkit-mask: linear-gradient(
|
-webkit-mask: linear-gradient(black calc(100% - 64px), transparent);
|
||||||
black calc(100% - 64px),
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
&.collapsed, &.truncate {
|
&.collapsed,
|
||||||
|
&.truncate {
|
||||||
:deep(br) {
|
:deep(br) {
|
||||||
display: none; // collapse white spaces
|
display: none; // collapse white spaces
|
||||||
}
|
}
|
||||||
|
|
|
@ -93,6 +93,5 @@ onMounted(() => {
|
||||||
width: 300px;
|
width: 300px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transform-origin: center top;
|
transform-origin: center top;
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue