From 7d867af6548d32872f34a5a3d1c90430ecd8c6b7 Mon Sep 17 00:00:00 2001
From: Arthur Lefebvre <artlef@protonmail.com>
Date: Wed, 22 Apr 2026 15:08:50 +0200
Subject: [PATCH] Rework collection form display on mobile

---
 front/src/BookListElement.vue       | 10 ++++-
 front/src/CollectionFormElement.vue | 62 ++++++++++++++++++-----------
 2 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/front/src/BookListElement.vue b/front/src/BookListElement.vue
index bf04ea9..dc1f550 100644
--- a/front/src/BookListElement.vue
+++ b/front/src/BookListElement.vue
@@ -130,6 +130,7 @@ async function importInventaireEdition(inventaireid) {
     <p>{{ error }}</p>
   </div>
   <div class="columns no-padding box container has-background-dark">
+    <slot name="left"></slot>
     <div class="media column no-margin clickable" @click="openBook">
       <div class="media-left">
         <figure class="image mb-3">
@@ -164,7 +165,7 @@ async function importInventaireEdition(inventaireid) {
         </button>
       </div>
     </div>
-    <slot></slot>
+    <slot name="right"></slot>
   </div>
 </template>
 
@@ -208,5 +209,12 @@ img {
     justify-content: center;
     align-items: center;
   }
+
+  img {
+    max-height: 100px;
+    max-width: 100px;
+    height: auto;
+    width: auto;
+  }
 }
 </style>
diff --git a/front/src/CollectionFormElement.vue b/front/src/CollectionFormElement.vue
index bcbd576..8b30806 100644
--- a/front/src/CollectionFormElement.vue
+++ b/front/src/CollectionFormElement.vue
@@ -80,32 +80,36 @@ function onPointerMove(e) {
       @pointerleave="clearGrabVariables"
     >
       <BookListElement v-bind="props.book">
-        <div class="separator" />
-        <div class="centered">
-          <div
-            v-if="!isInputtingPosition"
-            @click="isInputtingPosition = true"
-            class="positionindicator centered is-narrow clickable"
-          >
-            {{ props.position }}
+        <template v-slot:left>
+          <div class="inputpositionwidget centered">
+            <div
+              v-if="!isInputtingPosition"
+              @click="isInputtingPosition = true"
+              class="positionindicator centered is-narrow clickable"
+            >
+              {{ props.position }}
+            </div>
+            <div v-else>
+              <input
+                type="text"
+                v-model="inputtedPosition"
+                v-focus
+                @blur="clearPositionInput"
+                @keyup.enter="onPositionInput"
+                size="1"
+                class="positioninput"
+                :placeholder="props.position"
+              />
+            </div>
           </div>
-          <div v-else>
-            <input
-              type="text"
-              v-model="inputtedPosition"
-              v-focus
-              @blur="clearPositionInput"
-              @keyup.enter="onPositionInput"
-              size="1"
-              class="positioninput"
-              :placeholder="props.position"
-            />
+          <div class="separator" />
+        </template>
+        <template v-slot:right>
+          <div class="separator" />
+          <div class="positionwidget centered is-narrow" @pointerdown="onPointerDown">
+            <b-icon-list />
           </div>
-        </div>
-        <div class="separator" />
-        <div class="positionwidget centered is-narrow" @pointerdown="onPointerDown">
-          <b-icon-list />
-        </div>
+        </template>
       </BookListElement>
     </div>
     <div v-if="isDragover && isDragoverFromAbove" class="dragover" />
@@ -164,4 +168,14 @@ function onPointerMove(e) {
   border: 3px solid var(--bulma-primary);
   border-radius: 10px;
 }
+
+@media (max-width: 1024px) {
+  .inputpositionwidget {
+    margin-top: 10px;
+  }
+
+  .positionwidget {
+    margin-bottom: 10px;
+  }
+}
 </style>