Create book form for mobile view

front/src/BigIcon.vue

@@ -1,5 +1,5 @@
 <script setup>
-  import { ref, computed } from 'vue'
+  import { ref, computed, onMounted, onUnmounted } from 'vue'
 
   const props = defineProps({
   icon: String,
@@ -9,8 +9,24 @@
 });
 
   const hovered = ref(false)
+  const isOnMobile = ref(computeIsOnMobile())
 
-  const computedIcon = computed(() => props.icon + (!props.isReadonly && (hovered.value || props.isSet) ? "Fill" : ""));
+  const computedIcon = computed(() => props.icon +
+    (!props.isReadonly && ((hovered.value && !isOnMobile.value) || props.isSet) ? "Fill" : ""));
+
+  function computeIsOnMobile() {
+    return window.innerWidth < 1024;
+  }
+
+  function updateOnMobile() {
+    isOnMobile.value = computeIsOnMobile();
+  }
+  onMounted(() => {
+    window.addEventListener("resize", updateOnMobile);
+  });
+  onUnmounted(() => {
+    window.removeEventListener("resize", updateOnMobile);
+  });
 
 </script>
 
@@ -33,14 +49,16 @@
   margin:25px;
 }
 
-.showcanclick:hover {
+@media (min-width: 1024px) {
-  transform: scale(1.03);
+  .showcanclick:hover {
-  transition: ease-in-out 0.02s;
+    transform: scale(1.03);
-  cursor: pointer;
+    transition: ease-in-out 0.02s;
+    cursor: pointer;
+  }
 }
 
 .bigicon {
-  display:flex;
+  display: flex;
   justify-content:center;
   align-items:center;
   height: 90px;
@@ -57,4 +75,28 @@
   width: 200px;
   padding-bottom:30px;
 }
+
+@media (max-width: 1024px) {
+  .bigicon {
+    flex: 1;
+    height: 40px;
+    width: 50px;
+    padding-top: 5px;
+  }
+
+  .bigiconlegend {
+    flex:1;
+    font-size: 16px;
+    width: 100%;
+    padding-bottom:0px;
+  }
+
+  .bigiconandlegend {
+    display: flex;
+    justify-content:center;
+    align-items:center;
+    flex-flow: column;
+    margin:0px;
+  }
+}
 </style>

front/src/BookDateWidget.vue

@@ -76,10 +76,6 @@
   align-items:center;
   padding: 20px;
 }
-.bookdatewidget {
-  display: flex;
-  width: 500px;
-}
 
 .border-radius-right {
   border-radius: 0 30px 30px 0;
@@ -110,4 +106,17 @@
 .widget-readonly {
   opacity: 50%;
 }
+
+@media (max-width: 1024px) {
+  .bookdatewidget {
+    flex: 1;
+  }
+}
+
+@media (min-width: 1024px) {
+  .bookdatewidget {
+    display: flex;
+    width: 500px;
+  }
+}
 </style>

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"
+        <div class="bigiconcontainer">
-                 :legend="$t('bookform.wantread')"
+          <BigIcon icon="BIconEye"
-                 :isSet="data.wantread"
+                   :legend="$t('bookform.wantread')"
-                 @click="onWantReadIconClick"/>
+                   :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>