From c651fc5cb74e5c66b3c2ac0585434ee33479d4de Mon Sep 17 00:00:00 2001
From: TheYoungManLi <cjl@kubesphere.io>
Date: Mon, 28 Feb 2022 15:21:54 +0800
Subject: [PATCH] fix: Update styles for user group page

Signed-off-by: TheYoungManLi <cjl@kubesphere.io>
---
 assets/scss/user-group-single.scss |  1 +
 assets/scss/user-group.scss        |  2 ++
 content/zh/user-group/_index.md    | 34 +++++++++++++++++--
 layouts/user-group/list.html       | 53 +++++++++++++++++++++---------
 4 files changed, 71 insertions(+), 19 deletions(-)

diff --git a/assets/scss/user-group-single.scss b/assets/scss/user-group-single.scss
index 1d8fa2b91..d4743631e 100644
--- a/assets/scss/user-group-single.scss
+++ b/assets/scss/user-group-single.scss
@@ -29,6 +29,7 @@
     width: 48px;
     height: 48px;
     margin-right: 12px;
+    border-radius: 50%;
   }
 
   .top {
diff --git a/assets/scss/user-group.scss b/assets/scss/user-group.scss
index 1d7faaf11..68c88838f 100644
--- a/assets/scss/user-group.scss
+++ b/assets/scss/user-group.scss
@@ -639,6 +639,7 @@
 
         span {
           display: block;
+          line-height: 32px;
         }
 
         a {
@@ -697,6 +698,7 @@
 
       span {
         display: block;
+        line-height: 32px;
       }
 
       a {
diff --git a/content/zh/user-group/_index.md b/content/zh/user-group/_index.md
index bf6fc0b33..66eaef8bf 100644
--- a/content/zh/user-group/_index.md
+++ b/content/zh/user-group/_index.md
@@ -36,17 +36,45 @@ applyNew:
 
   conditions: 
     text: 成立条件
-    description: 要成立的城市站至少要有一名近半年内在 KubeSphere 社区中活跃的成员作为站长发起；当地能够组织起来小规模（20 人以上）的技术交流活动（KubeSphere 相关）；至少由 Advocacy and Outreach SIG 中的一位 Lead 和两位 Member 通过。
+    description: 
+      - head: 1.要成立的城市站至少要有一名近半年内在 KubeSphere 社区中活跃的成员作为站长发起。
+        link:
+          text: 
+          link_address:
+        tail: 
+      
+      - head: 2.当地能够组织起来小规模（20 人以上）的技术交流活动（KubeSphere 相关）。
+      
+      - head: 3.至少由 Advocacy and Outreach SIG 中的一位 Lead 和两位 Member 通过。
     image: /images/user-group/list/applyNew/condition.svg
 
   apply:
     text: 申请方式
-    applyLink: https://github.com/kubesphere/community/issues/new?assignees=&labels=area%2Fuser-group&template=new_leader.yml&title=REQUEST%3A+New+leader+for+a+User+Group+in+new+city
+    des:
+      head: 站长向社区
+      link:
+        text: 提交申请
+        link_address: https://github.com/kubesphere/community/issues/new?assignees=&labels=area%2Fuser-group&template=new_leader.yml&title=REQUEST%3A+New+leader+for+a+User+Group+in+new+city
+      tail: ，通过后即可成立。
     image: /images/user-group/list/applyNew/note.svg
 
   requirements:
     text: 要求
-    applyLink: https://github.com/kubesphere/community/issues
+    des:
+      - head: 1.站长需要保证所在城市内，每年至少组织一场线下活动（出现疫情等特殊情况例外）。
+        link:
+          text: 
+          link_address:
+        tail: 
+      
+      - head: 2.如果站长由于某个原因临时、或者长期无法于所在城市组织线下活动，需要向社区
+        link:
+          text: 提交申请
+          link_address: https://github.com/kubesphere/community/issues
+        tail: 推荐新的站长，或请求社区推荐新的站长。如果最终无人能组织活动，城市站设置为不活跃状态，直到有新的活跃成员出现。
+
+      - head: 3. 如果 Advocacy and Outreach SIG 例会上有关于某个城市站的议题，该城市站需要至少一位成员参与。 
+
     image: /images/user-group/list/applyNew/requirements.svg
 
 returns:
diff --git a/layouts/user-group/list.html b/layouts/user-group/list.html
index 0353a8842..6b8bf0a76 100644
--- a/layouts/user-group/list.html
+++ b/layouts/user-group/list.html
@@ -67,7 +67,9 @@
       <div class="left">
         <div class="textBox">
           <div class="title">{{ .name }}</div>
-          <image src="{{ .githubIcon }}" class="orgIcon"></image>
+          <a href="{{ .githublink }}" target="_blank">
+            <image src="{{ .githubIcon }}" class="orgIcon"></image>
+          </a>
         </div>
         <div class="des"> {{ .description }}</div>
       </div>
@@ -105,7 +107,13 @@
           <image class="icon" src="{{ .image }}"></image>
           <div class="text">
             <span class="title">{{ .text }}</span>
-            <span class="des">{{ .description }}</span>
+            <span class="des">
+              {{ range .description }}
+                <span>
+                  {{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
+                </span>
+              {{ end }}
+            </span>
           </div>
         </div>
         <div class="m-condition">
@@ -113,7 +121,13 @@
             <image class="icon" src="{{ .image }}"></image>
             <span class="title">{{ .text }}</span>
           </div>
-          <span class="des">{{ .description }}</span>
+          <span class="des">
+            {{ range .description }}
+              <span>
+                {{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
+              </span>
+            {{ end }}
+          </span>
         </div>
       {{ end }}
 
@@ -122,9 +136,11 @@
           <image class="icon" src="{{ .image }}"></image>
           <div class="text">
             <span class="title">{{ .text }}</span>
-            <span class="des">
-              站长向社区 <a target="_blank" href="{{ .applyLink }}">提交申请</a>，通过后即可成立。
-            </span>
+            {{ with .des }}
+              <span class="des">
+                {{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
+              </span>
+            {{ end }}
           </div>
         </div>
 
@@ -134,9 +150,11 @@
             <span class="title">{{ .text }}</span>
 
           </div>
-          <span class="des">
-            站长向社区 <a target="_blank" href="{{ .applyLink }}">提交申请</a>，通后即可成立。
-          </span>
+          {{ with .des }}
+            <span class="des">
+              {{ .head }} <a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{ .tail }}
+            </span>
+          {{ end }}
         </div>
       {{ end }}
 
@@ -146,10 +164,11 @@
           <div class="text">
             <span class="title">{{ .text }}</span>
             <span class="des" style="line-height: 32px;">
-              <span>1.站长需要保证所在城市内，每年至少组织一场线下活动（出现疫情等特殊情况例外）。</span>
-              <span>2.如果站长由于某个原因临时、或者长期无法于所在城市组织线下活动，需要向社区 <a target="_blank" href="{{ .applyLink }}">提交申请</a> 推荐新的站长，或请求社区推荐新的站长。如果最终无人能组织活动，城市站设置为不活跃状态，直到有新的活跃成员出现。
-              <span>3. 如果 Advocacy and Outreach SIG 例会上有关于某个城市站的议题，该城市站需要至少一位成员参与。</span>
-              </span>
+              {{ range .des }}
+                <span>
+                  {{ .head }}<a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{.tail}}
+                </span>
+              {{ end }}
             </span>
           </div>
         </div>
@@ -160,9 +179,11 @@
             <span class="title">{{ .text }}</span>
           </div>
           <ol class="des" style="line-height: 32px;">
-            <li>1. 站长需要保证所在城市内，每年至少组织一场线下活动（出现疫情等特殊情况外）。</li>
-            <li>2. 如果站长由于某个原因临时、或者长期无法于所在城市组织线下活动，需要向社区 <a target="_blank" href="{{ .applyLink }}">提交申请</a> 推荐新的长，或求社区推荐新的站长。如果最终无人能组织活动，城市站设置为不活跃状态，直有新的活跃员出现。
-            </li>
+            {{ range .des }}
+              <li>
+                {{ .head }}<a target="_blank" href="{{ .link.link_address }}">{{ .link.text }}</a>{{.tail}}
+              </li>
+              {{ end }}
           </ol>
         </div>
       {{ end }}