Book form: make buttons work on mobile view

front/src/BigIcon.vue

@@ -35,7 +35,7 @@ onUnmounted(() => {
 <template>
   <div
     class="bigiconandlegend"
-    :class="props.isReadonly ? '' : 'showcanclick'"
+    :class="props.isReadonly ? 'widget-readonly' : 'showcanclick'"
     @mouseover="hovered = true"
     @mouseout="hovered = false"
   >
@@ -79,6 +79,10 @@ onUnmounted(() => {
   padding-bottom: 30px;
 }
 
+.widget-readonly {
+  opacity: 50%;
+}
+
 @media (max-width: 1024px) {
   .bigicon {
     flex: 1;

front/src/BookDateWidget.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref } from 'vue'
 import BigIcon from './BigIcon.vue'
+import DateWidget from './DateWidget.vue'
 
 const props = defineProps({
   icon: String,
@@ -26,9 +27,6 @@ function computeParentClasses() {
   } else {
     classNames += ' border-radius-right'
   }
-  if (props.isReadonly) {
-    classNames += ' widget-readonly'
-  }
   return classNames
 }
 </script>
@@ -44,28 +42,18 @@ function computeParentClasses() {
     />
     <div v-if="props.isExpanded" class="inputdate">
       <div class="ontopofinput">
-        <label class="datelabel" for="startread">
+        <DateWidget
-          {{ $t('bookdatewidget.started') }}
+          dateinputid="startread"
-        </label>
+          dateinputlabel="bookdatewidget.started"
-        <input
+          :initdate="props.startReadDate"
-          class="datepicker has-background-dark has-text-light"
+          @onDateChange="(d) => $emit('onStartDateChange', d)"
-          id="startread"
-          type="date"
-          @change="(e) => $emit('onStartDateChange', e.target.value)"
-          :value="props.startReadDate"
-          :max="today"
         />
         <div v-if="props.useEndDate">
-          <label class="datelabel" for="endread">
+          <DateWidget
-            {{ $t('bookdatewidget.finished') }}
+            dateinputid="endread"
-          </label>
+            dateinputlabel="bookdatewidget.finished"
-          <input
+            :initdate="props.endReadDate"
-            class="datepicker has-background-dark has-text-light"
+            @onDateChange="(d) => $emit('onEndDateChange', d)"
-            id="endread"
-            type="date"
-            @change="(e) => $emit('onEndDateChange', e.target.value)"
-            :value="props.endReadDate"
-            :max="today"
           />
         </div>
       </div>
@@ -93,24 +81,6 @@ function computeParentClasses() {
   display: block;
 }
 
-.datelabel {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 26px;
-  border: none;
-  padding-bottom: 15px;
-}
-
-.datepicker {
-  font-size: 26px;
-  border-radius: 5px;
-}
-
-.widget-readonly {
-  opacity: 50%;
-}
-
 @media (max-width: 1024px) {
   .bookdatewidget {
     flex: 1;

front/src/BookForm.vue

@@ -16,6 +16,7 @@ import { useRouter, onBeforeRouteUpdate } from 'vue-router'
 import { VRating } from 'vuetify/components/VRating'
 import BigIcon from './BigIcon.vue'
 import BookDateWidget from './BookDateWidget.vue'
+import DateWidget from './DateWidget.vue'
 
 const router = useRouter()
 const props = defineProps({
@@ -127,7 +128,9 @@ function goToAuthor() {
       <div class="iconscontainer" :class="data.read ? 'remove-border-bottom' : ''">
         <div
           class="bigiconcontainer"
-          :class="data.wantread ? 'has-text-dark has-background-text border-radius-up-fill' : ''"
+          :class="
+            data.wantread ? 'has-text-dark has-background-text border-radius-wantread-fill' : ''
+          "
         >
           <BigIcon
             icon="BIconEye"
@@ -136,7 +139,31 @@ function goToAuthor() {
             @click="onWantReadIconClick"
           />
         </div>
+        <div
+          class="bigiconcontainer is-hidden-desktop"
+          :class="isStartReadExpanded() ? 'has-text-dark has-background-text' : ''"
+        >
+          <BigIcon
+            icon="BIconBook"
+            :legend="$t('bookform.wantread')"
+            :is-set="isStartReadExpanded()"
+            :is-readonly="data.read"
+            @click="data.read ? null : onStartReadIconClick()"
+          />
+        </div>
+        <div
+          class="bigiconcontainer is-hidden-desktop"
+          :class="data.read ? 'has-text-dark has-background-text border-radius-right-fill' : ''"
+        >
+          <BigIcon
+            icon="BIconCheckCircle"
+            :legend="$t('bookform.read')"
+            :isSet="data.read"
+            @click="onReadIconClick"
+          />
+        </div>
         <BookDateWidget
+          class="is-hidden-mobile"
           icon="BIconBook"
           :legend="$t('bookform.startread')"
           :start-read-date="data.startReadDate"
@@ -146,6 +173,7 @@ function goToAuthor() {
           @onIconClick="onStartReadIconClick"
         />
         <BookDateWidget
+          class="is-hidden-mobile"
           icon="BIconCheckCircle"
           :legend="$t('bookform.read')"
           :start-read-date="data.startReadDate"
@@ -158,6 +186,28 @@ function goToAuthor() {
           @onIconClick="onReadIconClick"
         />
       </div>
+      <div class="mobile-dates pt-3 is-hidden-desktop">
+        <div class="mobiledate">
+          <DateWidget
+            v-if="isStartReadExpanded() || data.read"
+            dateinputid="startread"
+            dateinputlabel="bookdatewidget.started"
+            :initdate="data.startReadDate"
+            is-horizontal
+            @onDateChange="(d) => onStartReadDateChange(d)"
+          />
+        </div>
+        <div class="mobiledate pt-2">
+          <DateWidget
+            v-if="data.read"
+            dateinputid="endread"
+            dateinputlabel="bookdatewidget.finished"
+            :initdate="data.endReadDate"
+            is-horizontal
+            @onDateChange="(d) => onEndReadDateChange(d)"
+          />
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -182,8 +232,14 @@ img {
   width: 250px;
 }
 
-.remove-border-bottom {
+.mobile-dates {
-  border-bottom: none;
+  display: block;
+}
+
+.mobiledate {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 @media (min-width: 1024px) {
@@ -191,10 +247,14 @@ img {
     margin-left: 3rem;
   }
 
-  .border-radius-up-fill {
+  .border-radius-wantread-fill {
     border-radius: 45px 45px 0px 0px;
   }
 
+  .remove-border-bottom {
+    border-bottom: none;
+  }
+
   .bigiconcontainer {
     display: flex;
   }
@@ -204,13 +264,14 @@ img {
   img {
     max-height: 250px;
     max-width: 250px;
+    padding: 20px;
   }
 
   .bigiconcontainer {
     flex: 1;
   }
 
-  .border-radius-up-fill {
+  .border-radius-wantread-fill {
     border-radius: 38px 0px 0px 38px;
   }
 
@@ -224,5 +285,9 @@ img {
     display: flex;
     width: 100%;
   }
+
+  .border-radius-right-fill {
+    border-radius: 0px 38px 38px 0px;
+  }
 }
 </style>

front/src/DateWidget.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  dateinputid: String,
+  dateinputlabel: String,
+  initdate: String,
+  isHorizontal: Boolean,
+})
+defineEmits(['onDateChange'])
+
+const today = new Date().toISOString().slice(0, 10)
+</script>
+
+<template>
+  <label class="datelabel" :class="props.isHorizontal ? 'pr-2' : 'pb-1'" :for="props.dateinputid">
+    {{ $t(props.dateinputlabel) }}
+  </label>
+  <input
+    class="datepicker has-background-dark has-text-light"
+    :id="props.dateinputid"
+    type="date"
+    @change="(e) => $emit('onDateChange', e.target.value)"
+    :value="props.initdate"
+    :max="today"
+  />
+</template>
+
+<style scoped>
+.datelabel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 26px;
+  border: none;
+}
+
+.datepicker {
+  font-size: 26px;
+  border-radius: 5px;
+}
+</style>