fix(thumbnail): Correctly apply thumbnail style to item directive, cl…

…oses #509
ionic-team · Feb 23, 2014 · 977c1cc · 977c1cc
1 parent 1503cc7
commit 977c1cc
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/js/ext/angular/test/list.html b/js/ext/angular/test/list.html
@@ -67,12 +67,6 @@
       .my-repeat-animation > .ng-move.ng-move-active {
         opacity:1;
       }
-      .item-message img {
-        float: left;
-        width: 50px;
-        height: 50px;
-        margin-right: 10px;
-      }
     </style>
 
   </head>
@@ -115,7 +109,7 @@ <h1 class="title">List Tests</h1>
               option-buttons="optionButtons1">
 
           <!-- shows that the item directive does not need attributes and can get values from the list attributes -->
-          <ion-item ion-item="item" ng-href="#" ng-click="itemClick()" class="item-message" ng-repeat="item in items" ng-class="{ active: item.isActive}">
+          <ion-item ion-item="item" ng-href="#" ng-click="itemClick()" class="item-thumbnail-left" ng-repeat="item in items" ng-class="{ active: item.isActive}">
             <img ng-src="{{item.face}}">
             <h2>{{item.from}}</h2>
             <p>{{item.text}}</p>

diff --git a/scss/_items.scss b/scss/_items.scss
@@ -438,7 +438,8 @@ button.item-button-right:after,
 // Item Thumbnails
 // -------------------------------
 
-.item-thumbnail-left {
+.item-thumbnail-left,
+.item-thumbnail-left .item-content {
   padding-left: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
   min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
 
@@ -451,8 +452,12 @@ button.item-button-right:after,
     width: 100%;
   }
 }
+.item-thumbnail-left.item-complex {
+  padding-left: 0;
+}
 
-.item-thumbnail-right {
+.item-thumbnail-right,
+.item-thumbnail-right .item-content {
   padding-right: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
   min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
 
@@ -465,6 +470,9 @@ button.item-button-right:after,
     width: 100%;
   }
 }
+.item-thumbnail-left.item-complex {
+  padding-right: 0;
+}
 
 
 // Item Image