PaiGramTeam/luoxu-api-pub
3
0
Fork 0
mirror of https://github.com/PaiGramTeam/luoxu-api-pub.git synced 2024-11-25 17:35:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix name and text overflow on mobile devices

Browse Source
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
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/Message.svelte
View File

@ -48,8 +48,8 @@
</script> </script>
<div class="message"> <div class="message">
<img src="{getContext('LUOXU_URL')}/avatar/{msg.from_id}.jpg" height="64" width="64" alt="{msg.from_name} 的头像"/> <img class="avatar" src="{getContext('LUOXU_URL')}/avatar/{msg.from_id}.jpg" height="64" width="64" alt="{msg.from_name} 的头像"/>
<div> <div class="content">
<div class="name">{msg.from_name || ' '}</div> <div class="name">{msg.from_name || ' '}</div>
<div class="text">{@html msg.html}</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> <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; border-radius: 5px;
display: flex; display: flex;
} }
img { .avatar {
padding-right: 0.5em; padding-right: 0.5em;
} }
.content {
overflow: hidden;
}
.name { .name {
white-space: nowrap; white-space: nowrap;
color: #1e90ff; color: #1e90ff;
overflow: hidden;
text-overflow: ellipsis;
} }
.text { .text {
white-space: pre-wrap; white-space: pre-wrap;