update index-designer

css/list-style-mb.css

@@ -796,4 +796,12 @@ a {
 #pills-video .card__bgImg, #pills-columns .card__bgImg {
   height: 215px;
 }
+
+#pills-intro .work__row .col-6:nth-of-type(2n+1) {
+  margin-top: -1rem;
+}
+
+#pills-intro .work__row .col-6:nth-of-type(2) {
+  margin-top: .5rem;
+}
 /*# sourceMappingURL=list-style-mb.css.map */

css/list-style-mb.scss

@@ -668,4 +668,15 @@ a {
 
 #pills-video .card__bgImg, #pills-columns .card__bgImg {
     height: 215px;
+}
+
+#pills-intro {
+    .work__row  {
+        .col-6:nth-of-type(2n+1) {
+            margin-top: -1rem;
+        }
+        .col-6:nth-of-type(2) {
+            margin-top: .5rem;
+        }
+    }
 }

css/list-style.css

@@ -711,6 +711,12 @@ a {
   background-color: transparent;
   font-size: .9rem;
   color: #727679;
+  -webkit-transition: all .3s;
+  transition: all .3s;
+}
+
+.infoContent .nav-item-link:hover {
+  color: #EE7800;
 }
 
 .infoContent .nav-item-link.active {
@@ -784,6 +790,10 @@ a {
   margin: 0 0.2rem 0 0;
 }
 
+.infoContent .card__tag:hover {
+  color: #EE7800;
+}
+
 .infoContent .company__block {
   margin: 0 0 2rem;
 }
@@ -1061,4 +1071,20 @@ a {
 .like {
   display: none;
 }
+
+#pills-intro .work__row .col-md-4:nth-of-type(3n-1) {
+  margin-top: .5rem;
+}
+
+#pills-intro .work__row .col-md-4:nth-of-type(3n) {
+  margin-top: -1rem;
+}
+
+#pills-intro .work__row .col-md-4:nth-of-type(3n+1) {
+  margin-top: -1rem;
+}
+
+#pills-intro .work__row .col-md-4:nth-of-type(2) {
+  margin-top: .5rem;
+}
 /*# sourceMappingURL=list-style.css.map */

css/list-style.scss

