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,8 +80,8 @@ function onPointerMove(e) {
       @pointerleave="clearGrabVariables"
     >
       <BookListElement v-bind="props.book">
-        <div class="separator" />
-        <div class="centered">
+        <template v-slot:left>
+          <div class="inputpositionwidget centered">
             <div
               v-if="!isInputtingPosition"
               @click="isInputtingPosition = true"
@@ -103,9 +103,13 @@ function onPointerMove(e) {
             </div>
           </div>
           <div class="separator" />
+        </template>
+        <template v-slot:right>
+          <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>