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

Limit max widths of various elements

Browse source 
Bubbles are limited to 30em to facilitate comfortable reading length.
The width of the message list is limited to aid visual threading
of the conversation. The overall layout is restricted to 1300px and
centered if the window is much wider.

The header avatar resizes responsively to save room when the window
gets narrow

// FREEBIE
This commit is contained in:
lilia 2015-11-12 10:43:07 -08:00
parent 596188a630
commit 832f7ab643
4 changed files with 47 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
stylesheets/_conversation.scss
View file

@ -239,6 +239,7 @@
li {
max-width: 800px;
margin: 0 8px 16px;
&::after {
@ -256,12 +257,16 @@
left: -2px;
display: inline-block;
vertical-align: top;
max-width: calc(100% - 20px - 2 * 22px);
padding: 9px 12px;
border-radius: 10px;
box-shadow: 0 3px 3px -4px black;
word-wrap: break-word;
margin-left: 8px;
max-width: 30em;
@media(max-width:950px) {
max-width: calc(100% - 45px); // avatar size + padding
}
.content {
-webkit-user-select: text;
@ -294,6 +299,9 @@
}
.incoming {
.avatar, .bubble {
float: left;
}
.bubble {
color: $grey_d;
background-color: $grey_l;

1
stylesheets/_global.scss
View file

@ -30,6 +30,7 @@ body {
}
#header {
max-width: 1300px;
position: fixed;
top: 1px;
width: calc(100% - 2px);

11
stylesheets/_index.scss
View file

@ -67,12 +67,19 @@
.conversation-header {
border-bottom: solid 1px darken($grey_l, 10%);
margin-bottom: 4px;
padding-bottom: 5px;
.avatar {
float: left;
width: 36px;
height: 36px;
line-height: 36px;
}
@media(min-width:950px) {
.avatar {
width: 70px;
height: 70px;
line-height: 70px;
font-size: x-large;
}
}
}
.menu.conversation-menu {
@ -146,6 +153,8 @@ input.search {
}
.index {
max-width: 1300px;
margin: auto;
color: $grey_d;
background: linear-gradient(rgba(46,172,224,1.0) 50%, rgba(160,228,208,1.0) 100%);

27
stylesheets/manifest.css
View file

@ -39,6 +39,7 @@ body {
display: none; }
#header {
max-width: 1300px;
position: fixed;
top: 1px;
width: calc(100% - 2px);
@ -467,13 +468,18 @@ img.emoji {
.conversation-header {
border-bottom: solid 1px #d9d9d9;
margin-bottom: 4px; }
margin-bottom: 4px;
padding-bottom: 5px; }
.conversation-header .avatar {
float: left;
width: 36px;
height: 36px;
line-height: 36px; }
@media (min-width: 950px) {
.conversation-header .avatar {
width: 70px;
height: 70px;
line-height: 70px;
font-size: x-large; }
line-height: 70px; } }
.menu.conversation-menu button.drop-down {
background: url("/images/arrow_drop_down.png") no-repeat center; }
@ -527,6 +533,8 @@ input.search {
padding-right: 8px; }
.index {
max-width: 1300px;
margin: auto;
color: #454545;
background: linear-gradient(#2eace0 50%, #a0e4d0 100%); }
.index .gutter .new-group-update-form {
@ -727,6 +735,7 @@ input.search {
list-style: none; }
.message-detail li,
.message-list li {
max-width: 800px;
margin: 0 8px 16px; }
.message-detail li::after,
.message-list li::after {
@ -742,12 +751,16 @@ input.search {
left: -2px;
display: inline-block;
vertical-align: top;
max-width: calc(100% - 20px - 2 * 22px);
padding: 9px 12px;
border-radius: 10px;
box-shadow: 0 3px 3px -4px black;
word-wrap: break-word;
margin-left: 8px; }
margin-left: 8px;
max-width: 30em; }
@media (max-width: 950px) {
.message-detail .bubble,
.message-list .bubble {
max-width: calc(100% - 45px); } }
.message-detail .bubble .content,
.message-list .bubble .content {
-webkit-user-select: text;
@ -770,6 +783,10 @@ input.search {
.message-list .outgoing .error.bubble {
padding-left: 40px;
background-position: 12px 9px; }
.message-detail .incoming .avatar, .message-detail .incoming .bubble,
.message-list .incoming .avatar,
.message-list .incoming .bubble {
float: left; }
.message-detail .incoming .bubble,
.message-list .incoming .bubble {
color: #454545;