fix(labeler): height of 3D mesh preview

jina-ai · Oct 8, 2021 · 585e192 · 585e192
1 parent b368d12
commit 585e192
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/finetuner/labeler/ui/js/components/mesh-match-card.vue.js b/finetuner/labeler/ui/js/components/mesh-match-card.vue.js
@@ -8,13 +8,13 @@ const meshMatchCard = {
       submitDoc: Function,
     },
     template: `
-        <div class="card image-card">
+        <div class="card mesh-card">
             <div class="card-header">
                 <p class="fs-6 fw-light mb-2">Select all images similar to the image on right</p>
                 <model-viewer
                     v-bind:src="getContent(doc)" 
                     v-on:click="toggleRelevance(match)"
-                    class="img-thumbnail img-fluid my-2"
+                    class="img-thumbnail img-fluid my-2 h-100"
                     alt="result mesh"
                     ar ar-modes="webxr scene-viewer quick-look"
                     environment-image="neutral"
@@ -34,7 +34,7 @@ const meshMatchCard = {
                             <model-viewer
                                 v-bind:src="getContent(match)" 
                                 v-on:click="toggleRelevance(match)"
-                                class="img-thumbnail img-fluid"
+                                class="img-thumbnail img-fluid h-100"
                                 alt="result mesh"
                                 ar ar-modes="webxr scene-viewer quick-look"
                                 environment-image="neutral"

diff --git a/finetuner/labeler/ui/main.css b/finetuner/labeler/ui/main.css
@@ -343,6 +343,14 @@ accordion-button:focus {
   padding: 0;
 }
 
+.mesh-card .card-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: .5rem;
+  height: 10rem;
+}
+
 /* Swiper don't swipe */
 .swiper-container {
   width: 100%;