Add search for mobile view

front/src/AppNavBar.vue

@@ -3,12 +3,13 @@
   import { useRouter, RouterLink } from 'vue-router'
   import NavBarSearch from './NavBarSearch.vue'
   import { useAuthStore } from './auth.store.js'
+  import Modal from './Modal.vue'
 
   const authStore = useAuthStore();
   const router = useRouter();
 
-  const popupDisplay = ref(false)
   const isMenuActive = ref(false)
+  const isSearchBarShown = ref(false)
 
   function logout() {
     authStore.logout();
@@ -23,6 +24,14 @@
         <RouterLink to="/" class="navbar-item" activeClass="is-active">
         PLM
         </RouterLink>
+        <div class="navbar-item is-hidden-desktop">
+          <a @click="isSearchBarShown = !isSearchBarShown"
+            class="button is-medium" :class="isSearchBarShown ? 'is-active' : '' ">
+            <span class="icon" title="Search">
+              <b-icon-search />
+            </span>
+          </a>
+        </div>
         <a role="button" class="navbar-burger" aria-label="menu"
           :class="isMenuActive ? 'is-active' : '' " :aria-expanded="isMenuActive"
           @click="isMenuActive = !isMenuActive">
@@ -32,9 +41,12 @@
           <span aria-hidden="true"></span>
         </a>
     </div>
+    <div v-if="isSearchBarShown" class="is-hidden-desktop">
+      <NavBarSearch @search-done="isSearchBarShown = false" size-class="is-medium" is-mobile/>
+    </div>
     <div id="navmenu" class="navbar-menu" :class="isMenuActive ? 'is-active' : '' ">
       <div class="navbar-start">
-        <NavBarSearch @open-scan-popup="popupDisplay = true" class="is-hidden-mobile"/>
+        <NavBarSearch size-class="" class="is-hidden-touch"/>
         <RouterLink v-if="authStore.user" to="/books" class="navbar-item" activeClass="is-active">
           {{ $t('navbar.mybooks')}}
         </RouterLink>
@@ -42,7 +54,7 @@
           {{ $t('navbar.addbook')}}
         </RouterLink>
       </div>
-      <div class="navbar-end is-hidden-mobile">
+      <div class="navbar-end is-hidden-touch">
         <div v-if="authStore.user" class="navbar-item">
           <div >
             {{ authStore.user.username }}

front/src/Modal.vue

@@ -46,10 +46,10 @@ function onBarcodeDecode(isbn) {
   }
 
   .modal {
-    height: 70%;
+    height: 80%;
-    width: 70%;
+    width: 80%;
     top: 10%;
-    left: 15%;
+    left: 10%;
     box-shadow: 2px 2px 20px 1px;
     overflow-x: auto;
     display: flex;

front/src/NavBarSearch.vue

@@ -6,10 +6,22 @@
   const searchterm = ref("");
   const router = useRouter();
 
+  const props = defineProps({
+    sizeClass: String,
+    isMobile: Boolean
+  });
+
+  const emit = defineEmits('searchDone')
+
+  const vMobileFocus = {
+    mounted: (el, binding) => el.focus();
+  }
+
   function onSearchClick() {
     if (typeof searchterm.value === "undefined" || searchterm.value === "") {
       return
     }
+    emit('searchDone')
     router.push('/search/' + searchterm.value);
   }
 </script>
@@ -18,16 +30,16 @@
   <div class="navbar-item">
     <div class="field has-addons">
       <div class="control">
-        <input v-model="searchterm" @keyup.enter="onSearchClick()" class="input" type="text" />
+        <input v-mobile-focus="isMobile ? true : null" v-model="searchterm" @keyup.enter="onSearchClick()" class="input" :class="sizeClass" type="text" />
       </div>
       <div class="control">
-        <button @click="onSearchClick()" class="button">
+        <button @click="onSearchClick()" class="button" :class="sizeClass">
           <span class="icon" title="Search">
             <b-icon-search />
           </span>
         </button>
       </div>
-      <Modal/>
+      <Modal v-if="!isMobile"/>
     </div>
   </div>
 </template>

front/src/ScanBook.vue

@@ -22,7 +22,7 @@
 </script>
 
 <template>
-  <h1 class="title">{{$t('barcode.title')}}</h1>
+  <h1 class="subtitle">{{$t('barcode.title')}}</h1>
   <div v-if="scanResult">{{scanResult}}</div>
   <video poster="data:image/gif,AAAA" ref="scanner"></video>
 </template>