add media in table views

components.html

@@ -499,6 +499,84 @@ quis nostrud exercitation ullamco.</p>
 
   </article>
 
+  <article class="component">
+    <h3 class="component-title">Table view with media</h3>
+
+    <div class="component-example component-example-fullbleed">
+      <ul class="table-view">
+        <li class="table-view-cell media">
+          <a>
+            <span class="icon icon-right pull-right"></span>
+            <span class="badge pull-right">5</span>
+            <img class="media-object pull-left" src="http://placehold.it/42x42">
+            <div class="media-body">
+              Item 1
+            </div>
+          </a>
+        </li>
+        <li class="table-view-cell media">
+          <a>
+            <span class="icon icon-right pull-right"></span>
+            <span class="badge pull-right">5</span>
+            <img class="media-object pull-left" src="http://placehold.it/42x42">
+            <div class="media-body">
+              Item 1
+            </div>
+          </a>
+        </li>
+        <li class="table-view-cell media">
+          <a>
+            <span class="icon icon-right pull-right"></span>
+            <span class="badge pull-right">5</span>
+            <img class="media-object pull-left" src="http://placehold.it/42x42">
+            <div class="media-body">
+              Item 1
+            </div>
+          </a>
+        </li>
+      </ul>
+    </div>
+
+{% highlight html %}
+<ul class="table-view">
+  <li class="table-view-cell media">
+    <a>
+      <span class="icon icon-right pull-right"></span>
+      <span class="badge pull-right">5</span>
+      <img class="media-object pull-left" src="http://placehold.it/42x42">
+      <div class="media-body">
+        Item 1
+        <p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
+      </div>
+    </a>
+  </li>
+  <li class="table-view-cell media">
+    <a>
+      <span class="icon icon-right pull-right"></span>
+      <span class="badge pull-right">5</span>
+      <img class="media-object pull-left" src="http://placehold.it/42x42">
+      <div class="media-body">
+        Item 1
+        <p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
+      </div>
+    </a>
+  </li>
+  <li class="table-view-cell media">
+    <a>
+      <span class="icon icon-right pull-right"></span>
+      <span class="badge pull-right">5</span>
+      <img class="media-object pull-left" src="http://placehold.it/42x42">
+      <div class="media-body">
+        Item 1
+        <p>Chevrons are created with CSS3, so no image assets are needed. They should be used to indicate that the item is linked.</p>
+      </div>
+    </a>
+  </li>
+</ul>
+{% endhighlight %}
+
+  </article>
+
   <article class="component">
     <h3 class="component-title">Table view with buttons</h3>
 

dist/ratchet.css

@@ -684,7 +684,8 @@ input[type="button"] {
 }
 .table-view .table-view-cell {
   position: relative;
-  padding: 11px 15px 12px 15px;
+  overflow: hidden;
+  padding: 11px 15px;
   border-bottom: 1px solid #dddddd;
 }
 .table-view .table-view-cell:last-child {
@@ -693,8 +694,9 @@ input[type="button"] {
 .table-view .table-view-cell > a:not(.btn) {
   position: relative;
   display: block;
+  overflow: hidden;
   padding: inherit;
-  margin: -11px -15px -12px -15px;
+  margin: -11px -15px;
   color: inherit;
 }
 .table-view .table-view-cell > a:not(.btn):active {
@@ -723,18 +725,17 @@ input[type="button"] {
   border-radius: 0 0 6px 6px;
 }
 
-.table-view-indented .table-view-cell {
-  padding-left: 59px;
-  background-position-x: 59px;
+.table-view .media,
+.table-view .media-body {
+  overflow: hidden;
+  zoom: 1;
 }
-.table-view-indented .table-view-cell > a:not(.btn) {
-  margin-left: -59px;
+
+.table-view .media-object.pull-left {
+  margin-right: 10px;
 }
-.table-view-indented .table-view-cell > .pull-left,
-.table-view-indented .table-view-cell > a:not(.btn) .pull-left {
-  position: absolute;
-  left: 15px;
-  z-index: 1;
+.table-view .media-object.pull-right {
+  margin-left: 10px;
 }
 
 .table-view .btn {

lib/sass/table-views.scss

@@ -11,7 +11,8 @@
   // Pad each table view item and add dividers
   .table-view-cell {
     position: relative;
-    padding: 11px 15px 12px 15px;
+    overflow: hidden;
+    padding: 11px 15px;
     border-bottom: $border-default;
 
     // Remove the border from the last table view item
@@ -22,8 +23,9 @@
     > a:not(.btn) {
       position: relative;
       display: block;
+      overflow: hidden;
       padding: inherit;
-      margin: -11px -15px -12px -15px; // Make the entire list item tappable.
+      margin: -11px -15px; // Make the entire list item tappable.
       color: inherit;
 
       &:active {
@@ -64,26 +66,23 @@
 }
 
 
-// Indented table views
+// Table-views with media (images,avatars, icons)
 // --------------------------------------------------
 
-.table-view-indented .table-view-cell {
-  padding-left: 59px;
-  background-position-x: 59px; // Make room for your left aligned media/icons.
-
-  > a:not(.btn) {
-    margin-left: -59px;
+.table-view .media,
+.table-view .media-body {
+  overflow: hidden;
+  zoom: 1;
+}
+.table-view .media-object {
+  &.pull-left {
+    margin-right: 10px;
   }
-
-  > .pull-left,
-  > a:not(.btn) .pull-left {
-    position: absolute;
-    left: 15px;
-    z-index: 1;
+  &.pull-right {
+    margin-left: 10px;
   }
 }
 
-
 // Table-views with buttons
 // --------------------------------------------------