framework7.angular/kitchen-sink-material/jade/messages.jade

Full Featured Mobile HTML Framework For Building iOS & Android Apps using Angularjs

.page(data-page="messages")
  .navbar
    .navbar-inner
      .left
        a(href="index.html").back.link.icon-only
          i.icon.icon-back
      .center Messages
      .right
        a(href="#").link.open-panel.icon-only
          i.icon.icon-bars
  .toolbar.messagebar
    .toolbar-inner
      a(href="#").link.icon-only
        i.icon.icon-camera
      textarea(placeholder="Message")
      a(href="#").link.send-message Send
  .page-content.messages-content
    .messages.messages-auto-layout
      .message.message-sent.message-with-avatar
        .message-text Hi, Kate
          .message-date Feb 9, 12:58
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/6)")
      .message.message-sent.message-with-avatar
        .message-text How are you?
          .message-date Feb 9, 12:59
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/6)")
      .message.message-received.message-with-avatar
        .message-name Kate Johnson
        .message-text Hi, i am good
          .message-date Feb 9, 13:11
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/9)")
      .message.message-received.message-with-avatar
        .message-name Blue Ninja
        .message-text Hi there, I am also fine, thanks! And how are you?
          .message-date Feb 9, 13:23
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/7)")
      .message.message-sent.message-with-avatar
        .message-text Hey, Blue Ninja! Glad to see you ;)
          .message-date Feb 9, 13:28
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/6)")
      .message.message-sent.message-with-avatar
        .message-text What do you think about my new logo?
          .message-date Feb 9, 13:30
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/6)")
      .message.message-sent.message-with-avatar
        .message-text Hey? Any thoughts about my new logo?
          .message-date Feb 11, 9:21
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/6)")
      .message.message-sent.message-with-avatar
        .message-text Alo...
          .message-date Feb 12, 19:55
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/6)")
      .message.message-sent.message-with-avatar
        .message-text Are you there?
          .message-date Feb 12, 20:07
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/6)")
      .message.message-received.message-with-avatar
        .message-name Blue Ninja
        .message-text Hi, i am here
          .message-date Feb 13, 11:24
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/7)")
      .message.message-received.message-with-avatar
        .message-name Blue Ninja
        .message-text Your logo is great
          .message-date Feb 13, 11:30
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/7)")
      .message.message-received.message-with-avatar
        .message-name Kate Johnson
        .message-text Leave me alone!
          .message-date Feb 13, 15:57
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/9)")
      .message.message-sent.message-with-avatar
        .message-text :(
          .message-date Feb 13, 16:02
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/6)")
      .message.message-sent.message-with-avatar
        .message-text Hey, look, cutest kitten ever!
          .message-date Feb 13, 16:10
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/6)")
      .message.message-sent.message-pic.message-with-avatar
        .message-text
          img(src="http://lorempixel.com/300/400/cats/4/")
          .message-date Feb 13, 16:10
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/6)")
      .message.message-received.message-with-avatar
        .message-name Blue Ninja
        .message-text Yep
          .message-date Feb 14, 8:45
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/7)")
      .message.message-sent.message-with-avatar
        .message-text Cool
          .message-date Feb 14, 12:31
        .message-avatar(style="background-image:url(http://lorempixel.com/200/200/people/6)")