wip #2811 @4

diff --git a/public/_modules/product-onglet/img/icon-file-2.svg b/public/_modules/product-onglet/img/icon-file-2.svg
new file mode 100644 (file)
index 0000000..e78821b
--- /dev/null
+++ b/public/_modules/product-onglet/img/icon-file-2.svg
@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.942" height="31" viewBox="0 0 23.942 31">
+  <g id="Groupe_130" data-name="Groupe 130" transform="translate(-207.499 -1302.5)">
+    <g id="Groupe_120" data-name="Groupe 120" transform="translate(208 1302.999)">
+      <g id="Groupe_124" data-name="Groupe 124" transform="translate(0 0)">
+        <path id="Tracé_202" data-name="Tracé 202" d="M4004.51-1343.333H3984.3a1.365,1.365,0,0,1-1.365-1.364v-27.271a1.365,1.365,0,0,1,1.365-1.364h14.926l6.651,6.651v21.985A1.364,1.364,0,0,1,4004.51-1343.333Z" transform="translate(-3982.933 1373.333)" fill="#0eaada" stroke="#f7f8fc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <path id="Tracé_203" data-name="Tracé 203" d="M4057.28-1366.683h-5.286a1.364,1.364,0,0,1-1.365-1.364v-5.287Z" transform="translate(-4034.338 1373.333)" fill="#0eaada" stroke="#f7f8fc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Groupe_125" data-name="Groupe 125" transform="translate(5 9.167)">
+        <path id="Tracé_204" data-name="Tracé 204" d="M515.025,11614.639a5.759,5.759,0,0,0-1.715.984l-1.315-.757-1.8,3.119,1.309.757a5.259,5.259,0,0,0,0,1.973l-1.31.756,1.8,3.119,1.319-.755a5.774,5.774,0,0,0,1.715.982v1.515h3.6v-1.515a5.7,5.7,0,0,0,1.7-.982l1.307.755,1.8-3.119-1.312-.756a5.541,5.541,0,0,0,.093-.986,5.465,5.465,0,0,0-.094-.986l1.311-.757-1.8-3.119-1.3.757a5.687,5.687,0,0,0-1.7-.984V11613h-3.6Z" transform="translate(-510.19 -11612.999)" fill="none" stroke="#f7f8fc" stroke-linecap="round" stroke-width="1"/>
+        <circle id="Ellipse_18" data-name="Ellipse 18" cx="2.381" cy="2.381" r="2.381" transform="translate(4.239 4.348)" fill="none" stroke="#f7f8fc" stroke-linecap="round" stroke-width="1"/>
+      </g>
+    </g>
+  </g>
+</svg>

diff --git a/public/_modules/product-onglet/img/icon-file.svg b/public/_modules/product-onglet/img/icon-file.svg
new file mode 100644 (file)
index 0000000..6309327
--- /dev/null
+++ b/public/_modules/product-onglet/img/icon-file.svg
@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23.944" height="31" viewBox="0 0 23.944 31">
+  <g id="Groupe_129" data-name="Groupe 129" transform="translate(-126.5 -1244.5)">
+    <g id="Groupe_127" data-name="Groupe 127" transform="translate(127 1244.999)">
+      <g id="Groupe_123" data-name="Groupe 123" transform="translate(0)">
+        <path id="Tracé_199" data-name="Tracé 199" d="M3845.179-1343.333h-20.215a1.365,1.365,0,0,1-1.365-1.364v-27.272a1.365,1.365,0,0,1,1.365-1.364h14.928l6.652,6.651v21.985A1.364,1.364,0,0,1,3845.179-1343.333Z" transform="translate(-3823.6 1373.333)" fill="#0eaada" stroke="#f7f8fc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+        <path id="Tracé_200" data-name="Tracé 200" d="M3897.947-1366.683h-5.287a1.364,1.364,0,0,1-1.364-1.364v-5.286Z" transform="translate(-3875.003 1373.333)" fill="#0eaada" stroke="#f7f8fc" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+      <g id="Groupe_117" data-name="Groupe 117" transform="translate(3.334 8.334)">
+        <g id="Rectangle_472" data-name="Rectangle 472" transform="translate(0.126 0)" fill="none" stroke="#f7f8fc" stroke-linecap="square" stroke-width="1">
+          <rect width="7.008" height="7.007" stroke="none"/>
+          <rect x="0.5" y="0.5" width="6.008" height="6.007" fill="none"/>
+        </g>
+        <line id="Ligne_136" data-name="Ligne 136" x2="5.785" transform="translate(10.181 2.666)" fill="none" stroke="#f7f8fc" stroke-linejoin="round" stroke-width="1"/>
+        <line id="Ligne_137" data-name="Ligne 137" x2="15.841" transform="translate(0.126 10.031)" fill="none" stroke="#f7f8fc" stroke-linejoin="round" stroke-width="1"/>
+        <path id="Tracé_201" data-name="Tracé 201" d="M0,0H10.048" transform="translate(0 13.395)" fill="#0eaada" stroke="#f7f8fc" stroke-width="1"/>
+        <line id="Ligne_140" data-name="Ligne 140" x2="5.718" transform="translate(10.181 6.374)" fill="none" stroke="#f7f8fc" stroke-linejoin="round" stroke-width="1"/>
+      </g>
+    </g>
+  </g>
+</svg>

