From a299a21558b2362eca79959c9558fb7ceda56506 Mon Sep 17 00:00:00 2001
From: nael <nael@cubedesigners.com>
Date: Tue, 4 Jun 2019 16:59:01 +0200
Subject: [PATCH] wip #2811 @6

---
 .../product-onglet/img/arrow-down.svg         |  3 +
 public/_modules/product-onglet/index.html     | 99 +++++++++++--------
 public/_modules/product-onglet/product.js     | 12 ++-
 public/_modules/product-onglet/style.styl     | 36 ++++---
 4 files changed, 95 insertions(+), 55 deletions(-)
 create mode 100644 public/_modules/product-onglet/img/arrow-down.svg

diff --git a/public/_modules/product-onglet/img/arrow-down.svg b/public/_modules/product-onglet/img/arrow-down.svg
new file mode 100644
index 0000000..29654f0
--- /dev/null
+++ b/public/_modules/product-onglet/img/arrow-down.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16.16" height="9.588" viewBox="0 0 16.16 9.588">
+  <path id="Tracé_29" data-name="Tracé 29" d="M3719.6-783.348l-7.459,7.459-7.278-7.459" transform="translate(-3704.146 784.055)" fill="none" stroke="#6b7287" stroke-miterlimit="10" stroke-width="2"/>
+</svg>
diff --git a/public/_modules/product-onglet/index.html b/public/_modules/product-onglet/index.html
index 6980002..76c05f7 100644
--- a/public/_modules/product-onglet/index.html
+++ b/public/_modules/product-onglet/index.html
@@ -14,13 +14,13 @@
 
 <div id="product-detail">
     <ul class="flex product-nav">
-        <li data-nav="0" class="product-nav-item active-nav">
-            <div class="section-title justify-between items-center">
+        <li class="product-nav-item ">
+            <div data-nav="0" class="section-title justify-between items-center active-nav">
                 Description
                 <img class="product-nav-arrow" src="img/arrow-down.svg" alt="">
             </div>
 
-            <div data-content="0"  class="responsive-content flex flex-col description mt-4 hidden">
+            <div data-content="0"  class="responsive-content flex flex-col description hidden">
                 <span class="description-title">Titre de la description</span>
                 <p class="description-paragraph text-grey-dark">
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ante ipsum, fringilla nec diam ac,
@@ -38,45 +38,64 @@
             </div>
 
         </li>
-        <li data-nav="1" class="product-nav-item">
-            <div class="section-title justify-between items-center">
+        <li  class="product-nav-item">
+            <div data-nav="1" class="section-title justify-between items-center">
                 Spécifications
                 <img class="product-nav-arrow" src="img/arrow-down.svg" alt="">
             </div>
