feat(pages): 增加了排序的描述。 (#221)

hust-open-atom-club · Sep 9, 2024 · 04fb28a · 04fb28a
1 parent 5a568c1
commit 04fb28a
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/pages/src/config.ts b/pages/src/config.ts
@@ -45,8 +45,9 @@ export const RANK_LIST: {
   hideInTab?: boolean;
   color?: string;
   weight: number;
+  description?: string;
 }[] = [
-    { status: "all", text: "总榜", tabText: "总榜", color: "bg-yellow-500", weight: 0},
+    { status: "all", text: "总榜", tabText: "总榜", color: "bg-yellow-500", weight: 0, description: "排序公式：选题数目*0.5 + 翻译数目*1.0+校对数目*1.0+发布数目*0.8" },
     { status: "translator", text: "翻译", tabText: "翻译王者", color: "bg-green-500", weight: 1 },
     { status: "proofreader", text: "校验", tabText: "校验大佬", color: "bg-purple-500" , weight: 1},
     { status: "collector", text: "选题", tabText: "用心选题", color: "bg-red-500" , weight: 0.5},

diff --git a/pages/src/layouts/RankLayout.astro b/pages/src/layouts/RankLayout.astro
@@ -154,6 +154,28 @@ async function getAllAvatar() {
       flex-grow: 1;
       max-width: 100%;
     }
+
+    .icon-container {
+      position: relative;
+      display: inline-block;
+    }
+
+    .description {
+      display: none;
+      position: absolute;
+      top: 25px;
+      left: 0;
+      background-color: #333;
+      color: #fff;
+      padding: 5px;
+      border-radius: 3px;
+      white-space: nowrap;
+    }
+
+    .icon-container:hover .description,
+    .icon-container.active .description {
+      display: block;
+    }
   </style>
   <script>
     // Get the avatar by Github API 'https://api.github.com/search/users?q='
@@ -185,10 +207,22 @@ async function getAllAvatar() {
   </script>
   <div id="content-container">
   <main id="main-content" class="mt-8 grid grid-cols-2 gap-8">
-    {RANK_LIST.map(({ status, tabText }) => (
+    {RANK_LIST.map(({ status, tabText, description }) => (
       <section id={status} class="mb-8 max-w-md prose-img:border-0">
         <div class="border rounded-md shadow-md p-4">
-          <h2 class="text-xl font-bold mb-4">{tabText}</h2>
+          <h2 class="text-xl font-bold mb-4">{tabText}{
+            description ? (
+              // icon for description (?)
+              // <span class="text-sm text-gray-500"> - {description}</span>
+              // Add icon, show the description when the icon is hovered
+              <div class="icon-container">
+                &nbsp;<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block info-icon" viewBox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm0-2a6 6 0 100-12 6 6 0 000 12zm0-10a1 1 0 100 2 1 1 0 000-2zm0 3a1 1 0 011 1v5a1 1 0 11-2 0V9a1 1 0 011-1z" clip-rule="evenodd" />
+                </svg>
+                <div class="description">{description}</div>
+              </div>
+            ) : null
+          }</h2>
           <ol>
             {status != "all" ? (
               rankResult.get(status).map(([name, feature]: [string, { avatar: string, count: number }], index: number) => (