| 1ec65f29 |
- content_for :title, t("chat.title")
- content_for :javascript, javascript_include_tag("application")
.container |
| eee69d20 |
.leftside.left |
| 43b171a9 |
.roster.border.no-top-border.top-border#height-setter-1 |
| 1ec65f29 |
.user |
| eee69d20 |
.avatar.bigger |
| 1ec65f29 |
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
%h1 Cinan Rakosnik
%h2 frontend developer |
| eee69d20 |
%h3
%span.status.online
%a{ href: "#"}
available
%span.icon-arrow-down.drop-down |
| 1ec65f29 |
.friends
%h1.group-header.active Chat group |
| eee69d20 |
%ul.active-group.border.no-left-border.left-border
%li.clear.user
.avatar
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
%h1
Adam Wolsky
%span.status.online
%h2 co-founder
%span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}
%span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}
%span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} kick
%li.clear.user
.avatar
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
%h1
John Savage
%span.status.away
%h2 web & ui designer
%span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}
%span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}
%span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} kick
%span.icon-bubbles{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}
%span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em;"} invite |
| 1ec65f29 |
%h1.group-header Friends
%ul |
| eee69d20 |
%li.clear.user{ style: "padding-right: 0"}
.avatar
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
%h1
Ashley Bond
%span.status.offline
%h2 sexretary
%span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}
-#%span.icon-bubble{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}
-# %span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em;"} chat
%span.icon-bubbles{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 13px; padding-top: 1px;"}
%span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; font-size: 0.9em;"} invite
%li.clear.user
.avatar
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
%h1
Bob Awesome
%span.status.dnd
%h2 sales manager
%span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}
%span.icon-x-full{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}
%span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} kick
%li.clear.user
.avatar
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
%h1
Bob Awesome
%span.status.dnd
%h2 sales manager
%span.action{ style: "float: right; margin-top: -31px; width: 62px; color: #7e8b90"}
%span.icon-bubble{ style: "width: 21px; overflow: hidden; display: block; float: right;padding-right: 10px; padding-top: 1px;"}
%span{style: "font-variant: small-caps; font-weight: bold; position: relative; top: -3px; left: 2px; font-size: 0.9em;"} chat |
| 1ec65f29 |
.toolbox |
| eee69d20 |
%input{type: "search", placeholder: "Search contact"}
%a{ href: "#"}
%span.icon-cog
.chatting-window.left.rightside |
| 43b171a9 |
.tabbar#tabbar |
| eee69d20 |
%a{ href: "#", class: "tab active top-border"}
Adam and John
%span.right.icon.icon-x
%a{ href: "#", class: "tab"}
%span.right.icon.icon-x
%a{ href: "#", class: "tab"}
%span.right.icon.icon-x
.conversation.clear.border |
| 43b171a9 |
.messages#height-setter-2{style: "overflow: auto;"} |
| eee69d20 |
%a{ href: "#", class: "event" }
Load older messages
%span.icon-arrow-up
.message-box
.user
.avatar
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
-#todo: user name missing in design
.date 3 hours ago
%p Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Supendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula...
.message-box
.user
.avatar
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
-#todo: user name missing in design
.date 3 hours ago
%p Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Supendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula...
-#%hr
%p Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Supendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula...
.event
Monday 13.2.2013
.message-box.active
.user
.avatar
%img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")}
-#todo: user name missing in design
.date 3 hours ago
%p Etiam ullamcorper. Supendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Lorem ipsum dolor sit amet enim.
.event
Adam left the room | 13:45
|
| 43b171a9 |
.message-writer#msg-writer |
| eee69d20 |
%input{ type: "text", placeholder: "Type your message here" }
%input{ type: "submit", value: "Send" } |