antadis/versionecologique
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

responsive page devis

Browse Source
This commit is contained in:
Rémy 2017-07-05 16:18:35 +02:00
parent b69d2c0c16
commit c0c8789abe
3 changed files with 102 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
www/themes/versionecologique/css/global.css
View File

@ -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 == *****************************************/

10
www/themes/versionecologique/js/global.js
View File

@ -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 ********/

109
www/themes/versionecologique/shopping-cart.tpl
View File

@ -6,76 +6,78 @@
<section id="devis">
<div class="ctn">
<div class="row">
<div class="bloc-left md5 sm5">
<div class="bloc-devis lg11 sm12">
<h2 class="title">{l s='Mon devis'}</h2>
<div class="listing animated-full clearfix">
<div class="item-devis clearfix">
<div class="item-infos md8 sm8">
<span class="title">{l s='T-shirt en coton bio - femme 140g - blablabla blablabla'}</span>
<span class="ref"><strong>{l s='Ref. XD-P323.140'}</strong></span>
<span class="marquage"><strong>{l s='Marquage : '}</strong>{l s='1 couleur ou quadri'}</span>
<span class="quantites"><strong>{l s='Quantités : '}</strong>{l s='250 ou 300 ou 350'}</span>
</div>
<div class="md4 sm4">
<div class="item-img">
<img src="{$img_dir}img-listing-devis.png" alt="Image du produit" />
<div class="img-hover">
<div class="icons">
<i class="action-modify icon icon-pen"></i>
<i class="action-delete icon icon-trash"></i>
<div class="bloc-left md5 xxs12">
<div class="row">
<div class="bloc-devis lg11 sm12">
<h2 class="title">{l s='Mon devis'}</h2>
<div class="listing animated-full clearfix">
<div class="item-devis clearfix">
<div class="item-infos md8 sm8 xs8 xxs7">
<span class="title">{l s='T-shirt en coton bio - femme 140g - blablabla blablabla'}</span>
<span class="ref"><strong>{l s='Ref. XD-P323.140'}</strong></span>
<span class="marquage"><strong>{l s='Marquage : '}</strong>{l s='1 couleur ou quadri'}</span>
<span class="quantites"><strong>{l s='Quantités : '}</strong>{l s='250 ou 300 ou 350'}</span>
</div>
<div class="md4 sm4 xs4 xxs5">
<div class="item-img">
<img src="{$img_dir}img-listing-devis.png" alt="Image du produit" />
<div class="img-hover">
<div class="icons">
<i class="action-modify icon icon-pen"></i>
<i class="action-delete icon icon-trash"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item-devis clearfix">
<div class="item-infos md8 sm8">
<span class="title">{l s='T-shirt en coton bio - femme 140g - blablabla blablabla'}</span>
<span class="ref"><strong>{l s='Ref. XD-P323.140'}</strong></span>
<span class="marquage"><strong>{l s='Marquage : '}</strong>{l s='1 couleur ou quadri'}</span>
<span class="quantites"><strong>{l s='Quantités : '}</strong>{l s='250 ou 300 ou 350'}</span>
</div>
<div class="md4 sm4">
<div class="item-img">
<img src="{$img_dir}img-listing-devis.png" alt="Image du produit" />
<div class="img-hover">
<div class="icons">
<i class="action-modify icon icon-pen"></i>
<i class="action-delete icon icon-trash"></i>
<div class="item-devis clearfix">
<div class="item-infos md8 xs8 xxs7">
<span class="title">{l s='T-shirt en coton bio - femme 140g - blablabla blablabla'}</span>
<span class="ref"><strong>{l s='Ref. XD-P323.140'}</strong></span>
<span class="marquage"><strong>{l s='Marquage : '}</strong>{l s='1 couleur ou quadri'}</span>
<span class="quantites"><strong>{l s='Quantités : '}</strong>{l s='250 ou 300 ou 350'}</span>
</div>
<div class="md4 xs4 xxs5">
<div class="item-img">
<img src="{$img_dir}img1.png" alt="Image du produit" />
<div class="img-hover">
<div class="icons">
<i class="action-modify icon icon-pen"></i>
<i class="action-delete icon icon-trash"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item-devis clearfix">
<div class="item-infos md8 sm8">
<span class="title">{l s='T-shirt en coton bio - femme 140g - blablabla blablabla'}</span>
<span class="ref"><strong>{l s='Ref. XD-P323.140'}</strong></span>
<span class="marquage"><strong>{l s='Marquage : '}</strong>{l s='1 couleur ou quadri'}</span>
<span class="quantites"><strong>{l s='Quantités : '}</strong>{l s='250 ou 300 ou 350'}</span>
</div>
<div class="md4 sm4">
<div class="item-img">
<img src="{$img_dir}img-listing-devis.png" alt="Image du produit" />
<div class="img-hover">
<div class="icons">
<i class="action-modify icon icon-pen"></i>
<i class="action-delete icon icon-trash"></i>
<div class="item-devis clearfix">
<div class="item-infos md8 xs8 xxs7">
<span class="title">{l s='T-shirt en coton bio - femme 140g - blablabla blablabla'}</span>
<span class="ref"><strong>{l s='Ref. XD-P323.140'}</strong></span>
<span class="marquage"><strong>{l s='Marquage : '}</strong>{l s='1 couleur ou quadri'}</span>
<span class="quantites"><strong>{l s='Quantités : '}</strong>{l s='250 ou 300 ou 350'}</span>
</div>
<div class="md4 xs4 xxs5">
<div class="item-img">
<img src="{$img_dir}img-listing-devis.png" alt="Image du produit" />
<div class="img-hover">
<div class="icons">
<i class="action-modify icon icon-pen"></i>
<i class="action-delete icon icon-trash"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="continue-shop">
<a href="#" class="btn">{l s='Compléter ma demande de devis'}</a>
<div class="continue-shop">
<a href="#" class="btn">{l s='Compléter ma demande de devis'}</a>
</div>
</div>
</div>
</div>
<div class="bloc-right md7 sm7">
<div class="bloc-right md7 xxs12">
<h2 class="title">{l s='Demande de devis'}</h2>
<p class="subtitle">{l s='Une fois votre demande de devis envoyée, notre équipe vous contacte très rapidement pour vous proposer un devis personnalisé'}</p>
<span>{l s='Qui devons-nous contacter ?'}</span>
@ -107,7 +109,8 @@
<div class="clearfix">
<div class="form-group">
<label class="textarea-label" for="comment">{l s='Ajoutez une précision à votre demande'}</label>
<textarea name="" id="comment" ></textarea>
<textarea name="" id="comment" placeholder="Précisez ici votre demande pour que nous puissions réaliser le devis le plus précis possible.
(Ex. marquage recto-verso différents, demandes personnalisées, etc.)"></textarea>
</div>
</div>
<div class="clearfix">