Parcourir la source

optimizacion movil productos

edgar il y a 7 ans
Parent
commit
012fd951e4
3 fichiers modifiés avec 58 ajouts et 10 suppressions
  1. 0 7
      static/src/css/custom.css
  2. 55 0
      static/src/less/web.less
  3. 3 3
      views/theme.xml

+ 0 - 7
static/src/css/custom.css

@@ -8,10 +8,3 @@
     .portadaamo { height: 472px !important; overflow: hidden; }
 }
 
-@media only screen and (max-device-width:767px) and (orientation:landscape) {
-.cs-product .pwp-img {
-    max-height: 447px;
-    width: 348px;
-    height: 100vh;
-}
-}

+ 55 - 0
static/src/less/web.less

@@ -3520,6 +3520,46 @@ white-space: nowrap;
 /*Personalizado Modificado a medida*/
 
 
+@media only screen and (min-device-width:360px) and (max-device-width:409px) and (min-device-aspect-ratio:360/640)  and (orientation:portrait) {
+	.cs-product { display: inline-block; width: 330px !important;
+		.pwp-img { height: 440px !important; width: 295px !important;
+			>a { img { max-height: 100vh; }
+			}
+		}
+	}
+	.slide-cs_productos { width: 295px !important; }
+	.slide-pwp_img { width: 295px !important; height: 440px !important; }
+}
+
+
+
+
+@media only screen and (min-device-width:410px) and (max-device-width:736px) and (min-device-aspect-ratio:414/736) and (orientation:portrait) {
+	.cs-product { display: inline-block; width: 380px !important;
+		.pwp-img { height: 510px !important; width: 340px !important;
+			>a { img { max-height: 100vh; }
+			}
+		}
+	}
+	.slide-cs_productos { width: 340px !important; }
+	.slide-pwp_img { width: 340px !important; height: 510px !important; }
+}
+
+@media only screen and (min-device-width:668px) and (max-device-width:766px) and (min-device-aspect-ratio:414/736) and (orientation:landscape) {
+	.cs-product { display: inline-block; width: 335px !important;
+		.pwp-img { height: 500px !important; width: 335px !important;
+			>a { img { max-height: 100vw; }
+			}
+		}
+	}
+	.slide-cs_productos { width: 335px !important; }
+	.slide-pwp_img { width: 335px !important; height: 500px !important; }
+}
+
+
+
+
+
 @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (min-device-aspect-ratio:768/1024) and (orientation:landscape) {
 	.cs-product { display: inline-block; width: 226px !important;
 		.pwp-img { height: 335px !important; width: 226px !important;
@@ -3540,6 +3580,10 @@ white-space: nowrap;
 	}
 }
 
+@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (min-device-aspect-ratio:768/1024)  and (orientation:landscape) {
+	.adsb-inner2 { height: 280px !important; }
+	.search-toggle { right: -26px !important; }
+}
 
 
 
@@ -3557,4 +3601,15 @@ white-space: nowrap;
 	.col-xxs-4 { width: 33.33333333% !important; }
 	.col-xxs-6 { width: 50% !important }
 
+}
+
+@media only screen and (min-device-width:1024px) and (max-device-width:1366px) and (min-device-aspect-ratio:1024/1366) and (orientation:portrait) {
+	.cs-product { display: inline-block; width: 230px !important;
+		.pwp-img { height: 340px !important; width: 230px !important;
+			>a { img { max-width: 100%; height: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; margin: 0; max-height: 100vh; width: 100%; }
+			}
+		}
+	}
+	.adsb-inner2 { height: 280px !important; }
+	.search-toggle { right: -26px !important; }
 }

+ 3 - 3
views/theme.xml

@@ -879,13 +879,13 @@
 						<t t-as="td_product" t-foreach="tr_product">
 							<t t-if="td_product">
 								<t t-set="product" t-value="td_product['product']"/>
-								<div class="col-md-6 col-sm-6 col-xm-12 col-xxs-4 list-items" t-if="website.product_display_grid == '2'">
+								<div class="col-md-6 col-sm-6 col-xs-12 col-xxs-6 list-items" t-if="website.product_display_grid == '2'">
 									<t t-call="kingfisher_pro.king_pro_products_item"/>
 								</div>
-								<div class="col-md-4 col-sm-6 col-xm-12 col-xxs-4 list-items" t-if="website.product_display_grid == '3'">
+								<div class="col-md-4 col-sm-6 col-xs-12 col-xxs-6 list-items" t-if="website.product_display_grid == '3'">
 									<t t-call="kingfisher_pro.king_pro_products_item"/>
 								</div>
-								<div class="col-md-3 col-sm-6 col-xm-12 col-xxs-4 list-items" t-if="website.product_display_grid == '4'">
+								<div class="col-md-3 col-sm-6 col-xs-12 col-xxs-6 list-items" t-if="website.product_display_grid == '4'">
 									<t t-call="kingfisher_pro.king_pro_products_item"/>
 								</div>
 							</t>