]> _ Git - pmi.git/commitdiff
projects / pmi.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 1788f9f)
wip #2811 @6
authornael <nael@cubedesigners.com>
Mon, 3 Jun 2019 15:06:47 +0000 (17:06 +0200)
committernael <nael@cubedesigners.com>
Mon, 3 Jun 2019 15:06:47 +0000 (17:06 +0200)
public/_modules/product-onglet/index.html patch | blob | history
public/_modules/product-onglet/product.js patch | blob | history
public/_modules/product-onglet/style.styl patch | blob | history

diff --git a/public/_modules/product-onglet/index.html b/public/_modules/product-onglet/index.html
index f4298208cce7bf375c9a09ae521443cc39becd26..698000295914b45fcb6f781f1790f8ecf4547fff 100644 (file)
--- a/public/_modules/product-onglet/index.html
+++ b/public/_modules/product-onglet/index.html
@@ -13,16 +13,134 @@
 <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 class="flex product-nav">
+        <li data-nav="0" class="product-nav-item active-nav">
+            <div class="section-title justify-between items-center">
+                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">
+                <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>
+
+        </li>
+        <li data-nav="1" class="product-nav-item">
+            <div 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>
+                </ul>
+            </div>
+
+        </li>
+        <li data-nav="2" class="product-nav-item">
+            <div 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">
+                <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>
+        </li>
+        <li data-nav="3" class="product-nav-item">
+            <div 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">
+                <ul class="text-grey-dark">
+                    <li class="option-item mt-6">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>
+                    <li class="option-item mt-6">Option 5</li>
+                    <li class="option-item mt-6">Option 6</li>
+                    <li class="option-item mt-6">Option 7</li>
+                    <li class="option-item mt-6">Option 8</li>
+                    <li class="option-item mt-6">Option 9</li>
+                    <li class="option-item mt-6">Option 10</li>
+                </ul>
+            </div>
+        </li>
+        <li data-nav="4" class="product-nav-item">
+            <div 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">
+                <ul class="text-grey-dark">
+                    <li class="accessoire-item mt-6">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>
+                    <li class="accessoire-item mt-6">Accessoire 5</li>
+                    <li class="accessoire-item mt-6">Accessoire 6</li>
+                    <li class="accessoire-item mt-6">Accessoire 7</li>
+                    <li class="accessoire-item mt-6">Accessoire 8</li>
+                    <li class="accessoire-item mt-6">Accessoire 9</li>
+                    <li class="accessoire-item mt-6">Accessoire 10</li>
+                </ul>
+            </div>
+        </li>
     </ul>
-    <div class="content">
 
-        <div data-content="0"  class="content-item description ">
+    <div class="content">
+        <div data-content="0"  class="content-item flex flex-col 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,
@@ -72,15 +190,15 @@
                     <img class="mr-4 mb-2" src="img/icon-file.svg" alt="">
                     Etendue de mesure (kN)
                 </li>
-                <li class="flex items-center ">
+                <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 ">
+                <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 ">
+                <li class="flex items-center">
                     <img class="mr-4" src="img/icon-file-2.svg" alt="">
                     Hystérésis, % PE
                 </li>
@@ -89,34 +207,33 @@
 
         <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>
+                <li class="option-item mt-6">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>
+                <li class="option-item mt-6">Option 5</li>
+                <li class="option-item mt-6">Option 6</li>
+                <li class="option-item mt-6">Option 7</li>
+                <li class="option-item mt-6">Option 8</li>
+                <li class="option-item mt-6">Option 9</li>
+                <li class="option-item mt-6">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>
+                <li class="accessoire-item mt-6">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>
+                <li class="accessoire-item mt-6">Accessoire 5</li>
+                <li class="accessoire-item mt-6">Accessoire 6</li>
+                <li class="accessoire-item mt-6">Accessoire 7</li>
+                <li class="accessoire-item mt-6">Accessoire 8</li>
+                <li class="accessoire-item mt-6">Accessoire 9</li>
+                <li class="accessoire-item mt-6">Accessoire 10</li>
             </ul>
         </div>
-
     </div>
 </div>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
diff --git a/public/_modules/product-onglet/product.js b/public/_modules/product-onglet/product.js
index 06f9d0e122350af9fe9a4c0e2166c89241f30af9..f1957962f7ddd73b5c32373720f4b6d6586bf6b9 100644 (file)
--- a/public/_modules/product-onglet/product.js
+++ b/public/_modules/product-onglet/product.js
@@ -1,19 +1,23 @@
 // jshint ignore: start
 
-$('.product-nav').each(function () {
-
+$('.product-nav-item').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');
-
+               $(this).addClass('active-content').siblings().removeClass('active-content').addClass('hidden');
+               that.addClass('active-nav').siblings().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');
+               }
+           })
+       }
    })
 });
diff --git a/public/_modules/product-onglet/style.styl b/public/_modules/product-onglet/style.styl
index efee1e40ad91da26e6be1da5f8ed621d463f24a3..1b7ba26d0c08d09a81080bd86643b57a84b7be3a 100644 (file)
--- a/public/_modules/product-onglet/style.styl
+++ b/public/_modules/product-onglet/style.styl
@@ -7,23 +7,54 @@ $darkblue = #152F4E
 
 *
   padding: 0
-  box-sizing: border-box
+  box-sizing: border-box !important
   margin: 0
   font-family: $muli
 
 #product-detail
   .content
+    @media (max-width 940px)
+      display none
     max-width 1536px
-    padding 55px 0 48px 48px
+    padding 55px 48px 48px 48px
     background $lightgrey
   .product-nav
-    padding : 25px 50px
+    @media (max-width 940px)
+      flex-direction column
+    &-item
+      padding : 25px 50px
+      font-family $barlow
+      font-size: 18px
+      color: $darkblue
+      cursor pointer
+      position: relative
+      transition 400ms all ease
+      @media (max-width 940px)
+        &::after
+          content ''
+          background #E7E9F3
+          left 48px
+          right 48px
+          bottom 0
+          position absolute
+          height 1px
+    &-arrow
+      position: absolute
+      right 48px
+      display flex
+      transition 400ms all ease
+      @media (min-width 940px)
+        display none
+  .section-title
+    display flex
     font-family $barlow
-    font-size: 18px
-    color: $darkblue
-    cursor pointer
+  .responsive-content
+    @media (min-width 940px)
+      display none !important
   .active-nav
     background $lightgrey
+    @media (max-width 940px)
+      background white
   .description
     &-title
       font-family: $barlow
@@ -56,4 +87,9 @@ $darkblue = #152F4E
         position relative
         background $dark
         top: -12px;
-        left: -7px;
\ No newline at end of file
+        left: -7px;
+  .active-content
+    display flex
+  .rotate
+    transform: rotate(180deg)
+    transition 400ms all ease
\ No newline at end of file
Unnamed repository; edit this file 'description' to name the repository.