From c0c8789abe7b376b40fcc5f2c373e114f497f21d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my?= Date: Wed, 5 Jul 2017 16:18:35 +0200 Subject: [PATCH] responsive page devis --- www/themes/versionecologique/css/global.css | 40 ++++++- www/themes/versionecologique/js/global.js | 10 +- .../versionecologique/shopping-cart.tpl | 109 +++++++++--------- 3 files changed, 102 insertions(+), 57 deletions(-) diff --git a/www/themes/versionecologique/css/global.css b/www/themes/versionecologique/css/global.css index 6de4659..f6af16a 100644 --- a/www/themes/versionecologique/css/global.css +++ b/www/themes/versionecologique/css/global.css @@ -2974,6 +2974,7 @@ body.content_only { margin: 0 } margin: 0 0 0 auto; position:relative; width:98px; + overflow:hidden; } #devis .bloc-left .listing .item-devis img { width:100%;} #devis .bloc-left .listing .item-devis .img-hover { @@ -3003,7 +3004,7 @@ body.content_only { margin: 0 } opacity:1; } - #devis .bloc-left .continue-shop { margin-top: 40px; text-align: center; } + #devis .bloc-left .continue-shop { margin: 40px 0; text-align: center; } #devis .bloc-left .continue-shop a { background: #333; border-radius: 50px; @@ -3023,7 +3024,7 @@ body.content_only { margin: 0 } #devis .bloc-right > span { font-family: "RubikMedium"; font-size: 15px;} #devis .bloc-right form { margin-top:25px;} #devis .bloc-right form label { display:block; font-size: 12px; margin-bottom:5px; padding: 0 0 0 20px;} - #devis .bloc-right form label.textarea-label { font-family: "RubikMedium"; font-size: 15px; margin-bottom:15px; padding-left: 0;} + #devis .bloc-right form label.textarea-label { font-family: "RubikMedium"; font-size: 15px; margin-bottom:15px; margin-top:25px; padding-left: 0;} #devis .bloc-right form input { background:#fff; border:none; @@ -3074,6 +3075,41 @@ body.content_only { margin: 0 } #devis .bloc-left .listing .item-devis .item-img { height:78px; width:100%;} #devis .bloc-right form .custom-checkbox:after { top:14px; } } +@media (max-width: 991px) { + #devis .bloc-left .listing .item-devis .item-img { height:193px; width:100%;} +} +@media (max-width: 767px) { + #devis .bloc-left .listing .item-devis .item-img { height:105px; width:105px;} + #devis .bloc-right form .form-group { margin-bottom:0; } + #devis .bloc-right form input { margin-bottom:0;} + #devis .bloc-right form textarea { margin-bottom: 40px;} +} + +@media (max-width: 479px) { + #devis .bloc-left { + background: url(../img/feuilles-devis.png) 50% top no-repeat; + background-size: cover; + } + #devis .bloc-left .bloc-devis > .title { font-size:16px; padding:20px 0;} + + #devis .bloc-left .listing .item-infos .title {font-size:12px;} + #devis .bloc-left .listing .item-infos span:not(.title) {font-size:10px;} + + #devis .bloc-left .listing .item-devis {padding:15px 0;} + #devis .bloc-left .listing .item-devis .item-img { width:80px; height:80px;} + #devis .bloc-left .continue-shop { margin:20px 0; } + #devis .bloc-left .continue-shop a { font-size: 12px; padding: 12px 25px;} + + #devis .bloc-right > .title {font-size:18px;} + #devis .bloc-right > .subtitle {font-size:12px;} + #devis .bloc-right > span { font-size:12px;} + #devis .bloc-right form input { margin:0; padding: 18px 15px; } + #devis .bloc-right form label.textarea-label { font-size:12px;} + #devis .bloc-right form textarea { min-height:110px; padding:10px 20px;} + #devis .bloc-right form .custom-checkbox label { font-size:10px; margin-top:10px;} + #devis .bloc-right form .valid-form-btn { font-size:14px; width:100%; padding:17px 0;} + #devis .bloc-right form .custom-checkbox:after { top:22px;} +} /**************************************** == POPUP PANIER == *****************************************/ diff --git a/www/themes/versionecologique/js/global.js b/www/themes/versionecologique/js/global.js index e719339..c8efc04 100644 --- a/www/themes/versionecologique/js/global.js +++ b/www/themes/versionecologique/js/global.js @@ -282,9 +282,15 @@ $(document).ready(function() { $("#devis form label").not(".newsletter-label").not(".textarea-label").css("opacity",0); $("#devis form input").on("input", function(){ if($(this).val().length > 0) { - $(this).parent().find("label").css("opacity",1); + $(this).addClass("notEmpty"); + if($(window).width() >= 992) { + $(this).parent().find("label").css("opacity", 1); + } } else { - $(this).parent().find("label").css("opacity",0); + $(this).removeClass("notEmpty"); + if($(window).width() >= 992) { + $(this).parent().find("label").css("opacity",0); + } } }); /********* CONFIGURATEUR DEVIS ********/ diff --git a/www/themes/versionecologique/shopping-cart.tpl b/www/themes/versionecologique/shopping-cart.tpl index 2b12a7f..bed5242 100644 --- a/www/themes/versionecologique/shopping-cart.tpl +++ b/www/themes/versionecologique/shopping-cart.tpl @@ -6,76 +6,78 @@
-
-
-

