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 {
-  transform: scale(1.03);
-  transition: ease-in-out 0.02s;
-  cursor: pointer;
+@media (min-width: 1024px) {
+  .showcanclick:hover {
+    transform: scale(1.03);
+    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>