framework7.angular/kitchen-sink-material/jade/media-lists.jade

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

.page(data-page="media-lists")
  .navbar
    .navbar-inner
      .left
        a(href="index.html").back.link.icon-only
          i.icon.icon-back
      .center Media Lists
      .right
        a(href="#").open-panel.link.icon-only
          i.icon.icon-bars
  .page-content
    .content-block
      p Media Lists are almost the same as Data Lists, but with a more flexible layout for visualization of more complex data, like products, services, userc, etc. You can even use them in 
        a(href="#", data-popover=".popover-music").open-popover popovers
    .content-block-title Songs
    .list-block.media-list
      ul
        li
          a(href="#").item-link.item-content
            .item-media
              img(src="http://lorempixel.com/160/160/people/1", width="80")
            .item-inner
              .item-title-row
                .item-title Yellow Submarine
                .item-after $15
              .item-subtitle Beatles
              .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
        li
          a(href="#").item-link.item-content
            .item-media
              img(src="http://lorempixel.com/160/160/people/2", width="80")
            .item-inner
              .item-title-row
                .item-title Don't Stop Me Now
                .item-after $22
              .item-subtitle Queen
              .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
        li
          a(href="#").item-link.item-content
            .item-media
              img(src="http://lorempixel.com/160/160/people/3", width="80")
            .item-inner
              .item-title-row
                .item-title Billie Jean
                .item-after $16
              .item-subtitle Michael Jackson
              .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
    .content-block-title Mail App (With Swipe to delete and overswipes)
    .list-block.media-list
      ul
        li.swipeout
          .swipeout-content
            a(href="#").item-link.item-content
              .item-inner
                .item-title-row
                  .item-title Facebook
                  .item-after 17:14
                .item-subtitle New messages from John Doe
                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
          .swipeout-actions-left
            a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
            a(href="#").demo-forward.bg-blue Forward
          .swipeout-actions-right
            a(href="#").demo-actions More
            a(href="#").demo-mark.bg-orange Mark
            a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
        li.swipeout
          .swipeout-content
            a(href="#").item-link.item-content
              .item-inner
                .item-title-row
                  .item-title John Doe (via Twitter)
                  .item-after 17:11
                .item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
          .swipeout-actions-left
            a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
            a(href="#").demo-forward.bg-blue Forward
          .swipeout-actions-right
            a(href="#").demo-actions More
            a(href="#").demo-mark.bg-orange Mark
            a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
        li.swipeout
          .swipeout-content
            a(href="#").item-link.item-content
              .item-inner
                .item-title-row
                  .item-title Facebook
                  .item-after 16:48
                .item-subtitle New messages from John Doe
                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
          .swipeout-actions-left
            a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
            a(href="#").demo-forward.bg-blue Forward
          .swipeout-actions-right
            a(href="#").demo-actions More
            a(href="#").demo-mark.bg-orange Mark
            a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
        li.swipeout
          .swipeout-content
            a(href="#").item-link.item-content
              .item-inner
                .item-title-row
                  .item-title John Doe (via Twitter)
                  .item-after 15:32
                .item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
                .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
          .swipeout-actions-left
            a(href="#").bg-green.swipeout-overswipe.demo-reply Reply
            a(href="#").demo-forward.bg-blue Forward
          .swipeout-actions-right
            a(href="#").demo-actions More
            a(href="#").demo-mark.bg-orange Mark
            a(href="#", data-confirm="Are you sure you want to delete this item?").swipeout-delete.swipeout-overswipe Delete
    .content-block-title Something more simple
    .list-block.media-list
      ul
        li
          .item-content
            .item-media
              img(src="http://lorempixel.com/88/88/fashion/1", width="44")
            .item-inner
              .item-title-row
                .item-title Yellow Submarine
              .item-subtitle Beatles
        li
          a(href="#").item-link.item-content
            .item-media
              img(src="http://lorempixel.com/88/88/fashion/2", width="44")
            .item-inner
              .item-title-row
                .item-title Don't Stop Me Now
              .item-subtitle Queen
        li
          .item-content
            .item-media
              img(src="http://lorempixel.com/88/88/fashion/3", width="44")
            .item-inner
              .item-title-row
                .item-title Billie Jean
              .item-subtitle Michael Jackson
    .content-block-title Inset
    .list-block.media-list.inset
      ul
        li
          a(href="#").item-link.item-content
            .item-media
              img(src="http://lorempixel.com/88/88/fashion/4", width="44")
            .item-inner
              .item-title-row
                .item-title Yellow Submarine
              .item-subtitle Beatles
        li
          a(href="#").item-link.item-content
            .item-media
              img(src="http://lorempixel.com/88/88/fashion/5", width="44")
            .item-inner
              .item-title-row
                .item-title Don't Stop Me Now
              .item-subtitle Queen
        li
          a(href="#").item-link.item-content
            .item-media
              img(src="http://lorempixel.com/88/88/fashion/6", width="44")
            .item-inner
              .item-title-row
                .item-title Billie Jean
              .item-subtitle Michael Jackson