github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-04-23 21:34:25 +08:00
Code Issues Actions1 Packages Projects Releases Wiki Activity

FIX: Preventing presence users from overflowing window

Browse Source
This commit is contained in:
Kris 2018-01-19 19:15:08 -05:00
parent 8a3c9ee3c5
commit b040e11c6b
3 changed files with 36 additions and 12 deletions
plugins/discourse-presence/assets
javascripts/discourse/templates/components
composer-presence-display.hbstopic-presence-display.hbs
stylesheets
presence.scss

9
plugins/discourse-presence/assets/javascripts/discourse/templates/components/composer-presence-display.hbs

@ -1,9 +1,10 @@
{{#if shouldDisplay}} {{#if shouldDisplay}}
<div class="presence-users"> <div class="presence-users">
{{#each users as |user|}} <div class="presence-avatars">
{{avatar user avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}} {{#each users as |user|}}
{{/each}} {{avatar user avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}}
{{/each}}
</div>
<span class="presence-text"> <span class="presence-text">
<span class="description"> <span class="description">
{{#if isReply ~}} {{#if isReply ~}}

9
plugins/discourse-presence/assets/javascripts/discourse/templates/components/topic-presence-display.hbs

@ -1,9 +1,10 @@
{{#if shouldDisplay}} {{#if shouldDisplay}}
<div class="presence-users"> <div class="presence-users">
{{#each users as |user|}} <div class="presence-avatars">
{{avatar user avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}} {{#each users as |user|}}
{{/each}} {{avatar user avatarTemplatePath="avatar_template" usernamePath="username" imageSize="small"}}
{{/each}}
</div>
<span class="presence-text"> <span class="presence-text">
<span class="description">{{i18n 'presence.replying_to_topic' count=users.length}}</span>{{!-- (using comment to stop whitespace) <span class="description">{{i18n 'presence.replying_to_topic' count=users.length}}</span>{{!-- (using comment to stop whitespace)
--}}<span class="wave"><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></span> --}}<span class="wave"><span class="dot">.</span><span class="dot">.</span><span class="dot">.</span></span>

30
plugins/discourse-presence/assets/stylesheets/presence.scss

@ -1,15 +1,24 @@
.presence-users { .presence-users {
background-color: $secondary; background-color: $secondary;
color: $primary-medium; color: $primary-medium;
padding: 0px 5px;
display: flex; display: flex;
align-items: center;
span.presence-text { span.presence-text {
margin-left: 5px; margin-left: 5px;
margin-right: 2px;
flex: 0 0 auto;
padding-top: 3px;
}
.presence-avatars {
display: flex;
overflow: hidden;
flex-wrap: wrap;
} }
.wave { .wave {
flex: 0 0 auto;
.dot { .dot {
display: inline-block; display: inline-block;
animation: wave 1.8s linear infinite; animation: wave 1.8s linear infinite;
@ -38,13 +47,26 @@
.composer-fields .presence-users { .composer-fields .presence-users {
position: absolute; position: absolute;
top: 18px; top: 18px;
right: 35px; right: 40px;
@media screen and (max-width: $small-width) {
max-width: 318px;
.presence-avatars {
flex-wrap: nowrap;
}
}
} }
.mobile-view { .mobile-view {
.presence-users {
font-size: $font-down-1;
}
.composer-fields .presence-users { .composer-fields .presence-users {
top: 3px; top: 3px;
right: 54px; right: 65px;
max-width: 70px;
.presence-avatars {
flex-wrap: nowrap;
}
.description { .description {
display:none; display:none;
} }