thegamer/Cable-Desktop
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Adjust widths of bubbles and chat window

Browse source 
With these changes, message bubbles in the default-sized chat popup are
just wide enough to display the full complement of html5 media player
controls.
This commit is contained in:
lilia 2015-03-04 13:59:40 -08:00
parent 8bc77fa02b
commit 567a48e82b
3 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
js/panel_controller.js
View file

@ -57,7 +57,7 @@
url: 'conversation.html', url: 'conversation.html',
type: 'panel', type: 'panel',
focused: true, focused: true,
width: 280, width: 300,
height: 420 height: 420
}, function (windowInfo) { }, function (windowInfo) {
windowMap.add({ windowId: windowInfo.id, modelId: modelId }); windowMap.add({ windowId: windowInfo.id, modelId: modelId });

12
stylesheets/_conversation.scss
View file

@ -107,7 +107,7 @@
left: -2px; left: -2px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
max-width: calc(100% - 54px - 2 * 12px); max-width: calc(100% - 20px - 2 * 12px);
padding: 9px 12px; padding: 9px 12px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 3px 3px -4px black; box-shadow: 0 3px 3px -4px black;
@ -120,13 +120,13 @@
} }
&::before { &::before {
top: (54px / 2) - 8px; top: (44px / 2) - 8px;
border-top: 8px solid transparent; border-top: 8px solid transparent;
border-bottom: 8px solid transparent; border-bottom: 8px solid transparent;
} }
&::after { &::after {
top: (54px / 2) - 6px; top: (44px / 2) - 6px;
border-top: 6px solid transparent; border-top: 6px solid transparent;
border-bottom: 6px solid transparent; border-bottom: 6px solid transparent;
} }
@ -192,10 +192,10 @@
} }
img.avatar { img.avatar {
height: 44px; height: 36px;
width: 44px; width: 36px;
background: $grey_l; background: $grey_l;
border-radius: (44px / 2); border-radius: (36px / 2);
} }
.timestamp { .timestamp {

12
stylesheets/manifest.css
View file

@ -359,7 +359,7 @@ input.new-message {
left: -2px; left: -2px;
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
max-width: calc(100% - 54px - 2 * 12px); max-width: calc(100% - 20px - 2 * 12px);
padding: 9px 12px; padding: 9px 12px;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 3px 3px -4px black; } box-shadow: 0 3px 3px -4px black; }
@ -372,12 +372,12 @@ input.new-message {
width: 0; } width: 0; }
.message-detail .bubble::before, .message-detail .bubble::before,
.message-list .bubble::before { .message-list .bubble::before {
top: 19px; top: 14px;
border-top: 8px solid transparent; border-top: 8px solid transparent;
border-bottom: 8px solid transparent; } border-bottom: 8px solid transparent; }
.message-detail .bubble::after, .message-detail .bubble::after,
.message-list .bubble::after { .message-list .bubble::after {
top: 21px; top: 16px;
border-top: 6px solid transparent; border-top: 6px solid transparent;
border-bottom: 6px solid transparent; } border-bottom: 6px solid transparent; }
.message-detail .incoming .bubble, .message-detail .incoming .bubble,
@ -425,10 +425,10 @@ input.new-message {
display: none; } display: none; }
.message-detail img.avatar, .message-detail img.avatar,
.message-list img.avatar { .message-list img.avatar {
height: 44px; height: 36px;
width: 44px; width: 36px;
background: #f3f3f3; background: #f3f3f3;
border-radius: 22px; } border-radius: 18px; }
.message-detail .timestamp, .message-detail .timestamp,
.message-list .timestamp { .message-list .timestamp {
margin-top: 3px; margin-top: 3px;