-            <div data-content="1" class="mt-4 responsive-content specification flex hidden text-grey-dark">
-                <ul>
-                    <li class="specification-info">Etendue de mesure (kN)</li>
-                    <li class="specification-info mt-6">Précision (erreur totale)</li>
-                    <li class="specification-info mt-6">Non-linéarité, % PE</li>
-                    <li class="specification-info mt-6">Hystérésis, % PE</li>
-                    <li class="specification-info mt-6">Non-répétabilité, % PE</li>
-                    <li class="specification-info mt-6">Dérive sous charge (20 mins)</li>
-                    <li class="specification-info mt-6">Sensibilité transverse %</li>
-                    <li class="specification-info mt-6">Gamme de compensation °C</li>
-                    <li class="specification-info mt-6">Gamme d’utilisation °C</li>
-                    <li class="specification-info mt-6">Sensibilité au Zéro (%PE/°C)</li>
-                </ul>
-                <ul>
-                    <li>1.5 / 2.5 / 5 / 10</li>
-                    <li class="mt-6">± 0.04</li>
-                    <li class="mt-6">± 0.04</li>
-                    <li class="mt-6">± 0.03</li>
-                    <li class="mt-6">± 0.01</li>
-                    <li class="mt-6">± 0.025</li>
-                    <li class="mt-6">± 0.25</li>
-                    <li class="mt-6">-10 à + 45</li>
-                    <li class="mt-6">-55 à 90</li>
-                    <li class="mt-6">± 0.0015</li>
+            <div data-content="1" class=" responsive-content specification hidden text-grey-dark">
+                <ul class="specification-list">
+                    <li class=" flex justify-between">
+                        <div class="specification-info">Etendue de mesure (kN)</div>
+                        <div class="specification-value">1.5 / 2.5 / 5 / 10</div>
+                    </li>
+                    <li class="flex justify-between mt-6">
+                        <div class="specification-info">Précision (erreur totale)</div>
+                        <div class="specification-value">± 0.04</div>
+                    </li>
+
+                    <li class="flex justify-between mt-6">
+                        <div class="specification-info">Non-linéarité, % PE</div>
+                        <div class="specification-value">± 0.04</div>
+                    </li>
+                    <li class="flex justify-between mt-6">
+                        <div class="specification-info">Hystérésis, % PE</div>
+                        <div class="specification-value">± 0.03</div>
+                    </li>
+                    <li class="flex justify-between mt-6">
+                        <div class="specification-info">Non-répétabilité, % PE</div>
+                        <div class="specification-value">± 0.01</div>
+                    </li>
+                    <li class="flex justify-between mt-6">
+                        <div class="specification-info">Dérive sous charge (20 mins)</div>
+                        <div class="specification-value">± 0.025</div>
+                    </li>
+                    <li class="flex justify-between mt-6">
+                        <div class="specification-info">Sensibilité transverse %</div>
+                        <div class="specification-value">± 0.25</div>
+                    </li>
+                    <li class="flex justify-between mt-6">
+                        <div class="specification-info">Gamme de compensation °C</div>
+                        <div class="specification-value">-10 à + 45</div>
+                    </li>
+                    <li class="flex justify-between mt-6">
+                        <div class="specification-info">Gamme d'utilisation °C</div>
+                        <div class="specification-value">-55 à 90</div>
+                    </li>
+                    <li class="flex justify-between mt-6">
+                        <div class="specification-info">Sensibilité au Zéro (%PE/°C)</div>
+                        <div class="specification-value">± 0.0015</div>
+                    </li>
                 </ul>
             </div>
 
         </li>
-        <li data-nav="2" class="product-nav-item">
-            <div class="section-title justify-between items-center">
+        <li  class="product-nav-item">
+            <div data-nav="2" class="section-title justify-between items-center">
                 Documents
                 <img class="product-nav-arrow" src="img/arrow-down.svg" alt="">
             </div>
-            <div data-content="2" class="responsive-content mt-4 document hidden">
+            <div data-content="2" class="responsive-content  document hidden">
                 <ul class="text-grey-dark">
                     <li class="flex items-center ">
                         <img class="mr-4 mb-2" src="img/icon-file.svg" alt="">
@@ -97,14 +116,14 @@
                 </ul>
             </div>
         </li>
-        <li data-nav="3" class="product-nav-item">
-            <div class="section-title justify-between items-center">
+        <li  class="product-nav-item">
+            <div data-nav="3" class="section-title justify-between items-center">
                 Options
                 <img class="product-nav-arrow" src="img/arrow-down.svg" alt="">
             </div>
-            <div data-content="3" class="responsive-content mt-4 option hidden">
+            <div data-content="3" class="responsive-content option hidden">
                 <ul class="text-grey-dark">
-                    <li class="option-item mt-6">Option 1</li>
+                    <li class="option-item ">Option 1</li>
                     <li class="option-item mt-6">Option 2</li>
                     <li class="option-item mt-6">Option 3</li>
                     <li class="option-item mt-6">Option 4</li>
@@ -117,14 +136,14 @@
                 </ul>
             </div>
         </li>
-        <li data-nav="4" class="product-nav-item">
-            <div class="section-title justify-between items-center">
+        <li class="product-nav-item">
+            <div data-nav="4" class="section-title justify-between items-center">
                 Accessoires
                 <img class="product-nav-arrow" src="img/arrow-down.svg" alt="">
             </div>
