From 58d822a2d59d8d22e99d0e2420eeaa5d4b3d624b Mon Sep 17 00:00:00 2001
From: chenshihai <chenshh@pcl.ac.cn>
Date: Mon, 5 Dec 2022 15:43:50 +0800
Subject: [PATCH] repos square

---
 .../pages/repos/components/ReposList.vue      |  5 ++++
 .../pages/repos/components/SearchBar.vue      | 29 ++++++++++++-------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/web_src/vuepages/pages/repos/components/ReposList.vue b/web_src/vuepages/pages/repos/components/ReposList.vue
index ca52e2162..af2f140fa 100644
--- a/web_src/vuepages/pages/repos/components/ReposList.vue
+++ b/web_src/vuepages/pages/repos/components/ReposList.vue
@@ -97,6 +97,11 @@ export default {
 </script>
 
 <style scoped lang="less">
+.list-container {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
 .center {
   text-align: center;
 }
diff --git a/web_src/vuepages/pages/repos/components/SearchBar.vue b/web_src/vuepages/pages/repos/components/SearchBar.vue
index fa64a9a6d..50013e867 100644
--- a/web_src/vuepages/pages/repos/components/SearchBar.vue
+++ b/web_src/vuepages/pages/repos/components/SearchBar.vue
@@ -28,16 +28,19 @@
           <span style="margin-left:10px;">{{ $t('repos.search') }}</span>
         </div>
       </div>
-      <div class="_repo_search_label">
-        <a v-if="type == 'square'" :href="`/explore/repos?q=${searchInputValue.trim()}&topic=${item.v}&sort=${sort}`"
-          :style="{ backgroundColor: topicColors[index % topicColors.length] }" v-for="(item, index) in topics"
-          :key="index">{{ item.v }}</a>
-        <a v-if="type == 'search'" href="javascript:;" @click="changeTopic({ k: '', v: '' })"
-          style="color:#40485b;font-weight:bold;"
-          :style="{ backgroundColor: selectTopic == '' ? selectedColor : defaultColor }">{{ $t('repos.allFields') }}</a>
-        <a v-if="type == 'search'" href="javascript:;" @click="changeTopic(item)" style="color:#40485b;"
-          :style="{ backgroundColor: selectTopic.toLocaleLowerCase() == item.k ? selectedColor : defaultColor }"
-          v-for="(item, index) in topics" :key="index">{{ item.v }}</a>
+      <div class="_repo_search_label_c">
+        <div class="_repo_search_label">
+          <a v-if="type == 'square'" :href="`/explore/repos?q=${searchInputValue.trim()}&topic=${item.v}&sort=${sort}`"
+            :style="{ backgroundColor: topicColors[index % topicColors.length] }" v-for="(item, index) in topics"
+            :key="index">{{ item.v }}</a>
+          <a v-if="type == 'search'" href="javascript:;" @click="changeTopic({ k: '', v: '' })"
+            style="color:#40485b;font-weight:bold;"
+            :style="{ backgroundColor: selectTopic == '' ? selectedColor : defaultColor }">{{ $t('repos.allFields')
+            }}</a>
+          <a v-if="type == 'search'" href="javascript:;" @click="changeTopic(item)" style="color:#40485b;"
+            :style="{ backgroundColor: selectTopic.toLocaleLowerCase() == item.k ? selectedColor : defaultColor }"
+            v-for="(item, index) in topics" :key="index">{{ item.v }}</a>
+        </div>
       </div>
     </div>
   </div>
@@ -207,10 +210,16 @@ export default {
   cursor: pointer;
 }
 
+._repo_search_label_c {
+  display: flex;
+  justify-content: center;
+}
+
 ._repo_search_label {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
+  max-width: 1200px;
 }
 
 ._repo_search_label a {