Fix/search page ux errors (#1271)

* remove generic click on searhc result item

* fix style of collection list

* add loaders

* fix click area around the image

src/components/IIIFFragment.vue

@@ -1,16 +1,20 @@
 <template>
   <div class="IIIFFragment">
-    <figure @click="e => $emit('click', e)" class="position-relative IIIFFragment overflow-hidden">
+    <figure class="position-relative IIIFFragment overflow-hidden">
       <img
         class="shadow-sm"
         :src="computedImageUrl"
         :alt="isNotFound ? 'Image not available' : ''"
         :style="{
           transform: `scale(${scale})`,
-          'transform-origin': 'left top',
+          'transform-origin': 'left top'
         }"
       />
-      <div class="IIIFFragment__regions" :style="computedRegionsStyle">
+      <div
+        class="IIIFFragment__regions"
+        :style="computedRegionsStyle"
+        @click="e => $emit('selected', e)"
+      >
         <div
           v-for="region in computedRegions"
           :key="region.id"
@@ -19,7 +23,7 @@
             top: `${region.y}%`,
             left: `${region.x}%`,
             width: `${region.w}%`,
-            height: `${region.h}%`,
+            height: `${region.h}%`
           }"
         ></div>
       </div>
@@ -44,46 +48,46 @@ export default defineComponent({
       image: null,
       isLoaded: false,
       isNotFound: false,
-      errorMessage: null,
+      errorMessage: null
     }
   },
   props: {
     iiif: {
       // IIIF root URL
       type: String,
-      required: true,
+      required: true
     },
     fitToRegions: {
       // IIIF size parameter
       type: Boolean,
-      default: false,
+      default: false
     },
     size: {
       // IIIF size parameter
       type: String,
-      default: 'max',
+      default: 'max'
     },
     scale: {
       // scale down size parameter when printing image
       type: Number,
-      default: 1,
+      default: 1
     },
     coords: {
       // IIIF size parameter
-      type: Object,
+      type: Object
     },
     regions: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     matches: {
       type: Array,
-      default: () => [],
+      default: () => []
     },
     coordMinArea: {
       type: Number,
-      default: 250 * 250,
-    },
+      default: 250 * 250
+    }
   },
   computed: {
     computedImageUrl() {
@@ -109,7 +113,7 @@ export default defineComponent({
         height: `${this.imageHeight}px`,
         opacity: this.isLoaded ? 1 : 0,
         transform: `scale(${this.scale})`,
-        'transform-origin': 'left top',
+        'transform-origin': 'left top'
       }
     },
     computedRegions() {
@@ -123,7 +127,7 @@ export default defineComponent({
             x: ((x - offsets.x) / offsets.w) * 100,
             y: ((y - offsets.y) / offsets.h) * 100,
             w: (w / offsets.w) * 100,
-            h: (h / offsets.h) * 100,
+            h: (h / offsets.h) * 100
           }
         }
 
@@ -132,10 +136,10 @@ export default defineComponent({
           x: (x / this.width) * 100,
           y: (y / this.height) * 100,
           w: (w / this.width) * 100,
-          h: (h / this.height) * 100,
+          h: (h / this.height) * 100
         }
       })
-    },
+    }
   },
   methods: {
     getCoordsFromArticleRegions() {
@@ -162,7 +166,7 @@ export default defineComponent({
         x: x0,
         y: y0,
         w: x1 - x0,
-        h: y1 - y0,
+        h: y1 - y0
       }
     },
     async getIIIFInfo() {
@@ -195,23 +199,26 @@ export default defineComponent({
             iiif,
             '\nerror:',
             error.message,
-            error,
+            error
           )
           this.isLoaded = false
           this.isNotFound = true
           return 'not found'
         })
       console.info('[IIIFFragment] \n - iiif:', iiif, '\n - status:', status)
-    },
+    }
   },
 
   mounted() {
     this.getIIIFInfo()
     // load iiiif info.json
-  },
+  }
 })
 </script>
 <style type="text/css">
+.IIIFFragment {
+  cursor: auto;
+}
 .IIIFFragment img {
   border: 1px solid #8e8e8e !important;
 }
