framework7rails 0.9.7 → 1.0.0

data/Framework7-0.9.6/kitchen-sink/jade/notifications.jade

@@ -0,0 +1,23 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Notifications
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="notifications")
+    .page-content
+      .content-block
+        p Framework7 comes with simple Notifications component that allows you to show some useful messages to user.
+        p
+          a(href="#").button.ks-notification-simple Default notification
+        p
+          a(href="#").button.ks-notification-full Full-layout notification
+        p
+          a(href="#").button.ks-notification-custom With custom image
+        p
+          a(href="#").button.ks-notification-callback With callback on close

data/Framework7-0.9.6/kitchen-sink/jade/panels.jade

@@ -0,0 +1,21 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link 
+        i.icon.icon-back 
+        span Back
+    .center.sliding Side Panels
+    .right
+      a(href="#").link.open-panel.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="panels")
+    .page-content
+      .content-block
+        p Framework7 comes with 2 panels (on left and on right), both are optional. They have two different layouts/effects - <b>cover</b> above the content (like left panel here) and <b>reveal</b> (like right panel). You can put absolutely anything inside: data lists, forms, custom content, and even other isolated app view (like in right panel now) with its own dynamic navbar. Checkout panels:
+      .content-block
+        .row
+          .col-50
+            a(href="#").button.open-panel Left Panel
+          .col-50
+            a(href="#", data-panel="right").button.open-panel Right Panel

data/Framework7-0.9.6/kitchen-sink/jade/photo-browser.jade

@@ -0,0 +1,36 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Photo Browser
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="photo-browser")
+    .page-content
+      .content-block
+        p Photo Browser is a standalone and highly configurable component that allows to open window with photo viewer and navigation elements with the following features:
+        ul
+          li Swiper between photos
+          li Multi-gestures support for zooming
+          li Toggle zoom by double tap on photo
+          li Single click on photo to toggle Exposition mode
+        p Photo Browser could be opened in a three ways - as a Standalone component, in Popup, and as separate Page:
+        .row
+          .col-33
+            a(href="#").button.ks-pb-standalone Standalone
+          .col-33
+            a(href="#").button.ks-pb-popup Popup
+          .col-33
+            a(href="#").button.ks-pb-page Page
+      .content-block
+        p For Popup and Standalone types, Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:
+        .row
+          .col-50
+            a(href="#").button.ks-pb-standalone-dark Standalone
+          .col-50
+            a(href="#").button.ks-pb-popup-dark Popup
+          

data/Framework7-0.9.6/kitchen-sink/jade/popover.jade

@@ -0,0 +1,21 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Popover
+    .right
+      a(href="#", data-popover=".popover-menu").open-popover.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="popover")
+    .page-content
+      .content-block
+        p Of course, Framework7 has Popovers. Popovers may be called on absolutely any element with dynamic positioning. Note that due to Apple guide lines it is not recommended to use popovers on iPhone, only on bigger screens (iPad), so on small screen it may have wrong positioning because it is not fit to screen. For iPhone it is recommended to use <a href="modals.html">actions and modals</a> instead. Try the "bars" icon on navbar, "menu" link on bottom toolbar, links and buttons in text below:
+        p
+          a(href="#", data-popover=".popover-menu").button.open-popover Open popover on me
+        p Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit rutrum enim. Nam a odio facilisis, elementum tellus non, <a href="#" class="open-popover" data-popover=".popover-menu">popover</a> tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.
+        p In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta magna magna lacinia nunc. Curabitur <a href="#" class="open-popover" data-popover=".popover-menu">popover!</a> cursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat. Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper iaculis mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque elementum quis dui et consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sed laoreet purus. Pellentesque eget ante ante.
+        p Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper <a href="#" class="open-popover" data-popover=".popover-menu">one more popover</a> massa at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi. Aenean ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis lectus gravida eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non metus neque. Suspendisse viverra lectus sed risus aliquet, vel accumsan dolor feugiat.
+

data/Framework7-0.9.6/kitchen-sink/jade/preloader.jade

@@ -0,0 +1,31 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link 
+        i.icon.icon-back 
+        span Back
+    .center.sliding Preloader
+    .right
+      a(href="#").link.open-panel.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="preloader")
+    .page-content
+      .content-block
+        p How about an activity indicator? Framework 7 has a nice one. The F7 preloader is made with SVG and animated with CSS so it can be easily resized. Two options are available: the default is for a light background and another on a dark background. The HTML is pretty easy, just add a .preloader class to any element. For the dark background option, also add a .dark class. Here are some examples:
+      .content-block.row.ks-preloaders
+        .col-25 Default:<br>
+          span.preloader
+        .col-25(style="background-color: #333;") Dark:<br>
+          span.preloader.preloader-white
+        .col-25 Big:<br>
+          span.preloader.ks-preloader-big
+        .col-25(style="background-color: #333;") Dark:<br>
+          span.preloader.preloader-white.ks-preloader-big
+      .content-block
+        p With <b>app.showIndicator()</b> you can call small overlay with indicator:
+        a(href="#").button.demo-indicator Open small indicator overlay
+        p With <b>app.showPreloader()</b> you can call modal window with preloader:
+        a(href="#").button.demo-preloader Open preloader modal
+        p With <b>app.showPreloader('My text...')</b> you can call it with custom title:
+        a(href="#").button.demo-preloader-custom Open custom preloader