diff --git a/public/_modules/product-onglet/index.html b/public/_modules/product-onglet/index.html
new file mode 100644 (file)
index 0000000..f429820
--- /dev/null
+++ b/public/_modules/product-onglet/index.html
@@ -0,0 +1,125 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="../../css/app.css">
+    <link href="https://fonts.googleapis.com/css?family=Barlow:500|Muli&display=swap" rel="stylesheet">
+    <title>pmi</title>
+</head>
+<body>
+
+<div id="product-detail">
+    <ul class="flex">
+        <li data-nav="0" class="product-nav active-nav">Description</li>
+        <li data-nav="1" class="product-nav">Spécifications</li>
+        <li data-nav="2" class="product-nav">Documents</li>
+        <li data-nav="3" class="product-nav">Options</li>
+        <li data-nav="4" class="product-nav">Accessoires</li>
+    </ul>
+    <div class="content">
+
+        <div data-content="0"  class="content-item description ">
+            <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,
+                malesuada ullamcorper lectus. Quisque sit amet libero pharetra, pulvinar lectus non, tempor velit.
+                Integer quis lorem ut metus aliquet luctus ut nec orci. Lorem ipsum dolor sit amet, consectetur
+                adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vehicula, mi eu
+                semper elementum, erat turpis viverra justo, rhoncus egestas nisi nunc non odio.
+                Nam pretium consectetur ex, eget ultricies mauris varius vel. Aliquam luctus augue mattis,
+                efficitur ante quis, sollicitudin elit. Sed vel dui laoreet, sagittis nisl at, ultrices libero.
+                Duis nec tincidunt ligula. Curabitur elementum augue vel ligula molestie tincidunt. Sed lacus lorem,
+                convallis facilisis turpis sed, luctus lacinia tellus. Phasellus venenatis auctor enim, non maximus
+                dui tristique sed. Phasellus ac vulputate dui. Donec consequat, tellus eget viverra facilisis,
+                leo purus luctus massa, ac sollicitudin mauris magna a erat.
+            </p>
+        </div>
+
+        <div data-content="1" class="content-item 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>
+            </ul>
+        </div>
+
+        <div data-content="2" class="content-item document hidden">
+            <ul class="text-grey-dark">
+                <li class="flex items-center ">
+                    <img class="mr-4 mb-2" src="img/icon-file.svg" alt="">
+                    Etendue de mesure (kN)
+                </li>
+                <li class="flex items-center ">
+                    <img class="mr-4 mb-2" src="img/icon-file-2.svg" alt="">
+                    Précision (erreur totale)
+                </li>
+                <li class="flex items-center ">
+                    <img class="mr-4 mb-2" src="img/icon-file.svg" alt="">
+                    Non-linéarité, % PE
+                </li>
+                <li class="flex items-center ">
+                    <img class="mr-4" src="img/icon-file-2.svg" alt="">
+                    Hystérésis, % PE
+                </li>
+            </ul>
+        </div>
+
+        <div data-content="3" class="content-item option hidden">
+            <ul class="text-grey-dark">
+                <li class="option-item">Option 1</li>
+                <li class="option-item">Option 2</li>
+                <li class="option-item">Option 3</li>
+                <li class="option-item">Option 4</li>
+                <li class="option-item">Option 5</li>
+                <li class="option-item">Option 6</li>
+                <li class="option-item">Option 7</li>
+                <li class="option-item">Option 8</li>
+                <li class="option-item">Option 9</li>
+                <li class="option-item">Option 10</li>
+            </ul>
+        </div>
+
+        <div data-content="4" class="content-item accessoire hidden">
+            <ul class="text-grey-dark">
+                <li class="accessoire-item">Accessoire 1</li>
+                <li class="accessoire-item">Accessoire 2</li>
+                <li class="accessoire-item">Accessoire 3</li>
+                <li class="accessoire-item">Accessoire 4</li>
+                <li class="accessoire-item">Accessoire 5</li>
+                <li class="accessoire-item">Accessoire 6</li>
+                <li class="accessoire-item">Accessoire 7</li>
+                <li class="accessoire-item">Accessoire 8</li>
+                <li class="accessoire-item">Accessoire 9</li>
+                <li class="accessoire-item">Accessoire 10</li>
+            </ul>
+        </div>
+
+    </div>
+</div>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
+<script src="product.js"></script>
+</body>
+</html>
\ No newline at end of file

