ui: compute topbarHeight & restHeight

Author: zjp-CN

ui/app/components/Kani.vue

@@ -3,7 +3,8 @@ import { ofetch } from "ofetch";
 import { URL_MERGE_DIFF, MergeKaniColumns, multiSort, type VecMergeHashKaniList, FILTERS, ProofKind } from "~/shared/utils/kani";
 import { useStyleStore } from "~/stores/style";
 
-const { viewportHeight } = storeToRefs(useStyleStore());
+const { restHeight } = storeToRefs(useStyleStore());
+watch(restHeight, val => console.log(val));
 
 const raw = ref<VecMergeHashKaniList>([]);
 // Download JSON
@@ -30,7 +31,7 @@ useHead({ title: "Verify Rust Std - Kani" });
 <template>
   <DataTable :value="raw" paginator :rows="5" :rowsPerPageOptions="[5, 10, 20, 50]" sortMode="multiple" removableSort
     v-model:multi-sort-meta="multiSort" stripedRows tableStyle="min-width: 20rem" tableClass="m-2"
-    :scrollHeight="`${(viewportHeight - 100) * 0.8}px`" v-model:filters="filters" :globalFilterFields="FILTERS.fields"
+    :scrollHeight="`${restHeight - 10}px`" v-model:filters="filters" :globalFilterFields="FILTERS.fields"
     currentPageReportTemplate="{first} to {last} of {totalRecords}">
 
     <template #header>

ui/app/layouts/default.vue

@@ -21,7 +21,7 @@ if (localStorage.getItem(KEY) === DARK) {
 
 <template>
   <div>
-    <div class="flex justify-between p-2">
+    <div class="flex justify-between p-2" id="topbar">
       <div></div>
       <div>
         <Button :icon='dark ? "pi pi-sun" : "pi pi-moon"' @click="toggleTheme" severity="contrast" raised />

ui/app/stores/style.ts

@@ -1,29 +1,34 @@
-export const useStyleStore = defineStore('style', () => {
+export const useStyleStore = defineStore("style", () => {
   const color = reactive({
     green: "green", red: "red", grey: "grey",
     topButton: "white", orange: "orange", orange_light: "orange",
   });
   const viewportHeight = ref(800);
+  const topbarHeight = ref(800);
+  const restHeight = computed(() => viewportHeight.value - topbarHeight.value);
 
   onMounted(() => {
-    // 获取元素的计算后的样式
+    // Get styles after computation.
     const styles = window.getComputedStyle(document.documentElement);
 
-    // 获取CSS变量的值
-    color.green = styles.getPropertyValue('--p-emerald-500').trim();
-    color.red = styles.getPropertyValue('--p-red-500').trim();
-    color.grey = styles.getPropertyValue('--p-gray-400').trim();
-    color.topButton = styles.getPropertyValue('--p-button-primary-background').trim();
-    color.orange_light = styles.getPropertyValue('--p-orange-400').trim();
-    color.orange = styles.getPropertyValue('--p-orange-500').trim();
+    // Set color shortcuts.
+    color.green = styles.getPropertyValue("--p-emerald-500").trim();
+    color.red = styles.getPropertyValue("--p-red-500").trim();
+    color.grey = styles.getPropertyValue("--p-gray-400").trim();
+    color.topButton = styles.getPropertyValue("--p-button-primary-background").trim();
+    color.orange_light = styles.getPropertyValue("--p-orange-400").trim();
+    color.orange = styles.getPropertyValue("--p-orange-500").trim();
 
-    // 视窗高度
+    // Get heights
     viewportHeight.value = window.innerHeight;
-    window.addEventListener('resize', () => {
+    topbarHeight.value = document.getElementById("topbar")?.offsetHeight ?? 800;
+    window.addEventListener("resize", () => {
       viewportHeight.value = window.innerHeight;
+      topbarHeight.value = document.getElementById("topbar")?.offsetHeight ?? 800;
     });
+
   });
 
-  return { color, viewportHeight }
+  return { color, viewportHeight, topbarHeight, restHeight }
 });