dumili: UI improvements

Author: bperel

apps/dumili/src/components/SuggestionList.vue

@@ -2,8 +2,13 @@
   <div :class="classes">
     <b-dropdown
       class="position-static z-1"
+      style="width: calc(100% - 40px)"
       :menu-class="['border-white', ...extraMenuClass]"
-      :toggle-class="['text-wrap', ...(current ? itemClass(current) : [])]"
+      :toggle-class="[
+        'text-wrap',
+        'w-100',
+        ...(current ? itemClass(current) : []),
+      ]"
       ><b-dropdown-group
         v-for="(group, index) in [userSuggestions, aiSuggestions]"
         :key="index"
@@ -25,6 +30,7 @@
             ...((current?.id === suggestion.id &&
               selectedItemClass(suggestion)) ||
               []),
+            ...itemLinkClasses,
           ]"
           @click.stop="
             current = suggestion;
@@ -49,7 +55,10 @@
       ></template>
       <template #button-content>
         <slot v-if="showCustomizeForm" name="customize-text" />
-        <div v-else class="d-flex justify-content-between align-items-center">
+        <div
+          v-else
+          class="d-flex w-100 justify-content-between align-items-center"
+        >
           <slot
             v-if="current"
             v-bind="{ suggestion: current, location: 'button' }"
@@ -78,6 +87,7 @@ const current = defineModel<S | null>();
 
 const {
   class: classes = "",
+  itemLinkClasses = [],
   suggestions,
   isAiSource,
   itemClass = () => [],
@@ -86,6 +96,7 @@ const {
   extraMenuClass = [],
 } = defineProps<{
   class?: string;
+  itemLinkClasses?: string[];
   suggestions: S[];
   isAiSource: (suggestion: S) => boolean;
   itemClass?: (suggestion: S) => string[];

apps/dumili/src/components/suggestions/StoryKindSuggestionList.vue

@@ -6,7 +6,7 @@
     <template v-if="editable">
       <suggestion-list
         v-model="acceptedStoryKind"
-        class="position-absolute"
+        class="position-absolute w-100"
         :suggestions="entry.storyKindSuggestions"
         :is-ai-source="({ aiKumikoResultId }) => aiKumikoResultId !== null"
         :item-class="(suggestion) => [`kind-${suggestion.storyKindRows.kind}`]"

apps/dumili/src/components/suggestions/StorySuggestionList.vue

@@ -1,25 +1,16 @@
 <template>
   <suggestion-list
     v-model="entry.acceptedStory"
-    class="position-absolute top-0 d-flex flex-column justify-content-center align-items-center w-100 h-100"
+    class="position-absolute top-0 d-flex flex-column justify-content-center align-items-start w-100 h-100"
     :suggestions="entry.storySuggestions"
     :is-ai-source="({ aiStorySuggestionId }) => aiStorySuggestionId !== null"
     :show-customize-form="showEntrySelect"
     :extra-menu-class="['w-150', 'start-m50']"
+    :item-link-classes="['h-100p']"
     @toggle-customize-form="showEntrySelect = $event"
   >
     <template #default="{ suggestion, location }">
-      <b-row class="w-100" style="height: 100px">
-        <b-col
-          cols="6"
-          class="d-flex justify-content-center story-first-page"
-          :style="{
-            backgroundImage: `url(${inducksCoverRoot.replace('f_auto', 'c_crop,h_0.5,x_0,w_1') + storyUrls[suggestion.storycode]})`,
-          }"
-          @mousemove="handleImageMouseMove"
-          @mouseleave="handleImageLeave"
-        >
-        </b-col>
+      <b-row class="w-100">
         <b-col
           cols="6"
           class="d-flex flex-column justify-content-center text-wrap"
@@ -103,6 +94,16 @@
             </template>
           </Story>
         </b-col>
+        <b-col
+          cols="6"
+          class="d-flex justify-content-center story-first-page"
+          :style="{
+            backgroundImage: `url(${inducksCoverRoot.replace('f_auto', 'c_crop,h_0.5,x_0,w_1') + storyUrls[suggestion.storycode]})`,
+          }"
+          @mousemove="handleImageMouseMove"
+          @mouseleave="handleImageLeave"
+        >
+        </b-col>
       </b-row>
     </template>
     <template #unknown-text>{{ $t("Contenu inconnu") }}</template>

apps/dumili/src/style.scss

@@ -28,6 +28,10 @@ textarea::placeholder {
   z-index: 4 !important;
 }
 
+.h-100p {
+  height: 100px !important;
+}
+
 .w-150 {
   width: 150% !important;
 }

apps/dumili/translations/messages.en.json

@@ -72,6 +72,7 @@
   "Rechercher...": "Search...",
   "Réduire cette entrée à {originalPagesCount} page|Réduire cette entrée à {originalPagesCount} pages": "Shrink this entry to {originalPagesCount} page|Shrink this entry to {originalPagesCount} pages",
   "Remplacer les pages existantes": "Overwrite existing pages",
+  "Résultats de la recherche par image": "Image search results",
   "Résultats OCR pour la première case": "OCR results for the first page",
   "Sans titre": "Untitled.",
   "Sélectionner...": "Select...",