autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix: messages - ellipsis for header's name

Browse Source
This commit is contained in:
gaelle morin 2021-06-24 14:34:53 +02:00 committed by Gaëlle Morin
parent a584761cca
commit af388ae0ef
2 changed files with 39 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/styles/chat/_index.scss
View File

@ -1,7 +1,42 @@
.chat-view { #messages {
.chat-view {
height: calc(100vh - 50px - 78px); height: calc(100vh - 50px - 78px);
}
@media (max-width: 768px) { @media (max-width: 768px) {
height: calc(100vh - 50px - 68px);
height: calc(100vh - 50px - 58px);
.messages-header {
display: flex;
}
solid-set-default[name="segment2"] {
font-size: 14px;
line-height: 16px;
width: 75%;
}
orbit-user-avatar {
height: 31px;
width: 31px;
}
solid-display-value[name="name"] {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 210px;
}
solid-display-value[name="hyphen"] {
display: none;
}
solid-link {
vertical-align: super;
}
} }
} }

2
src/views/page-messages.pug
View File

@ -1,4 +1,4 @@
div.segment.full.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-xsmall.border-bottom.border-color-grey.whitespace-normal.bg-color-white div.segment.full.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-xxsmall.border-bottom.border-color-grey.whitespace-normal.bg-color-white.message-header
solid-display.labelled-avatar.small( solid-display.labelled-avatar.small(
bind-resources bind-resources
fields='segment1(account.picture), segment2(name, hyphen, at, username)' fields='segment1(account.picture), segment2(name, hyphen, at, username)'