Improve site on mobile a bit more

Zentrik · Apr 27, 2024 · d30bee4 · d30bee4
1 parent 660ac38
commit d30bee4
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 30 deletions.
diff --git a/site/frontend/src/pages/compare/compile/table/comparisons-table.vue b/site/frontend/src/pages/compare/compile/table/comparisons-table.vue
@@ -19,35 +19,49 @@ const props = defineProps<{
 }>();
 
 function prettifyRawNumber(number: number): string {
+  if (number > 1000) {
+    number = Math.round(number);
+  }
   return number.toLocaleString();
 }
 
+const showSignificanceData = ref(true);
+const updateShowSignificanceData = () => {
+  let width_of_cols = 97.8 * (3 + (props.showRawData ? 2 : 0)) + 14 + 50; // Excluding benchmark name column
+  let width_with_sig_data = width_of_cols + 97.8*2 + 50;
+  showSignificanceData.value = !window.matchMedia(`(max-width: ${width_with_sig_data}px)`).matches;
+};
+onMounted(() => {
+  updateShowSignificanceData();
+  window.addEventListener('resize', updateShowSignificanceData);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', updateShowSignificanceData);
+});
 // Modify this when changing the number of columns in the table!
 const columnCount = ref(5); // initial value
 const updateColumnCount = () => {
-  const base = window.matchMedia('(max-width: 400px)').matches ? 3 : 5;
-  columnCount.value = props.showRawData ? base + 2 : base;
+  let base = 5;
+  if (!showSignificanceData.value) {
+    base -= 2;
+  }
+  if (props.showRawData) {
+    base += 2;
+  }
+  columnCount.value = base;
 };
 watchEffect(() => {
   updateColumnCount();
 });
 
-onMounted(() => {
-  updateColumnCount();
-  window.addEventListener('resize', updateColumnCount);
-});
-
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', updateColumnCount);
-});
-
 const unit = computed(() => {
   // The DB stored wall-time data in nanoseconds for compile benchmarks, so it is
   // hardcoded here
   if (props.stat.split("-").pop() == "time") {
-    return "ns";
+    return "(ns)";
   } else if (props.stat == "memory") {
-    return "B";
+    return "(B)";
   } else {
     return null;
   }
@@ -65,9 +79,9 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
       <thead>
         <tr>
           <th class="toggle-arrow"></th>
-          <th>Benchmark</th>
+          <th class="benchmark_name">Benchmark</th>
           <th class="pct-change">% Change</th>
-          <th class="narrow">
+          <th v-if="showSignificanceData" class="narrow">
             Significance Threshold
             <Tooltip>
               The minimum % change that is considered significant. The higher
@@ -81,16 +95,16 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
               how the significance threshold is calculated.
             </Tooltip>
           </th>
-          <th class="narrow">
+          <th v-if="showSignificanceData" class="narrow">
             Significance Factor
             <Tooltip>
               How much a particular result is over the significance threshold. A
               factor of 2.50x means the result is 2.5 times over the
               significance threshold.
             </Tooltip>
           </th>
-          <th v-if="showRawData" class="raw-data">Before</th>
-          <th v-if="showRawData" class="raw-data">After</th>
+          <th v-if="showRawData" class="raw-data">Before {{ unit }}</th>
+          <th v-if="showRawData" class="raw-data">After {{ unit }}</th>
         </tr>
       </thead>
       <tbody>
@@ -114,7 +128,7 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
                 </span>
               </div>
             </td>
-            <td class="narrow">
+            <td v-if="showSignificanceData" class="narrow">
               <div class="numeric-aligned">
                 <div>
                   {{
@@ -127,7 +141,7 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
                 </div>
               </div>
             </td>
-            <td class="narrow">
+            <td v-if="showSignificanceData" class="narrow">
               <div class="numeric-aligned">
                 <div>
                   {{
@@ -141,14 +155,12 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
             </td>
             <td v-if="showRawData" class="numeric">
               <abbr :title="comparison.comparison.statistics[0].toString()">
-                {{ prettifyRawNumber(comparison.comparison.statistics[0])
-                }}{{ unit }}
+                {{ prettifyRawNumber(comparison.comparison.statistics[0]) }}
               </abbr>
             </td>
             <td v-if="showRawData" class="numeric">
               <abbr :title="comparison.comparison.statistics[1].toString()">
-                {{ prettifyRawNumber(comparison.comparison.statistics[1])
-                }}{{ unit }}
+                {{ prettifyRawNumber(comparison.comparison.statistics[1]) }}
               </abbr>
             </td>
           </tr>
@@ -259,9 +271,11 @@ const {toggleExpanded, isExpanded} = useExpandedStore();
   text-overflow: ellipsis;
 }
 
-@media screen and (max-width: 400px) {
-  .narrow {
-    display: none;
-  }
+abbr {
+  text-decoration-thickness: from-font;
+}
+
+:deep(.tooltiptext) {
+  margin-left: -169px !important;
 }
 </style>
diff --git a/site/frontend/src/pages/compare/summary/overall-summary.vue b/site/frontend/src/pages/compare/summary/overall-summary.vue
@@ -13,7 +13,7 @@ const summary = computed(() => props.summary);
 <template>
   <div class="main-summary">
     <SummaryTable :summary="summary"></SummaryTable>
-    <div style="position: absolute; right: 5px; top: 5px">
+    <div class="tooltip-container">
       <Tooltip style="margin-right: 1em">
         The table shows summaries of regressions, improvements and all changes
         calculated from data that is currently visible (data that passes the
@@ -33,4 +33,24 @@ const summary = computed(() => props.summary);
   justify-content: center;
   position: relative;
 }
+
+.tooltip-container {
+  position: absolute;
+  right: -7px;
+  top: 5px
+}
+
+:deep(.tooltiptext) {
+  margin-left: -178px !important;
+}
+
+@media screen and (max-width: 600px) {
+  .tooltip-container {
+    left: 5px;
+  }
+  :deep(.tooltiptext) {
+    margin-left: -22px !important;
+  }
+}
+
 </style>
diff --git a/site/frontend/src/pages/compare/tooltip.vue b/site/frontend/src/pages/compare/tooltip.vue
@@ -33,7 +33,7 @@
 
   position: absolute;
   bottom: 125%;
-  margin-left: -60px;
+  margin-left: -80px;
 
   opacity: 0;
   transition: opacity 0.3s, visibility 0.3s;