data/Framework7-0.9.6/kitchen-sink/jade/pull-to-refresh.jade

@@ -0,0 +1,44 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Pull To Refresh
+    .right
+      a(href="#").link.open-panel.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="pull-to-refresh")
+    .page-content.pull-to-refresh-content
+      .pull-to-refresh-layer
+        .preloader
+        .pull-to-refresh-arrow
+      .list-block.media-list
+        ul
+          li.item-content
+              .item-media
+                img(src="http://hhhhold.com/88/d/jpg?1", width="44")
+              .item-inner
+                .item-title-row
+                  .item-title Yellow Submarine
+                .item-subtitle Beatles
+          li.item-content
+              .item-media
+                img(src="http://hhhhold.com/88/d/jpg?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://hhhhold.com/88/d/jpg?3", width="44")
+              .item-inner
+                .item-title-row
+                  .item-title Billie Jean
+                .item-subtitle Michael Jackson
+        .list-block-label
+          p Just pull page down to let the magic happen.<br>Note that pull-to-refresh feature is optimised for touch and native iOS scrolling so it may not work on desktop browser.
+
+
+      

data/Framework7-0.9.6/kitchen-sink/jade/searchbar.jade

@@ -0,0 +1,146 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Search Bar
+    .right
+      a(href="#").link.open-panel.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="searchbar")
+    form.searchbar(data-search-list=".search-here", data-search-in=".item-title")
+      .searchbar-input
+        input(type="search", placeholder="Search")
+        a(href="#").searchbar-clear
+      a(href="#").searchbar-cancel Cancel
+    .searchbar-overlay
+    .page-content
+      .list-block.searchbar-not-found
+        ul
+          li.item-content
+            .item-inner
+              .item-title Nothing found
+      .list-block.search-here.searchbar-found
+        ul
+          li.item-content
+            .item-inner 
+              .item-title Acura 
+          li.item-content
+            .item-inner 
+              .item-title Audi
+          li.item-content
+            .item-inner 
+              .item-title BMW
+          li.item-content
+            .item-inner 
+              .item-title Cadillac 
+          li.item-content
+            .item-inner 
+              .item-title Chevrolet 
+          li.item-content
+            .item-inner 
+              .item-title Chrysler 
+          li.item-content
+            .item-inner 
+              .item-title Dodge 
+          li.item-content
+            .item-inner 
+              .item-title Ferrari 
+          li.item-content
+            .item-inner 
+              .item-title Ford 
+          li.item-content
+            .item-inner 
+              .item-title GMC 
+          li.item-content
+            .item-inner 
+              .item-title Honda
+          li.item-content
+            .item-inner 
+              .item-title Hummer
+          li.item-content
+            .item-inner 
+              .item-title Hyundai
+          li.item-content
+            .item-inner 
+              .item-title Infiniti 
+          li.item-content
+            .item-inner 
+              .item-title Isuzu 
+          li.item-content
+            .item-inner 
+              .item-title Jaguar 
+          li.item-content
+            .item-inner 
+              .item-title Jeep 
+          li.item-content
+            .item-inner 
+              .item-title Kia
+          li.item-content
+            .item-inner 
+              .item-title Lamborghini 
+          li.item-content
+            .item-inner 
+              .item-title Land Rover
+          li.item-content
+            .item-inner 
+              .item-title Lexus 
+          li.item-content
+            .item-inner 
+              .item-title Lincoln 
+          li.item-content
+            .item-inner 
+              .item-title Lotus 
+          li.item-content
+            .item-inner 
+              .item-title Mazda
+          li.item-content
+            .item-inner 
+              .item-title Mercedes-Benz
+          li.item-content
+            .item-inner 
+              .item-title Mercury 
+          li.item-content
+            .item-inner 
+              .item-title Mitsubishi
+          li.item-content
+            .item-inner 
+              .item-title Nissan 
+          li.item-content
+            .item-inner 
+              .item-title Oldsmobile 
+          li.item-content
+            .item-inner 
+              .item-title Peugeot 
+          li.item-content
+            .item-inner 
+              .item-title Pontiac 
+          li.item-content
+            .item-inner 
+              .item-title Porsche
+          li.item-content
+            .item-inner 
+              .item-title Regal
+          li.item-content
+            .item-inner 
+              .item-title Saab 
+          li.item-content
+            .item-inner 
+              .item-title Saturn 
+          li.item-content
+            .item-inner 
+              .item-title Subaru 
+          li.item-content
+            .item-inner 
+              .item-title Suzuki 
+          li.item-content
+            .item-inner 
+              .item-title Toyota
+          li.item-content
+            .item-inner 
+              .item-title Volkswagen
+          li.item-content
+            .item-inner 
+              .item-title Volvo

