fixed various UI issues (#1412)

impresso · Dec 18, 2024 · eeb54b5 · eeb54b5
1 parent 25748bd
commit eeb54b5
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 19 deletions.
diff --git a/src/components/base/InfoButton.vue b/src/components/base/InfoButton.vue
@@ -33,8 +33,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { arrow, offset, useFloating } from '@floating-ui/vue'
+import { computed, PropType, ref } from 'vue'
+import { arrow, offset, useFloating, autoPlacement, Side } from '@floating-ui/vue'
 import { useClickOutside } from '@/composables/useClickOutside'
 import { useSettingsStore } from '@/stores/settings'
 import { FaqContentsMap } from '../../data/faq'
@@ -57,25 +57,29 @@ const props = defineProps({
     required: true
   },
   placement: {
-    type: String,
-    default: 'right'
+    type: String as PropType<Side>,
+    required: false
   },
   offsetOptions: {
     type: Object,
     default: () => {}
   }
 })
 
-const { floatingStyles, middlewareData } = useFloating(reference, floating, {
-  placement: props.placement as any,
-  middleware: [offset(props.offsetOptions), arrow({ element: floatingArrow })]
+const middleware = computed(() => {
+  return [
+    ...(props.placement == null ? [autoPlacement()] : []),
+    offset(props.offsetOptions),
+    arrow({ element: floatingArrow })
+  ]
 })
 
-// const floatingStyles = computed(() => ({
-//   top: `${y.value}px`,
-//   left: `${x.value}px`,
-//   position: strategy.value
-// }))
+const placement = computed(() => props.placement)
+
+const { floatingStyles, middlewareData } = useFloating(reference, floating, {
+  placement,
+  middleware
+})
 
 const floatingArrowStyles = computed(() => {
   const m = middlewareData as unknown as MiddlewareData

diff --git a/src/components/modules/searchQueriesComparison/DivergingBarsChartPanel.vue b/src/components/modules/searchQueriesComparison/DivergingBarsChartPanel.vue
@@ -2,10 +2,14 @@
   <div class="diverging-bars-chart-panel">
     <div class="w-100">
       <div v-for="facet in facets" v-bind:key="`dbc-${facet.id}`" class="text-center">
-        <span class="small-caps font-weight-bold"
-          >{{ facet.id }}
-          {{ $tc('numbers.options', facet.items.length, { n: facet.items.length }) }}</span
-        >
+        <span class="small-caps font-weight-bold">
+          {{ facet.id }}
+          <span v-if="facet?.items?.length > 0">
+            {{
+              $tc('numbers.options', facet?.items?.length ?? 0, { n: facet?.items?.length ?? 0 })
+            }}
+          </span>
+        </span>
         <diverging-bars-chart :items="facet.items" :round-value-fn="roundValueFn" :scale="scale">
           <template v-slot="tooltipScope">
             <div v-if="tooltipScope.tooltip.isActive">

diff --git a/src/components/modules/searchQueriesComparison/QueryHeaderPanel.vue b/src/components/modules/searchQueriesComparison/QueryHeaderPanel.vue
@@ -18,7 +18,7 @@
           <template v-slot:tabs-end>
             <!-- A -->
             <li v-if="left" class="nav-item">
-              <div class="nav-link">
+              <div class="nav-link no-hover">
                 <div class="side left">A</div>
               </div>
             </li>
@@ -29,7 +29,7 @@
             </li>
             <!-- B -->
             <li v-if="!left" class="nav-item">
-              <div class="nav-link">
+              <div class="nav-link no-hover">
                 <div class="side right">B</div>
               </div>
             </li>
@@ -78,7 +78,7 @@
                       "
                     />
                     <span v-else>{{ $t(`comparison.titles.${mode}`) }}</span>
-                    <info-button class="ml-2" name="compare-and-inspect" />
+                    <info-button class="ml-2" name="what-compare-and-inspect" />
                   </h3>
                   <div
                     v-if="mode === 'inspect'"
@@ -308,6 +308,9 @@ export default {
         border-left-color: $inspect-compare-left-panel-color;
         border-right-color: $inspect-compare-left-panel-color;
       }
+      .nav-item:hover .nav-link.no-hover {
+        box-shadow: none;
+      }
     }
     .viz-bar {
       background-color: $inspect-compare-left-panel-color;
@@ -324,6 +327,9 @@ export default {
         border-left-color: $inspect-compare-right-panel-color;
         border-right-color: $inspect-compare-right-panel-color;
       }
+      .nav-item:hover .nav-link.no-hover {
+        box-shadow: none;
+      }
     }
   }