fix name and text overflow on mobile devices

This commit is contained in:
Rocka 2022-01-07 11:11:19 +08:00
parent 88cd84a403
commit e7465795da
No known key found for this signature in database
GPG Key ID: 28031158FFDD6853

View File

@ -48,8 +48,8 @@
</script>
<div class="message">
<img src="{getContext('LUOXU_URL')}/avatar/{msg.from_id}.jpg" height="64" width="64" alt="{msg.from_name} 的头像"/>
<div>
<img class="avatar" src="{getContext('LUOXU_URL')}/avatar/{msg.from_id}.jpg" height="64" width="64" alt="{msg.from_name} 的头像"/>
<div class="content">
<div class="name">{msg.from_name || ' '}</div>
<div class="text">{@html msg.html}</div>
<div class="time">{groupinfo[msg.group_id][1]} <a href={msgurl}><time datetime={iso_date} title={title}>{relative_dt}</time></a></div>
@ -66,12 +66,17 @@
border-radius: 5px;
display: flex;
}
img {
.avatar {
padding-right: 0.5em;
}
.content {
overflow: hidden;
}
.name {
white-space: nowrap;
color: #1e90ff;
overflow: hidden;
text-overflow: ellipsis;
}
.text {
white-space: pre-wrap;