Merge pull request #159 from os-checker/home-header-center

chore: make header center or right aligned

Author: zjp-CN

Diff for: os-checks/pages/index.vue

@@ -49,13 +49,12 @@
       <Column frozen sortable field="pkg" header="Package" style="min-width: 200px;" />
 
       <Column v-if="C.display('last_commit_time')" sortable field="last_commit_time"
-        :header="C.name('last_commit_time')" style="text-align: center;" />
+        :header="C.name('last_commit_time')" :pt="ptColumnCenter" />
 
-      <Column v-if="C.display('version')" sortable field="version" :header="C.name('version')"
-        style="text-align: center;" />
+      <Column v-if="C.display('version')" sortable field="version" :header="C.name('version')" :pt="ptColumnCenter" />
 
       <Column v-if="C.display('release_count')" sortable field="release_count" :header="C.name('release_count')"
-        style="text-align: center;">
+        :pt="ptColumnCenter">
         <template #body="{ data }">
           <NuxtLink :to="`https://crates.io/crates/${data.pkg}`" target="_blank" class="nav-link">
             {{ data.release_count }}
@@ -64,13 +63,13 @@
       </Column>
 
       <Column v-if="C.display('last_release_time')" sortable field="last_release_time"
-        :header="C.name('last_release_time')" style="text-align: center; min-width: 120px;" />
+        :header="C.name('last_release_time')" style="min-width: 120px;" :pt="ptColumnCenter" />
 
       <Column v-if="C.display('last_release_size')" sortable field="last_release_size"
-        :header="C.name('last_release_size')" style="text-align: center" />
+        :header="C.name('last_release_size')" :pt="ptColumnRight" />
 
       <Column v-if="C.display('diag_total_count')" sortable field="diag_total_count"
-        :header="C.name('diag_total_count')" style="text-align: center;">
+        :header="C.name('diag_total_count')" :pt="ptColumnRight">
         <template #body="{ data }">
           <NuxtLink :to="`/${data.user}/${data.repo}`" target="_blank" class="nav-link">
             {{ data.diag_total_count }}
@@ -79,27 +78,25 @@
       </Column>
 
       <Column v-if="C.display('testcases')" sortable field="testcases" :header="C.name('testcases')"
-        style="text-align: center; font-weight: bold">
+        style="font-weight: bold" :pt="ptColumnRight">
         <template #body="{ data }">
           <span :style="{ color: data.testcases_color }">
             {{ data.testcases }}
           </span>
         </template>
       </Column>
 
-      <Column v-if="C.display('lib')" sortable field="lib" :header="C.name('lib')" style="text-align: center;" />
-      <Column v-if="C.display('bin')" sortable field="bin" :header="C.name('bin')" style="text-align: center;" />
+      <Column v-if="C.display('lib')" sortable field="lib" :header="C.name('lib')" :pt="ptColumnCenter" />
+      <Column v-if="C.display('bin')" sortable field="bin" :header="C.name('bin')" :pt="ptColumnCenter" />
       <Column v-if="C.display('dependencies')" sortable field="dependencies" :header="C.name('dependencies')"
-        style="text-align: center;" />
+        :pt="ptColumnRight" />
 
-      <Column v-if="C.display('tests')" sortable field="tests" :header="C.name('tests')" style="text-align: center;" />
-      <Column v-if="C.display('examples')" sortable field="examples" :header="C.name('examples')"
-        style="text-align: center;" />
-      <Column v-if="C.display('benches')" sortable field="benches" :header="C.name('benches')"
-        style="text-align: center;" />
+      <Column v-if="C.display('tests')" sortable field="tests" :header="C.name('tests')" :pt="ptColumnRight" />
+      <Column v-if="C.display('examples')" sortable field="examples" :header="C.name('examples')" :pt="ptColumnRight" />
+      <Column v-if="C.display('benches')" sortable field="benches" :header="C.name('benches')" :pt="ptColumnRight" />
 
       <Column v-if="C.display('documentation')" field="documentation" :header="C.name('documentation')"
-        style="text-align: center;">
+        :pt="ptColumnCenter">
         <template #body="{ data }">
           <NuxtLink v-if="data.documentation" :to="data.documentation" target="_blank" class="nav-link">
             link
@@ -108,8 +105,7 @@
         </template>
       </Column>
 
-      <Column v-if="C.display('latest_doc')" field="latest_doc" :header="C.name('latest_doc')"
-        style="text-align: center;">
+      <Column v-if="C.display('latest_doc')" field="latest_doc" :header="C.name('latest_doc')" :pt="ptColumnCenter">
         <template #body="{ data }">
           <NuxtLink v-if="data.latest_doc" :to="data.latest_doc" target="_blank" class="nav-link">
             link
@@ -118,7 +114,7 @@
         </template>
       </Column>
 
-      <Column v-if="C.display('homepage')" field="homepage" :header="C.name('homepage')" style="text-align: center;">
+      <Column v-if="C.display('homepage')" field="homepage" :header="C.name('homepage')" :pt="ptColumnCenter">
         <template #body="{ data }">
           <NuxtLink v-if="data.homepage" :to="data.homepage" target="_blank" class="nav-link">
             link
@@ -148,8 +144,8 @@
       <Column v-if="C.display('description')" field="description" :header="C.name('description')"
         style="min-width: 280px;" />
 
-      <Column v-if="C.display('authors')" sortable field="authors" :header="C.name('authors')"
-        style="min-width: 300px;">
+      <Column v-if="C.display('authors')" sortable field="authors" :header="C.name('authors')" style="min-width: 300px;"
+        :pt="ptColumnCenter">
         <template #body="{ data: { authors } }">
           <div v-for="tag of authors">
             <Tag severity="info" :value="tag" style="margin-bottom: 5px;"></Tag>
@@ -245,6 +241,16 @@ import type { DataTableSortMeta } from 'primevue/datatable';
 const { color, viewportHeight } = storeToRefs(useStyleStore());
 const tableHeight = computed(() => `${Math.round(viewportHeight.value * 0.8)}px`);
 
+// styling
+const ptColumnCenter = ref({
+  columnHeaderContent: { style: { "justify-content": "center" } },
+  bodyCell: { style: { "text-align": "center" } }
+});
+const ptColumnRight = ref({
+  columnHeaderContent: { style: { "justify-content": "right" } },
+  bodyCell: { style: { "text-align": "right" } }
+});
+
 const summaries = ref<PkgInfo[]>([]);
 
 githubFetch<PkgInfo[]>({