fix: Update live and partner page

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

assets/scss/news.scss

@@ -197,4 +197,8 @@
     }
   }
 
+}
+
+.time{
+  margin-top: 0px !important;
 }

assets/scss/partner.scss

@@ -308,30 +308,63 @@
       text-align: center;
     }
 
+    #partner-group {
+      margin-top: 40px;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      padding: 20px;
+      border-radius: 5px;
+      box-shadow: 0 4px 16px 0 rgba(7, 42, 68, 0.1);
+      background-color: #ffffff;
+      gap: 10px 30px;
+
+      @media only screen and (max-width: $mobile-max-width) {
+        .li{
+          margin: 0px;
+        }
+      }
+
+      .li {
+        padding: 8px 16px;
+        border-radius: 20px;
+        height: 24px;
+        font-size: 16px;
+        line-height: 1.5;
+        color: #36435c;
+        cursor: pointer;
+        transition: all ease 0.2s;
+
+        &:hover {
+          box-shadow: 0 8px 16px 0 rgba(101, 193, 148, 0.2), 0 0 50px 0 rgba(101, 193, 148, 0.1);
+          background-color: #55bc8a;
+          color: #ffffff;
+        }
+      }
+
+      .active {
+        box-shadow: 0 8px 16px 0 rgba(101, 193, 148, 0.2), 0 0 50px 0 rgba(101, 193, 148, 0.1);
+        background-color: #55bc8a;
+        color: #ffffff;
+      }
+    }
+
     ul {
       margin-top: 20px;
       font-size: 0;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 20px;
 
       @media only screen and (max-width: $mobile-max-width) {
-        text-align: center;
-      }
-
-      li:nth-child(4n + 1) {
-        margin-left: 0;
-
-        @media only screen and (max-width: $mobile-max-width) {
-          margin: 20px 10px 0;
-        }
-
+        justify-content: center;
       }
 
       li {
         display: inline-block;
-        margin-left: 20px;
         position: relative;
         width: 274px;
         height: 200px;
-        margin-top: 20px;
         border-radius: 4px;
         box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.06), 0 8px 16px 0 rgba(36, 46, 66, 0.05);
         background-color: #ffffff;

content/en/partner/_index.md

@@ -87,7 +87,7 @@ section4:
       content: 'With the technical infrastructure it holds, Radore provides private and corporate data center services (Colocation, Dedicated Servers, Cloud Services, Web Hosting, CDN).'
 
     - icon: "images/partner/webank.jpg"
-      partnerType: "App provider"
+      partnerType: "App Provider"
       content: 'WeBank, The 1st digital bank in China and initiated by Tencent, offers wealth management and financing services through different online platforms.'
    
     - icon: "images/partner/cloudnative-community.jpg"
@@ -95,7 +95,7 @@ section4:
       content: 'Cloud Native Community is an neutral, cloud native end user community founded on May 12, 2020 by CNCF ambassadors and open source opinion leaders to promote cloud native technologies and build a developer ecosystem.'
 
     - icon: "images/partner/jihu.svg"
-      partnerType: "App provider"
+      partnerType: "App Provider"
       content: 'JiHu GitLab is an out-of-the-box, open DevOps platform built from the ground up as a single application for all stages of the DevOps lifecycle. This enables Product, Development, QA, Security, and Operations teams to work concurrently on the same project.'
 
     - icon: "images/partner/Cloudview-logo.png"
@@ -103,11 +103,11 @@ section4:
       content: 'Cloudview is a cloud computing platform that provides IaaS-PaaS-based flexible cloud services.'  
       
     - icon: "images/partner/logo-deepflow.png"
-      partnerType: "App provider"
+      partnerType: "App Provider"
       content: 'DeepFlow is a highly automated observability platform open sourced by YUNSHAN Network Inc. (opens new window). It is a full stack, full span and high-performance data engine built for cloud-native observability application developers. With new technologies such as eBPF, WASM and OpenTelemetry, DeepFlow innovatively implements core mechanisms such as AutoTracing, AutoMetrics, AutoTagging and SmartEncoding, helping developers to improve the automation level of code injection, reducing the maintanence complexity of the observability platform. With the programmability and open API of DeepFlow, developers can quickly integrate it into their observability stack.' 
 
     - icon: "images/partner/JuiceFS_logo.png"
-      partnerType: "App provider"
+      partnerType: "App Provider"
       content: 'JuiceFS is an open source, high-performance distributed file system designed for the cloud. It provides full POSIX compatibility, allowing almost all kinds of object storage to be used locally as massive local disks and to be mounted and read on different cross-platform and cross-region hosts at the same time.' 
 
     - icon: "images/partner/sofastack-logo.png"
@@ -115,6 +115,6 @@ section4:
       content: 'SOFAStack open source community is able to quickly build financial grade cloud native architecture, while refining best practices in multiple financial scenarios, with the following characteristics.First, the community profile is open, with a comprehensive open source community, neutral, compatible with the community and open source ecosystem, and SOFAStack actively working with other communities to build the ecosystem;Second, financial grade, including the components required to build financial grade cloud-native architecture, allowing users to focus more on business development, to meet the current and future needs of the user scenario, experienced the refinement of large-scale scenarios, especially the demanding financial scenarios;Third, cloud-native, based on SOFAStack can quickly build cloud-native microservices system, rapid development of more reliable, scalable, more easily maintained cloud-native applications.'
 
     - icon: "images/partner/crane.svg"
-      partnerType: "App provider"
+      partnerType: "App Provider"
       content: 'Crane is a FinOps Platform for Cloud Resource Analytics and Economics in Kubernetes clusters. The goal is not only help user to manage cloud cost easier but also ensure the quality of applications.' 
 ---

layouts/news/list.html

@@ -24,6 +24,7 @@
         <ul class='blogs-ul'>
             {{ range (.Data.Pages.ByParam "createTime").Reverse }}
             <li data-tag='{{ .Params.tag }}' class="news-div">
+                <p class="time">{{ .Params.createTime }}</p>
                 <h2>
                     <a href="{{ .RelPermalink }}" target="_blank" rel="noopener noreferrer">{{ .Params.title }}</a>
                 </h2>

layouts/partner/list.html

@@ -77,11 +77,24 @@
     {{ with .Params.section4 }}
     <div class="common-layout">
         <h2 class="title-black-h2">{{ .title }}</h2>
-        <ul class="partner-ul">
+        {{ $allType := slice }}
+        {{ range .featuredPartnerList }}
+            {{ $exist := in $allType .partnerType }}
+            {{ if not $exist }}
+                {{ $allType = $allType | append .partnerType }}
+            {{ end }}
+        {{ end }}
+        <div id="partner-group">
+            <div class="li active">{{ i18n "ALL" }}</div>
+            {{ range $allType }}
+            <div class="li" data-name="{{ . }}">{{ . }}</div>
+            {{ end }}
+        </div>
+
+        <ul class="partner-ul" id="partner-children">
             {{ range .featuredPartnerList }}
-                <li>
+                <li data-name="{{ .partnerType }}">
                     <img src="{{ .icon | relURL }}" alt="{{ .content }}">
-                    <div class='type'>{{ .partnerType }}</div>
                     <div class='content'>{{ .content }}</div>
                 </li>
             {{ end }}
@@ -89,4 +102,22 @@
     </div>
     {{ end }}
 </section>
+<script>
+    $('#partner-group div').click(function() {
+        $("#partner-group div").removeClass("active");
+        $(this).addClass("active");
+        var name = $(this).data("name")
+        if (name) {
+            $("#partner-children li").each(function(item) {
+                if ($(this).data("name") !== name) {
+                    $(this).hide()
+                } else {
+                    $(this).show()
+                }
+            })
+        } else {
+            $("#partner-children li").show()
+        }
+	})
+</script>
 {{ end }}