Create book form for mobile view

front/src/BookForm.vue

@@ -92,7 +92,7 @@
 <template>
   <div v-if="error">{{$t('bookform.error', {error: error.message})}}</div>
   <div v-if="data" class="columns">
-    <div class="column is-narrow ml-6">
+    <div class="column is-narrow left-panel">
       <figure class="image">
         <img v-bind:src="imagePathOrDefault" v-bind:alt="data.title">
       </figure>
@@ -118,10 +118,12 @@
     </div>
     <div class="column">
       <div class="iconscontainer" :class="data.read ? 'remove-border-bottom' : ''">
-        <BigIcon icon="BIconEye"
-                 :legend="$t('bookform.wantread')"
-                 :isSet="data.wantread"
-                 @click="onWantReadIconClick"/>
+        <div class="bigiconcontainer">
+          <BigIcon icon="BIconEye"
+                   :legend="$t('bookform.wantread')"
+                   :isSet="data.wantread"
+                   @click="onWantReadIconClick"/>
+        </div>
         <BookDateWidget
                  icon="BIconBook"
                  :legend="$t('bookform.startread')"
@@ -170,4 +172,33 @@ img {
   border-bottom: none;
 }
 
+@media (min-width: 1024px) {
+  .left-panel {
+    margin-left: 3rem;
+  }
+}
+
+
+@media (max-width: 1024px) {
+  img {
+    max-height: 250px;
+    max-width: 250px;
+  }
+
+  .bigiconcontainer {
+    flex: 1;
+  }
+
+  .image {
+    display:flex;
+    justify-content:center;
+    align-items:center;
+  }
+
+  .iconscontainer {
+    display:flex;
+    width: 100%;
+  }
+}
+
 </style>