Book form: make buttons work on mobile view

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 {
-  border-bottom: none;
+.mobile-dates {
+  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>