@@ -567,6 +567,10 @@ a {
             background-color: transparent;
             font-size: .9rem;
             color: #727679;
+            transition: all .3s;
+            &:hover {
+                color: #EE7800;
+            }
             &.active {
                 color: #EE7800;
                 border-bottom: 2px solid #EE7800;
@@ -623,6 +627,9 @@ a {
         }
         &__tag {
             margin: 0 0.2rem 0 0;
+            &:hover {
+                color: #EE7800;
+            }
         }
     }
     .company {
@@ -829,4 +836,21 @@ a {
 
 .like {
     display: none;
+}
+
+#pills-intro {
+    .work__row  {
+        .col-md-4:nth-of-type(3n-1) {
+            margin-top: .5rem;
+        }
+        .col-md-4:nth-of-type(3n) {
+            margin-top: -1rem;
+        }
+        .col-md-4:nth-of-type(3n+1) {
+            margin-top: -1rem;
+        }
+        .col-md-4:nth-of-type(2) {
+            margin-top: .5rem;
+        }
+    }
 }

index_designerList_mb.html

@@ -255,24 +255,24 @@
                         </div>
                       </aside>
                     </div>
+                    <section class="scMedia">
+                      <a href="">
+                        <img src="https://hhh.com.tw/assets/images/rv_web/fb.svg" alt="">
+                      </a>
+                      <a href="">
+                        <img src="https://hhh.com.tw/assets/images/rv_web/line.svg" alt="">
+                      </a>
+                      <a href="">
+                        <img src="https://hhh.com.tw/assets/images/rv_web/wechat.svg" alt="">
+                      </a>
+                      <a href="">
+                        <img src="https://hhh.com.tw/assets/images/rv_web/share.svg" alt="">
+                      </a>
+                      <a href="">
+                        <img src="https://hhh.com.tw/assets/images/rv_web/like-o.svg" alt="">
+                      </a>
+                    </section>
                   </div>
-                  <section class="scMedia">
-                    <a href="">
-                      <img src="https://hhh.com.tw/assets/images/rv_web/fb.svg" alt="">
-                    </a>
-                    <a href="">
-                      <img src="https://hhh.com.tw/assets/images/rv_web/line.svg" alt="">
-                    </a>
-                    <a href="">
-                      <img src="https://hhh.com.tw/assets/images/rv_web/wechat.svg" alt="">
-                    </a>
-                    <a href="">
-                      <img src="https://hhh.com.tw/assets/images/rv_web/share.svg" alt="">
-                    </a>
-                    <a href="">
-                      <img src="https://hhh.com.tw/assets/images/rv_web/like-o.svg" alt="">
-                    </a>
-                  </section>
             </div>
           </div>
         </div>

js/index-designer.js

@@ -32,6 +32,21 @@ function getQuery() {
 
 getQuery();
 
+// group data
+function group(data) {
+    var result = [];
+    var groupItem;
+    for (var i = 0; i < data.length; i++ ) {
+        if (i % 18 == 0) {
+            groupItem != null && result.push(groupItem);
+            groupItem = [];
+        }
+        groupItem.push(data[i]);
+    }
+    result.push(groupItem);
+    return result;
+}
+
 // pagination variables
 let num_per_page = 9;
 let n = 0;
@@ -68,16 +83,28 @@ window.onload = function(){
     }).done(function (msg) {
         designer = [...msg][id];
         console.log(designer)
-        designer['Content'][0]['Carddata'].sort(function (a, b){
-            return a[filter] > b[filter]? -1:1;
-        })
+        if(filter == 'views'){
+            designer['Content'][0]['Carddata'].sort(function (a, b){
+                return a[filter] > b[filter]? -1:1;
+            })
+        } else {
+            designer['Content'][0]['Carddata'].sort(function (a, b){
+                return a[filter] > b[filter]? 1:-1;
+            })
+        }
+
+        for(let i = 0; i < designer['Content'].length; i++){
+            let testArr = group(designer['Content'][i]['Carddata']);
+            console.log(testArr);
+            
+        }
         console.log(designer['Content'][0]['Carddata']);
         renderinfoCard(designer);
         renderTab(designer['Content']);
         renderTabContent(designer['Content']);
-        $(window).scroll(function() {
-            loadMore(designer);
-        })
+        // $(window).scroll(function() {
+        //     loadMore(designer);
+        // })
     });
 }
   
@@ -183,7 +210,12 @@ function renderinfoCard(designer) {
                         <img src="${designer['scMedia'][i].img}" class="dislike" alt="">
                         <img src="https://hhh.com.tw/assets/images/rv_web/like.svg" class="like" alt="">
                     </span>`;
-        } else {
+        } else if (i === 3) {
+            mediaStr += `<span class="send">
+                            <img src="${designer['scMedia'][i].img}" alt="">
+                        </span>`;
+        }
+        else {
             mediaStr += `<a href="${designer['scMedia'][i].link}">
                         <img src="${designer['scMedia'][i].img}" alt="">
                     </a>`;
@@ -221,7 +253,7 @@ function renderTab(content) {
     let tabTitleStr = '';
     for(let i = 0;i < content.length; i ++) {
         if(i == 0) {
-            tabTitleStr += `<li class="nav-item p-0 active" role="presentation">
+            tabTitleStr += `<li class="nav-item p-0 " role="presentation">
                                 <a class="nav-item-link nav-item-active bg-transparent active" id="pills-${content[i]['Tabtag']}-tab"
                                 data-bs-toggle="pill" data-bs-target="#pills-${content[i]['Tabtag']}" type="button" role="tab"
                                 aria-controls="pills-${content[i]['Tabtag']}" aria-selected="false" data-link="https://hhh.com.tw/videos/lists/">${content[i]['Title']}</a>
@@ -238,6 +270,30 @@ function renderTab(content) {
     $('.pill-aside').html(tabTitleStr);
 }
 
+function renderCard(content, i = 0){
+    let cardData = '';
+    let data = content[i];
+    for(let j = 0;j < data.length; j ++) {
+        cardData += `<div class="col-md-4">
+                        <a href="" target="_blank">
+                        <div class="card">
+                            <div class="card__bgImg" style="background-image: url(${data[i]['imgURL']});">
+                            </div>
+                            <div class="card-body">
+                            <h5 class="card-title card__title mt-0">${data[i]['title']}</h5>
+                            <p class="card-text mb-0">
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                                <a href="" class="card__tag" target="_blank">混搭風</a>
+                            </p>
+                            </div>
+                        </div>
+                        </a>
+                    </div>`
+        $('#pills-intro .work__row').append(cardData);
+    }
+}
+
 
 function renderTabContent(content) {
     let tabStr = '';
@@ -264,7 +320,12 @@ function renderTabContent(content) {
                     </div>`
         
         } else {
-            for(let j = 0;j < (content[i].Carddata.length < num_per_page? content[i].Carddata.length: num_per_page); j ++) {
+            // for(let j = 0;j < (content[i].Carddata.length < num_per_page? content[i].Carddata.length: num_per_page); j ++) {
+            for(let j = 0;j < content[i].Carddata.length; j ++) {
+                let tagStr = '';
+                for(let k = 0;k < content[i].Carddata[j].tags.length; k ++) {
+                    tagStr += `<a href="${content[i].Carddata[j].tags[k]['link']}" class="card__tag" target="_blank">${content[i].Carddata[j].tags[k]['name']}</a>`
+                }
                 cardData += `<div class="col-md-4">
                                 <a href="" target="_blank">
                                 <div class="card">
@@ -273,9 +334,7 @@ function renderTabContent(content) {
                                     <div class="card-body">
                                     <h5 class="card-title card__title mt-0">${content[i].Carddata[j]['title']}</h5>
                                     <p class="card-text mb-0">
-                                        <a href="" class="card__tag" target="_blank">混搭風</a>
-                                        <a href="" class="card__tag" target="_blank">混搭風</a>
-                                        <a href="" class="card__tag" target="_blank">混搭風</a>
+                                        ${tagStr}
                                     </p>
                                     </div>
                                 </div>
@@ -288,8 +347,8 @@ function renderTabContent(content) {
                             ${cardData}
                         </div>
                     </div>`
-                    let key = content[i]['Tabtag'];
-                    totalPages[key] = content[i].Carddata.length;
+                    // let key = content[i]['Tabtag'];
+                    // totalPages[key] = content[i].Carddata.length;
         }
         
         
@@ -298,7 +357,7 @@ function renderTabContent(content) {
     console.log(totalPages);
     $('#pills-tabContent').html(tabStr);
     $('#pills-tabContent').append('<div style="padding: 40px;"></div>');
-    $('#pills-intro').addClass('active', 'show');
+    $('#pills-intro').addClass('active');
     $('#pills-intro').addClass('show');
     $('#pills-video .card__bgImg').append('<img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">')
     $('.infoContent .nav-item-link').click(checkTab);
@@ -313,6 +372,14 @@ function checkTab() {
     }
 }
 
+$(document).on("click","#pills-tab .nav-item-link",function() {
+    console.log($(this));
+    console.log($(this).attr('id'));
+    let className = $(this).attr('id');
+    $(`#pills-tab .nav-item-link`).removeClass('active');
+    $(`#${className}`).addClass('active');
+    $(`.pill-aside #${className}`).addClass('active');
+});
 
 let sticky = document.querySelector('.sec-00').offsetHeight;
 window.addEventListener('scroll', fixedOnScroll);
@@ -390,6 +457,7 @@ function loadMore(designer) {
                                     <a href="" target="_blank">
                                     <div class="card">
                                         <div class="card__bgImg" style="background-image: url(${d[j]['imgURL']});">
+                                            <img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">
                                         </div>
                                         <div class="card-body">
                                         <h5 class="card-title card__title mt-0">${d[j]['title']}</h5>

js/index-list-mb.js

@@ -68,7 +68,7 @@ window.onload = function(){
     console.log(designer['Content'][0]['Carddata']);
   });
 }
-let over = document.querySelector('.infoContent__navBlock').offsetTop+ 60;
+let over = document.querySelector('.infoContent__navBlock').offsetTop;
 
 function detectBrowser(agent){
   if(userAgent.match(/chrome|chromium|crios/i)){
@@ -264,7 +264,7 @@ function renderTabContent(content) {
   console.log(tabStr);
   //console.log(totalPages);
   $('#pills-tabContent').html(tabStr);
-  $('#pills-tabContent').append('<div style="padding: 40px;"></div>');
+  $('#pills-tabContent').append('<div style="padding: 60px;"></div>');
   $('#pills-intro').addClass('active');
   $('#pills-intro').addClass('show');
   $('#pills-video .card__bgImg').append('<img src="https://hhh.com.tw/assets/images/rv_web/play.svg" alt="" width="50" height="50">')

json/designers.json

@@ -53,7 +53,7 @@
         {"name": "Facebook","img": "https://hhh.com.tw/assets/images/rv_web/fb.svg", "link": "https://www.facebook.com/Sdesign2018"},
         {"name": "Line","img": "https://hhh.com.tw/assets/images/rv_web/line.svg", "link": "https://www.facebook.com/Sdesign2018"},
         {"name": "Wechat","img": "https://hhh.com.tw/assets/images/rv_web/wechat.svg", "link": "https://www.facebook.com/Sdesign2018"},
-        {"name": "email","img": "https://hhh.com.tw/assets/images/rv_web/share.svg", "link": "https://www.facebook.com/Sdesign2018"},
+        {"name": "email","img": "https://hhh.com.tw/assets/images/rv_web/share.svg", "link": ""},
         {"name": "Like","img": "https://hhh.com.tw/assets/images/rv_web/like-o.svg", "link": ""}
       ],
       "Content": [