- content_for :title, t("chat.title") - content_for :javascript, javascript_include_tag("application") .container .leftside.left .roster.border.no-top-border.top-border#height-setter-1 .user .avatar.bigger %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")} %h1 Cinan Rakosnik %h2 frontend developer %h3 %span.status.online.icon-record %a{ href: "#"} available %span.icon-arrow-down.drop-down .friends %h1.group-header.active Chat group %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.icon-record %h2 co-founder %span.action %span.icon-x-full %span kick %li.clear.user .avatar %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")} %h1 John Savage %span.status.away.icon-record %h2 web & ui designer %span.action %span.icon-x-full %span kick %span.icon-bubbles %span invite %h1.group-header Friends %ul %li.clear.user .avatar %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")} %h1 Ashley Bond %span.status.offline.icon-record %h2 sexretary %span.action %span.icon-bubbles %span invite %li.clear.user .avatar %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")} %h1 Bob Awesome %span.status.dnd.icon-record %h2 sales manager %span.action %span.icon-x-full %span kick %li.clear.user .avatar %img{src: 'assets/avatar.png', alt: t("chat.avatar_alt")} %h1 Bob Awesome %span.status.dnd.icon-record %h2 sales manager %span.action %span.icon-bubble %span chat .toolbox %input{type: "search", placeholder: "Search contact"} %a{ href: "#"} %span.icon-cog .chatting-window.left.rightside .tabbar#tabbar %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 .messages#height-setter-2{style: "overflow: auto;"} %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 .message-writer#msg-writer %input{ type: "text", placeholder: "Type your message here" } %input{ type: "submit", value: "Send" }