data/Framework7-0.9.6/kitchen-sink/jade/slider-custom.jade

@@ -0,0 +1,23 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Custom Controls
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="slider-custom").no-toolbar
+    .page-content
+      .ks-slider-custom
+        .slider-container.slider-init(data-pagination=".slider-pagination", data-spaceBetween="0", data-nextButton=".slider-next-button", data-prevButton=".slider-prev-button", data-indexButton=".slider-pagination-bullet", data-paginationHide="false")
+          .slider-pagination
+          .slider-wrapper
+            - for (var i = 1; i < 8; i++)
+              .slider-slide(style="background-image:url(http://hhhhold.com/1024x1024/d/jpg?#{i})")
+        a(href="#").slider-prev-button 
+          i.icon.icon-prev
+        a(href="#").slider-next-button
+          i.icon.icon-next

data/Framework7-0.9.6/kitchen-sink/jade/slider-horizontal.jade

@@ -0,0 +1,18 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Slider Horizontal
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="slider-horizontal")
+    .page-content
+      .slider-container.slider-init.ks-demo-slider(data-pagination=".slider-pagination")
+        .slider-pagination
+        .slider-wrapper
+          - for (var i = 1; i < 11; i++)
+            .slider-slide Slide #{i}

data/Framework7-0.9.6/kitchen-sink/jade/slider-multiple.jade

@@ -0,0 +1,48 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Multiple Sliders
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="slider-multiple")
+    .page-content
+
+      .content-block-title 1 Slide Per View, 50px Between
+      .slider-container.slider-init.ks-carousel-slider(data-pagination=".slider-pagination-c1", data-spaceBetween="50")
+        .slider-pagination.slider-pagination-c1
+        .slider-wrapper
+          - for (var i = 1; i < 11; i++)
+            .slider-slide Slide #{i}
+
+      .content-block-title 2 Slides Per View, 20px Between
+      .slider-container.slider-init.ks-carousel-slider(data-pagination=".slider-pagination-c2", data-spaceBetween="20", data-slidesPerView="2")
+        .slider-pagination.slider-pagination-c2
+        .slider-wrapper
+          - for (var i = 1; i < 11; i++)
+            .slider-slide Slide #{i}
+
+      .content-block-title 3 Slides Per View, 10px Between
+      .slider-container.slider-init.ks-carousel-slider(data-pagination=".slider-pagination-c3", data-spaceBetween="10", data-slidesPerView="3")
+        .slider-pagination.slider-pagination-c3
+        .slider-wrapper
+          - for (var i = 1; i < 11; i++)
+            .slider-slide Slide #{i}
+
+      .content-block-title Vertical, 10px Between
+      .slider-container.slider-init.ks-carousel-slider(data-pagination=".slider-pagination-c4", data-spaceBetween="10", data-direction="vertical")
+        .slider-pagination.slider-pagination-c4
+        .slider-wrapper
+          - for (var i = 1; i < 6; i++)
+            .slider-slide Slide #{i}
+
+      .content-block-title Slow speed
+      .slider-container.slider-init.ks-carousel-slider(data-speed="900", data-pagination=".slider-pagination-c5", data-spaceBetween="50")
+        .slider-pagination.slider-pagination-c5
+        .slider-wrapper
+          - for (var i = 1; i < 11; i++)
+            .slider-slide Slide #{i}

data/Framework7-0.9.6/kitchen-sink/jade/slider-nested.jade

@@ -0,0 +1,26 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Nested Sliders
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="slider-nested")
+    .page-content
+      .slider-container.slider-init.ks-demo-slider(data-pagination=".slider-pagination-h", data-paginationHide="false")
+        .slider-pagination.slider-pagination-h
+        .slider-wrapper
+            .slider-slide Horizontal Slide 1
+            .slider-slide 
+              .slider-container.slider-init.ks-demo-slider(data-pagination=".slider-pagination-v", data-direction="vertical", data-paginationHide="false")
+                .slider-pagination.slider-pagination-v
+                .slider-wrapper
+                  .slider-slide Vertical Slide 1
+                  .slider-slide Vertical Slide 2
+                  .slider-slide Vertical Slide 3
+            .slider-slide Horizontal Slide 3
+            .slider-slide Horizontal Slide 4

data/Framework7-0.9.6/kitchen-sink/jade/slider-space-between.jade