-            <div data-content="4" class="responsive-content mt-4 accessoire hidden">
+            <div data-content="4" class="responsive-content  accessoire hidden">
                 <ul class="text-grey-dark">
-                    <li class="accessoire-item mt-6">Accessoire 1</li>
+                    <li class="accessoire-item ">Accessoire 1</li>
                     <li class="accessoire-item mt-6">Accessoire 2</li>
                     <li class="accessoire-item mt-6">Accessoire 3</li>
                     <li class="accessoire-item mt-6">Accessoire 4</li>
diff --git a/public/_modules/product-onglet/product.js b/public/_modules/product-onglet/product.js
index f195796..c8ed953 100644
--- a/public/_modules/product-onglet/product.js
+++ b/public/_modules/product-onglet/product.js
@@ -1,23 +1,29 @@
 // jshint ignore: start
 
-$('.product-nav-item').each(function () {
+$('.section-title').each(function () {
    $(this).on('click',function () {
        let that = $(this);
 
        $('.content-item').each(function () {
            if($(this).data('content') === that.data('nav')){
                $(this).addClass('active-content').siblings().removeClass('active-content').addClass('hidden');
-               that.addClass('active-nav').siblings().removeClass('active-nav');
+               that.addClass('active-nav').parent().siblings().find(".section-title").removeClass('active-nav');
            }
        });
 
        if($(window).width()< 940){
            $('.responsive-content').each(function () {
                if($(this).data('content') === that.data('nav')){
-                   $(this).toggleClass('active-content').siblings().removeClass('active-content').addClass('hidden');
                    that.find('.product-nav-arrow').toggleClass('rotate');
                }
            })
        }
    })
 });
+
+$(".section-title").click(function() {
+    $(this)
+        .toggleClass('active-content')
+        .siblings(".responsive-content")
+        .slideToggle()
+});
\ No newline at end of file
diff --git a/public/_modules/product-onglet/style.styl b/public/_modules/product-onglet/style.styl
index 1b7ba26..49d7ce9 100644
--- a/public/_modules/product-onglet/style.styl
+++ b/public/_modules/product-onglet/style.styl
@@ -22,11 +22,10 @@ $darkblue = #152F4E
     @media (max-width 940px)
       flex-direction column
     &-item
-      padding : 25px 50px
+      //padding : 25px 50px
       font-family $barlow
       font-size: 18px
       color: $darkblue
-      cursor pointer
       position: relative
       transition 400ms all ease
       @media (max-width 940px)
@@ -38,17 +37,18 @@ $darkblue = #152F4E
           bottom 0
           position absolute
           height 1px
-    &-arrow
-      position: absolute
-      right 48px
+    .section-title
+      font-family $barlow
       display flex
-      transition 400ms all ease
-      @media (min-width 940px)
-        display none
-  .section-title
-    display flex
-    font-family $barlow
+      padding : 25px 50px
+      cursor pointer
+      .product-nav-arrow
+        display flex
+        transition 400ms all ease
+        @media (min-width 940px)
+          display none
   .responsive-content
+    padding : 0px 50px 25px 50px
     @media (min-width 940px)
       display none !important
   .active-nav
@@ -59,6 +59,7 @@ $darkblue = #152F4E
     &-title
       font-family: $barlow
       font-size: 18px
+      color: $darkblue
     &-paragraph
       max-width 970px
       margin-top: 1.45em
@@ -66,6 +67,17 @@ $darkblue = #152F4E
     &-info
       width: 314px
       margin-right: 5.125em
+      @media (max-width 940px)
+        width inherit
+        margin-right: 0
+    &-list
+      @media (max-width 940px)
+        width: 100%
+    &-value
+      @media (max-width 940px)
+        width: calc(100%* 1/3)
+        text-align right
+
   .option
     &-item
       &::after
@@ -89,7 +101,7 @@ $darkblue = #152F4E
         top: -12px;
         left: -7px;
   .active-content
-    display flex
+    display flex !important
   .rotate
     transform: rotate(180deg)
     transition 400ms all ease
\ No newline at end of file
-- 
2.39.5