diff --git a/public/_modules/product-onglet/product.js b/public/_modules/product-onglet/product.js
new file mode 100644 (file)
index 0000000..06f9d0e
--- /dev/null
+++ b/public/_modules/product-onglet/product.js
@@ -0,0 +1,19 @@
+// jshint ignore: start
+
+$('.product-nav').each(function () {
+
+   $(this).on('click',function () {
+       let that = $(this);
+       // alert(that.data('nav'));
+
+       // TODO nav on click add class and remove class (last item clicked)
+       $('.content-item').each(function () {
+           if($(this).data('content') === that.data('nav')){
+
+               $(this).next().removeClass('active-content');
+               $(this).addClass('active-content');
+
+           }
+       })
+   })
+});

diff --git a/public/_modules/product-onglet/style.styl b/public/_modules/product-onglet/style.styl
new file mode 100644 (file)
index 0000000..efee1e4
--- /dev/null
+++ b/public/_modules/product-onglet/style.styl
@@ -0,0 +1,59 @@
+$h3 = 24px
+$barlow = 'Barlow', sans-serif
+$muli = 'Muli', sans-serif
+$dark = #6B7287
+$lightgrey = #F7F8FC
+$darkblue = #152F4E
+
+*
+  padding: 0
+  box-sizing: border-box
+  margin: 0
+  font-family: $muli
+
+#product-detail
+  .content
+    max-width 1536px
+    padding 55px 0 48px 48px
+    background $lightgrey
+  .product-nav
+    padding : 25px 50px
+    font-family $barlow
+    font-size: 18px
+    color: $darkblue
+    cursor pointer
+  .active-nav
+    background $lightgrey
+  .description
+    &-title
+      font-family: $barlow
+      font-size: 18px
+    &-paragraph
+      max-width 970px
+      margin-top: 1.45em
+  .specification
+    &-info
+      width: 314px
+      margin-right: 5.125em
+  .option
+    &-item
+      &::after
+        content: ''
+        display block
+        width: 4px
+        height: 1px
+        position relative
+        background $dark
+        top: -12px;
+        left: -7px;
+  .accessoire
+    &-item
+      &::after
+        content: ''
+        display block
+        width: 4px
+        height: 1px
+        position relative
+        background $dark
+        top: -12px;
+        left: -7px;
\ No newline at end of file