@@ -0,0 +1,18 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Space Between Slides
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="slider-horizontal")
+    .page-content
+      .slider-container.slider-init.ks-demo-slider(data-pagination=".slider-pagination", data-spaceBetween="50")
+        .slider-pagination
+        .slider-wrapper
+          - for (var i = 1; i < 11; i++)
+            .slider-slide.ks-slide-white Slide #{i}

data/Framework7-0.9.6/kitchen-sink/jade/slider-vertical.jade

@@ -0,0 +1,18 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Slider Vertical
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="slider-vertical")
+    .page-content
+      .slider-container.slider-init.ks-demo-slider(data-direction="vertical", data-pagination=".slider-pagination")
+        .slider-pagination
+        .slider-wrapper
+          - for (var i = 1; i < 11; i++)
+            .slider-slide Slide #{i}

data/Framework7-0.9.6/kitchen-sink/jade/slider.jade

@@ -0,0 +1,57 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Slider
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="slider")
+    .page-content
+      .content-block
+        p Framework7 comes with powerful swipe Slider component similar to <a href="http://idangero.us/sliders/swiper" target="_blank" class="external">Swiper</a> with flexible configuration and lot of features:
+        ul
+          li Resistant bounds
+          li Scroll prevention in opposite direction
+          li Built-in pagination control
+          li Carousel mode - allows you to set numbers of slides you want to display at the same time per view
+          li Nesting - you can nest Slider in Slider
+          li Auto initialization - no need for JavaScript
+
+      .content-block-title Slider Examples
+      .list-block
+        ul
+          li
+            a(href="slider-horizontal.html").item-link.item-content
+              .item-inner
+                .item-title Slider Horizontal
+          li
+            a(href="slider-vertical.html").item-link.item-content
+              .item-inner
+                .item-title Slider Vertical
+          li
+            a(href="slider-space-between.html").item-link.item-content
+              .item-inner
+                .item-title Space Between Slides
+          li
+            a(href="slider-multiple.html").item-link.item-content
+              .item-inner
+                .item-title Multiple Per Page
+          li
+            a(href="slider-custom.html").item-link.item-content
+              .item-inner
+                .item-title Custom Controls
+          li
+            a(href="slider-nested.html").item-link.item-content
+              .item-inner
+                .item-title Nested Sliders
+
+
+      //- .slider-container.slider-init(data-speed="600", data-direction="vertical", data-slidesPerView="3", data-spaceBetween="50", data-paginationhide="true", data-pagination=".slider-pagination")
+      //-   .slider-pagination
+      //-   .slider-wrapper
+      //-     - for (var i = 1; i < 10; i++)
+      //-       .slider-slide Slide #{i}

data/Framework7-0.9.6/kitchen-sink/jade/sortable-list.jade

@@ -0,0 +1,107 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Sortable List
+    .right
+      a(href="#").link.toggle-sortable.icon-only Edit
+.pages.navbar-through
+  .page(data-page="sortable-list")
+    .page-content
+      .content-block
+        p Just click "Edit" button on navigation bar to enable sorting
+      .list-block.sortable
+        ul
+          li
+            .item-content
+              .item-media
+                i.icon.icon-f7
+              .item-inner 
+                .item-title 1 Jenna Smith
+                .item-after CEO
+            .sortable-handler
+          li
+            .item-content
+              .item-media
+                i.icon.icon-f7
+              .item-inner 
+                .item-title 2 John Doe
+                .item-after Director
+            .sortable-handler
+          li
+            .item-content
+              .item-media
+                i.icon.icon-f7
+              .item-inner 
+                .item-title 3 John Doe
+                .item-after Developer
+            .sortable-handler
+          li
+            .item-content
+              .item-media
+                i.icon.icon-f7
+              .item-inner 
+                .item-title 4 Aaron Darling
+                .item-after Manager
+            .sortable-handler
+          li
+            .item-content
+              .item-media
+                i.icon.icon-f7
+              .item-inner 
+                .item-title 5 Calvin Johnson
+                .item-after Accounter
+            .sortable-handler
+          li
+            .item-content
+              .item-media
+                i.icon.icon-f7
+              .item-inner 
+                .item-title 6 John Smith
+                .item-after SEO
+            .sortable-handler
+          li
+            .item-content
+              .item-media
+                i.icon.icon-f7
+              .item-inner 
+                .item-title 7 Chloe
+                .item-after Manager
+            .sortable-handler
+      .list-block.media-list.sortable
+        ul
+          li
+            .item-content
+              .item-media
+                img(src="http://hhhhold.com/160/d/jpg?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.
+            .sortable-handler
+          li
+            .item-content
+              .item-media
+                img(src="http://hhhhold.com/160/d/jpg?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.
+            .sortable-handler
+          li
+            .item-content
+              .item-media
+                img(src="http://hhhhold.com/160/d/jpg?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.
+            .sortable-handler