@@ -221,6 +228,7 @@ export default defineComponent({
   left: 0;
   transition: opacity 0.2s ease-in-out;
   z-index: 1;
+  cursor: pointer;
 }
 .IIIFFragment__region {
   position: absolute;

src/components/modules/CollectionAddToList.vue

@@ -4,7 +4,7 @@
       <div class="input-group">
         <input
           type="text"
-          class="form-control"
+          class="form-control form-control-sm"
           v-bind:placeholder="$t('placeholder')"
           v-on:input="onInput"
           v-on:keyup.enter="addCollection(inputString.trim())"
@@ -32,16 +32,16 @@
         {{ newCollectionError }}
       </div>
     </div>
-    <ul class="p-2">
+    <ul class="p-0">
       <li v-if="!Object.keys(this.collections).length">
         <i-spinner class="text-center p-5" />
       </li>
       <li
         v-for="(collection, index) in filteredCollections"
         v-bind:key="index"
-        class="py-2"
+        class="py-1"
         :class="{
-          active: isActive(collection),
+          active: isActive(collection)
         }"
       >
         <input
@@ -58,9 +58,9 @@
           v-on:click="toggleActive(collection, $event)"
           for="collection.uid"
         >
-          <span>{{ collection.name }}</span>
+          <b>{{ collection.name }}</b>
           <br />
-          <span class="description text-muted" :title="$t('last_edited')">
+          <span class="description text-muted small" :title="$t('last_edited')">
             {{ collection.lastModifiedDate.toString().substring(0, 15) }}</span
           >
         </label>
@@ -79,11 +79,11 @@ export default {
     show: false,
     isDisabled: true,
     inputString: '',
-    newCollectionError: '',
+    newCollectionError: ''
   }),
   props: {
     item: Object,
-    items: Array,
+    items: Array
   },
   updated() {
     this.focusInput()
@@ -99,8 +99,8 @@ export default {
     collections: {
       get() {
         return this.collectionsStore.collections
-      },
-    },
+      }
+    }
   },
   methods: {
     fetch() {
@@ -147,34 +147,39 @@ export default {
 
       if (!checked) {
         // add items to collection
-        this.collectionsStore.addCollectionItems({
-          items: itemsFiltered,
-          collection,
-          contentType: 'article',
-        }).then(() => {
-          itemsFiltered.forEach(item => {
-            item.collections.push(collection)
+        this.collectionsStore
+          .addCollectionItems({
+            items: itemsFiltered,
+            collection,
+            contentType: 'article'
+          })
+          .then(() => {
+            itemsFiltered.forEach(item => {
+              item.collections.push(collection)
+            })
           })
-        })
       } else {
         // remove items from collection
-        this.collectionsStore.removeCollectionItems({
-          items: itemsFiltered,
-          collection,
-          contentType: 'article',
-        }).then(() => {
-          itemsFiltered.forEach(item => {
-            const idx = item.collections.findIndex(c => c.uid === collection.uid)
-            item.collections.splice(idx, 1)
+        this.collectionsStore
+          .removeCollectionItems({
+            items: itemsFiltered,
+            collection,
+            contentType: 'article'
+          })
+          .then(() => {
+            itemsFiltered.forEach(item => {
+              const idx = item.collections.findIndex(c => c.uid === collection.uid)
+              item.collections.splice(idx, 1)
+            })
           })
-        })
       } // end remove items from collection
     },
     addCollection(collectionName) {
       if (this.isDisabled) {
         return
       }
-      this.collectionsStore.addCollection({ name: collectionName })
+      this.collectionsStore
+        .addCollection({ name: collectionName })
         .then(collection => {
           this.toggleActive(collection)
           this.inputString = ''
@@ -192,8 +197,8 @@ export default {
     },
     isLoggedIn() {
       return this.userStore.userData
-    },
-  },
+    }
+  }
 }
 </script>
 
@@ -214,8 +219,9 @@ export default {
 .CollectionAddToList ul li {
   position: relative;
   padding-inline-start: var(--checkmark-width);
-  border-radius: var(--impresso-border-radius-xs);
-  margin-bottom: var(--spacing-2);
+  border-radius: 0;
+  margin-bottom: 0;
+  border-bottom: 1px solid var(--clr-grey-200-rgba-20);
 }
 .CollectionAddToList ul li label {
   font-variant: normal !important;
@@ -237,8 +243,8 @@ export default {
   text-align: center;
 }
 .CollectionAddToList ul li.active {
-  box-shadow: var(--bs-box-shadow-sm);
-  border: 1px solid var(--clr-grey-200-rgba-20);
+  // box-shadow: var(--bs-box-shadow-sm);
+  background-color: var(--clr-grey-200-rgba-20);
   padding-inline-start: var(--checkmark-width);
 }
 .CollectionAddToList ul li label .description {