Update global search, fix toggling between automated backup, add open search cover in new tab #83

client/components/cards/AudiobookSearchCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex h-full px-1 overflow-hidden">
-    <cards-book-cover :audiobook="audiobook" :width="40" />
+    <cards-book-cover :audiobook="audiobook" :width="50" />
     <div class="flex-grow px-2 searchCardContent h-full">
       <p class="truncate text-sm">{{ title }}</p>
       <p class="text-xs text-gray-200 truncate">by {{ author }}</p>
@@ -38,7 +38,7 @@ export default {
 <style>
 .searchCardContent {
   width: calc(100% - 80px);
-  height: calc(40px * 1.5);
+  height: calc(50px * 1.5);
   display: flex;
   flex-direction: column;
   justify-content: center;

client/components/cards/AuthorSearchCard.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <img src="https://rpgplanner.com/wp-content/uploads/2020/06/no-photo-available.png" class="w-40 h-40 max-h-40 object-contain" style="max-height: 40px; max-width: 40px" />
+    <div class="flex-grow px-2 authorSearchCardContent h-full">
+      <p class="truncate text-sm">{{ author }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    author: String
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.searchCardContent {
+  width: calc(100% - 80px);
+  height: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>

client/components/cards/PreviewCover.vue

@@ -1,10 +1,14 @@
 <template>
-  <div class="relative rounded-sm overflow-hidden" :style="{ height: width * 1.6 + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
+  <div class="relative rounded-sm overflow-hidden" :style="{ height: width * 1.6 + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }" @mouseover="isHovering = true" @mouseleave="isHovering = false">
     <div class="w-full h-full relative">
       <div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
         <div class="w-full h-full z-0" ref="coverBg" />
       </div>
       <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
+
+      <a v-if="!imageFailed && showOpenNewTab && isHovering" :href="cover" @click.stop target="_blank" class="absolute bg-primary flex items-center justify-center shadow-sm rounded-full hover:scale-110 transform duration-100" :style="{ top: sizeMultiplier * 0.5 + 'rem', right: sizeMultiplier * 0.5 + 'rem', width: 2.5 * sizeMultiplier + 'rem', height: 2.5 * sizeMultiplier + 'rem' }">
+        <span class="material-icons" :style="{ fontSize: sizeMultiplier * 1.75 + 'rem' }">open_in_new</span>
+      </a>
     </div>
 
     <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
@@ -23,12 +27,16 @@ export default {
     width: {
       type: Number,
       default: 120
-    }
+    },
+    showOpenNewTab: Boolean
   },
   data() {
     return {
       imageFailed: false,
-      showCoverBg: false
+      showCoverBg: false,
+      isHovering: false,
+      naturalHeight: 0,
+      naturalWidth: 0
     }
   },
   watch: {
@@ -60,6 +68,9 @@ export default {
     imageLoaded() {
       if (this.$refs.cover) {
         var { naturalWidth, naturalHeight } = this.$refs.cover
+        this.naturalHeight = naturalHeight
+        this.naturalWidth = naturalWidth
+
         var aspectRatio = naturalHeight / naturalWidth
         var arDiff = Math.abs(aspectRatio - 1.6)
 

client/components/cards/SeriesSearchCard.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex h-full px-1 overflow-hidden">
+    <cards-group-cover :name="series" :book-items="bookItems" :width="60" :height="60" />
+    <div class="flex-grow px-2 seriesSearchCardContent h-full">
+      <p class="truncate text-sm">{{ series }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    series: String,
+    bookItems: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {},
+  mounted() {}
+}
+</script>
+
+<style>
+.seriesSearchCardContent {
+  width: calc(100% - 80px);
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+</style>