PaiGramTeam/luoxu-api-pub
3
0
Fork 0
mirror of https://github.com/PaiGramTeam/luoxu-api-pub.git synced 2024-11-22 07:08:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2 from rocka/patch/ellipsis-name

Browse Source 
fix name and text overflow on mobile devices
This commit is contained in:
依云 2022-01-07 12:33:40 +08:00 committed by GitHub
commit 4fbc7572db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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;