{l s='Mon devis'}

-
-
-
- {l s='T-shirt en coton bio - femme 140g - blablabla blablabla'} - {l s='Ref. XD-P323.140'} - {l s='Marquage : '}{l s='1 couleur ou quadri'} - {l s='Quantités : '}{l s='250 ou 300 ou 350'} -
-
-
- Image du produit -
-
- - +
+
+
+

{l s='Mon devis'}

+
+
+
+ {l s='T-shirt en coton bio - femme 140g - blablabla blablabla'} + {l s='Ref. XD-P323.140'} + {l s='Marquage : '}{l s='1 couleur ou quadri'} + {l s='Quantités : '}{l s='250 ou 300 ou 350'} +
+
+
+ Image du produit +
+
+ + +
-
-
-
- {l s='T-shirt en coton bio - femme 140g - blablabla blablabla'} - {l s='Ref. XD-P323.140'} - {l s='Marquage : '}{l s='1 couleur ou quadri'} - {l s='Quantités : '}{l s='250 ou 300 ou 350'} -
-
-
- Image du produit -
-
- - +
+
+ {l s='T-shirt en coton bio - femme 140g - blablabla blablabla'} + {l s='Ref. XD-P323.140'} + {l s='Marquage : '}{l s='1 couleur ou quadri'} + {l s='Quantités : '}{l s='250 ou 300 ou 350'} +
+
+
+ Image du produit +
+
+ + +
-
-
-
- {l s='T-shirt en coton bio - femme 140g - blablabla blablabla'} - {l s='Ref. XD-P323.140'} - {l s='Marquage : '}{l s='1 couleur ou quadri'} - {l s='Quantités : '}{l s='250 ou 300 ou 350'} -
-
-
- Image du produit -
-
- - +
+
+ {l s='T-shirt en coton bio - femme 140g - blablabla blablabla'} + {l s='Ref. XD-P323.140'} + {l s='Marquage : '}{l s='1 couleur ou quadri'} + {l s='Quantités : '}{l s='250 ou 300 ou 350'} +
+
+
+ Image du produit +
+
+ + +
-
-
- {l s='Compléter ma demande de devis'} +
+ {l s='Compléter ma demande de devis'} +
-
+

{l s='Demande de devis'}

{l s='Une fois votre demande de devis envoyée, notre équipe vous contacte très rapidement pour vous proposer un devis personnalisé'}

{l s='Qui devons-nous contacter ?'} @@ -107,7 +109,8 @@
- +