updated jqzoom and products compare page is responsive now

2013-12-02 16:41:13 +02:00
parent c8ca67eef5
commit f99140113b
9 changed files with 1056 additions and 101 deletions
@@ -109,4 +109,99 @@ table#product_comparison {
 .ie8 table#product_comparison .product-image-block .product_image img {
 	width:auto;
 }
-.footer_link { margin-bottom:20px;}
+.footer_link { margin-bottom:20px;}
+
+
+#product_comparison{
+    .comparison_feature{
+      .product_name{display: none;}
+    }
+  }
+
+@media (max-width: 992px) {
+  #columns table#product_comparison{
+    tbody tr td.td_empty span {
+      font-size: 14px;
+    }
+    tbody tr td.product-block {
+      padding: 14px;
+    } 
+    .button.ajax_add_to_cart_button, .button.lnk_view{
+      font-size: 14px;
+    }
+  }
+}
+
+@media (max-width: 767px) {
+  #product_comparison table, 
+  #product_comparison thead, 
+  #product_comparison tbody, 
+  #product_comparison th, 
+  #product_comparison td, 
+  #product_comparison tr {display: block;}
+
+  #product_comparison thead tr {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+  #product_comparison tr {
+    overflow: hidden;
+    &:last-child{
+      border-bottom: none;
+      td{
+        border-bottom: none;
+      }
+    }
+  }
+
+  #product_comparison td {
+    border: none;
+    position: relative;
+    white-space: normal;
+    float: left;
+    width: 33.33%;
+    &.td_empty{
+      width: 100% !important;
+      clear: both; 
+    }
+    &:last-child{
+      border-bottom: none;
+    }
+  }
+
+  #product_comparison{
+    .comparison_feature{
+      .feature-name{
+        width: 100%;
+        float: none;
+        clear: both;
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  #product_comparison td {
+    float: none;
+    width: 100%;
+  }
+
+  #product_comparison{
+    .comparison_feature{
+      td{
+        float: left;
+        width: 50%;
+      }
+      .feature-name{
+        width: 100%;
+        clear: both;
+      }
+      .product-name{
+        width: 50%;
+        float: left;
+        display: block;
+      }
+    }
+  }
+}
@@ -94,6 +94,17 @@ img{
 			&:hover:after{color:$base-text-color}
 		}
 	}
+	a.jqzoom {
+		div div {
+			img {
+				width:auto;
+				max-width:10000px;
+			}
+			.zoomWrapper {
+				border:none;	
+			}
+		}
+	}
 }
 }
 .ie8 #pb-right-column {
@@ -151,7 +162,7 @@ img{
 		width:90px;
 		cursor:pointer;
 		border:1px solid $product-image-border;
-		margin-right:9px;
+		margin-right:8px;
 		line-height:0;
 		@include box-sizing(border-box);
 																		@media (min-width: $screen-sm) and (max-width: $screen-sm-max) { //min 768px max 991px