Rework collection form display on mobile

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>

front/src/CollectionFormElement.vue

@@ -80,32 +80,36 @@ function onPointerMove(e) {
       @pointerleave="clearGrabVariables"
     >
       <BookListElement v-bind="props.book">
-        <div class="separator" />
+        <template v-slot:left>
-        <div class="centered">
+          <div class="inputpositionwidget centered">
-          <div
+            <div
-            v-if="!isInputtingPosition"
+              v-if="!isInputtingPosition"
-            @click="isInputtingPosition = true"
+              @click="isInputtingPosition = true"
-            class="positionindicator centered is-narrow clickable"
+              class="positionindicator centered is-narrow clickable"
-          >
+            >
-            {{ props.position }}
+              {{ 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>
+          <div class="separator" />
-            <input
+        </template>
-              type="text"
+        <template v-slot:right>
-              v-model="inputtedPosition"
+          <div class="separator" />
-              v-focus
+          <div class="positionwidget centered is-narrow" @pointerdown="onPointerDown">
-              @blur="clearPositionInput"
+            <b-icon-list />
-              @keyup.enter="onPositionInput"
-              size="1"
-              class="positioninput"
-              :placeholder="props.position"
-            />
           </div>
-        </div>
+        </template>
-        <div class="separator" />
-        <div class="positionwidget centered is-narrow" @pointerdown="onPointerDown">
-          <b-icon-list />
-        </div>
       </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>