feat: Support for expanding and collapsing course lists

Signed-off-by: TheYoungManLi <cjl@kubesphere.io>

assets/scss/learn.scss

@@ -252,7 +252,7 @@ h2 {
     margin-top: 68px;
     & > li {
       position: relative;
-      padding: 50px 39px 20px 40px;
+      padding: 50px 39px 40px 40px;
       margin-bottom: 58px;
       border-radius: 8px;
       background-color: #ffffff;
@@ -278,6 +278,10 @@ h2 {
           top: -20px;
           left: 30px;
           border-radius: 5px;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          max-width: 75%;
+          overflow: hidden;
         }
       }
 
@@ -373,6 +377,46 @@ h2 {
           }
         }
       }
+
+      .button{
+        position: absolute;
+        height: 48px;
+        width: 100%;
+        bottom: 0;
+        left: 0;
+        background: linear-gradient(360deg, rgba(85, 188, 138, 0.25) 0%, rgba(85, 188, 138, 0) 100%);
+        border: none;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 20px;
+        color: #0F8049;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+
+        #close{
+          display: none;
+        }
+      }
+
+      .hideButton{
+        display: none;
+      }
+
+      .active{
+        #open{
+          display: none;
+        }
+
+        #close{
+          display: block;
+        }
+
+        svg{
+          transform: rotateX(180deg);
+        }
+      }
     }
   }
 }

layouts/learn/list.html

@@ -22,7 +22,7 @@
             </ul>
         </div>
     </div>
-    
+
 </section>
 {{ end }}
 
@@ -78,7 +78,7 @@
         <h2>{{ .Params.section6.title }}</h2>
         <ul class="level">
             {{ range sort .Page.Sections "Weight" }}
-            <li>
+            <li class="tableLi">
                 <p class="title">{{ .LinkTitle }}</p>
                 <table>
                     <thead>
@@ -106,10 +106,20 @@
                             </td>
                         </tr>
                         {{ end }}
+                        <button class="button">
+                            <span id="open">展开更多&nbsp;</span>
+                            <span id="close">收起课程&nbsp;</span>
+                            <svg width="10" height="6" viewBox="0 0 10 6" fill="none"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M1.28373 0.333313L0.333374 1.28367L5.00004 5.95034L9.66671 1.28367L8.71635 0.333313L5.00004 4.04962L1.28373 0.333313Z"
+                                    fill="#0F8049" />
+                            </svg>
+                        </button>
                     </tbody>
                 </table>
             </li>
-            {{ end }} 
+            {{ end }}
         </ul>
     </div>
 </section>
@@ -129,7 +139,7 @@
                     <a href="{{ .link }}">{{ i18n "Apply for the job" }}</a>
                 </div>
             </li>
-            {{ end }} 
+            {{ end }}
         </ul>
         <div class="more">
             <a href="{{ .link }}">{{ i18n "View more jobs" }}</a>
@@ -210,8 +220,38 @@ var bindScrollEvent = function() {
     topActive()
   })
 }
+
+var tableInit = function () {
+    const tableLi = $('.tableLi')
+    tableLi.each((index,item)=>{
+        const eachLi = $(item)
+        const allTrLine = eachLi.find('table tbody')
+        dealWithTableBody(eachLi[0], allTrLine)
+    })
+}
+var dealWithTableBody = function (line, tbody) {
+    const positionLine = $(line)
+    const originBody = $(tbody).clone()
+    const button = positionLine.find('button')
+    if (tbody.children().length < 6) {
+        button.addClass('hideButton')
+    } else {
+        const allTR = tbody.children().slice(0, 5)
+        tbody.empty().append(allTR)
+    }
+    button.on('click', function () {
+        button.toggleClass('active')
+        if (tbody.children().length > 5) {
+            const allTR = tbody.children().slice(0, 5)
+            tbody.empty().append(allTR)
+        } else {
+            tbody.empty().append(originBody.clone().children())
+        }
+    })
+}
 bindScrollEvent()
 initScrollByHash()
 bindClickTopLink()
+tableInit()
 </script>
 {{ end }}