v3.0.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "impresso-frontend",
-  "version": "3.0.1",
+  "version": "3.0.5",
   "description": "Frontend app for impresso project",
   "author": "impresso <[email protected]>",
   "contributors": [

src/components/TextReuseExplorerPage.vue

@@ -12,8 +12,8 @@
               <InfoButton name="text-reuse" class="ml-1" />
             </small>
           </h3>
-          <section class="text-serif TextReuseExplorerPage_summary">
-            <Ellipsis :initialHeight="60" :maxHeight="0">
+          <section class="TextReuseExplorerPage_summary">
+            <Ellipsis class="textbox-fancy text-serif" :initialHeight="60" :maxHeight="0">
               <span v-html="incipit" />
               <SearchQuerySummary
                 v-on:updated="summaryUpdatedHandler"
@@ -25,6 +25,7 @@
                 @item:click="handleAddToCollectionClick"
                 @create="handleAddToCollectionCreate"
                 :title="$t('addTrQueryResultsToCollection')"
+                right
               >
                 <template v-slot:empty>
                   <span class="text-muted d-block">{{ $t('no_collections_found') }}</span>

src/components/TheHeader.vue

@@ -91,7 +91,7 @@
         >
           <span>{{ $t('collections') }}</span>
         </b-nav-item>
-        <b-nav-item-dropdown
+        <b-dropdown
           v-if="user && jobs.length"
           right
           no-caret
@@ -110,16 +110,20 @@
               </b-badge>
             </transition>
           </template>
-          <div v-if="!jobs.length" class="text-center text-white p-4">
+          <template v-slot:button-icon>
+            <Icon name="chevron" :scale="0.75" :strokeWidth="2" />
+          </template>
+          <div v-if="!jobs.length" class="bg-dark text-center text-white p-4">
             {{ $t('no-jobs-yet') }}
           </div>
           <div v-else class="jobs-list">
             <div class="list">
               <job-item
                 :item="job"
-                class="job px-3 pb-2 mt-2 border-bottom border-dark"
+                class="job px-3 py-2 border-bottom"
                 v-for="(job, i) in jobs"
                 :key="i"
+                style="border-color: var(--clr-grey-200) !important"
               />
             </div>
             <div class="pt-2 pb-1 d-flex justify-content-center">
@@ -135,7 +139,7 @@
               />
             </div>
           </div>
-        </b-nav-item-dropdown>
+        </b-dropdown>
       </b-navbar-nav>
       <!-- user area -->
       <b-navbar-nav v-if="user" class="TheHeader__userArea mx-2">
@@ -667,6 +671,37 @@ export default defineComponent({
     white-space: nowrap;
   }
 }
+
+#TheHeader.bg-dark .dropdown .dropdown-menu {
+  border-color: transparent;
+  background-color: var(--clr-grey-100);
+  color: var(--impresso-color-paper);
+  border-top-left-radius: var(--impresso-border-radius-sm);
+}
+#TheHeader.bg-dark .dropdown .btn.dropdown-toggle {
+  display: flex;
+  align-items: center;
+  color: var(--impresso-color-paper);
+  border-color: transparent;
+  padding: 0 var(--spacing-2);
+}
+#TheHeader.bg-dark .dropdown .btn.dropdown-toggle:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+#TheHeader.bg-dark .dropdown .btn.dropdown-toggle:not(.disabled):hover,
+#TheHeader.bg-dark .dropdown .btn.dropdown-toggle:not(.disabled):focus {
+  background-color: var(--clr-grey-100);
+  border-radius: var(--impresso-border-radius-sm);
+  box-shadow: none;
+}
+#TheHeader.bg-dark .dropdown.show .btn.dropdown-toggle {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+#TheHeader.bg-dark .dropdown-toggle[aria-expanded='true'] {
+  border-bottom: 1px solid var(--clr-grey-100) !important;
+}
 </style>
 
 <i18n lang="json">
@@ -682,7 +717,6 @@ export default defineComponent({
     "label_search": "Search | Search* ({n} filter) | Search* ({n} filters)",
     "label_search_with_items": "Search | Search* ({n} filter, {items}) | Search* ({n} filters, {items})",
     "label_newspapers": "Newspapers",
-    "label_entities": "Entities",
     "label_explore": "explore...",
     "label_topics": "Topics",
     "label_entities": "Entities",

src/components/UserArea.vue

@@ -133,12 +133,15 @@ const userPicture = computed(() => {
 }
 .UserArea.bg-dark.dropdown .btn.dropdown-toggle:not(.disabled):hover,
 .UserArea.bg-dark.dropdown .btn.dropdown-toggle:not(.disabled):focus {
-  background-color: var(--clr-grey-100);
+  /* background-color: var(--clr-grey-100); */
+  border-radius: var(--impresso-border-radius-sm);
+  /* box-shadow: none; */
 }
-
-.UserArea.bg-dark .dropdown-toggle[aria-expanded='true'] {
-  border-bottom: 1px solid var(--clr-grey-100) !important;
+.UserArea.bg-dark.dropdown.show .btn.dropdown-toggle {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
 }
+
 .UserArea__userLabel,
 .UserArea__userLabel .user-fullname,
 .UserArea__userLabel .user-role {

src/components/modules/Pagination.vue

@@ -227,18 +227,19 @@ const goToLast = () => {
   background-color: var(--impresso-color-black);
 }
 .bg-dark .Pagination .pagination {
-  border: 1px solid var(--clr-white);
+  border: 1px solid var(--clr-grey-200);
   border-radius: var(--impresso-border-radius-xs);
   overflow: hidden;
 }
 .bg-dark .Pagination .pagination li.page-item > a,
 .bg-dark .Pagination .pagination li.page-item > .page-link {
   background-color: var(--impresso-color-black);
-  color: var(--clr-white);
-  border-color: var(--clr-white-rgba-20);
+  color: var(--clr-grey-400);
+  border-color: var(--clr-grey-400);
 }
 .bg-dark .Pagination .pagination li.page-item.active > .page-link {
-  background-color: var(--clr-white);
+  background-color: var(--clr-grey-400);
   color: var(--impresso-color-black);
+  border-color: var(--clr-grey-400) !important;
 }
 </style>

src/components/modules/SearchQuerySummary.vue

@@ -347,7 +347,6 @@ export default {
 
   span.item.newspaper,
   span.item.country {
-    color: black;
     font-family: var(--bs-font-serif);
     font-weight: bold;
     font-weight: var(--impresso-wght-bold);

src/components/modules/collections/AddToCollection.vue

@@ -6,9 +6,15 @@
     v-on:shown="() => (show = true)"
     v-on:hidden="() => (show = false)"
     :text="title"
+    :right="right"
   >
     <div v-if="!isLoggedIn" class="p-2 bg-light">
-      <b-button size="sm" class="w-100" variant="outline-primary" @click="$router.push({ name: 'login' })">
+      <b-button
+        size="sm"
+        class="w-100"
+        variant="outline-primary"
+        @click="$router.push({ name: 'login' })"
+      >
         {{ $t('login') }}
       </b-button>
     </div>
@@ -34,16 +40,15 @@
           or
         </slot> -->
         <!-- Using components -->
-        <div class="input-group input-group-sm p-3">
-
+        <div class="input-group input-group-sm sans p-3">
           <b-form-input v-model="q" placeholder="search collections ..."></b-form-input>
           <div class="input-group-append">
-            <b-button
-              variant="outline-secondary"
+            <button
+              class="btn btn-outline-secondary small btn-sm"
               @click="() => $emit('create', { name: q })"
-              size="sm"
-              >{{ $t('actions.create') }}</b-button
             >
+              {{ $t('actions.create') }}
+            </button>
           </div>
         </div>
       </template>
@@ -54,7 +59,7 @@
           :key="item.uid"
           @click="() => $emit('item:click', item)"
         >
-          <span class="mr-1 text-muted">{{ i + 1 }} of {{ total }}</span>
+          <span class="mr-1 text-muted sans">{{ i + 1 }} of {{ total }}</span>
           <ItemLabel type="collection" :item="item" />
         </div>
         <div v-if="isLoading" class="text-center p-3">
@@ -85,13 +90,17 @@ export default {
   name: 'AddToCollection',
   components: {
     List,
-    ItemLabel,
+    ItemLabel
   },
   props: {
     title: {
       type: String,
-      required: true,
+      required: true
     },
+    right: {
+      type: Boolean,
+      default: false
+    }
   },
   emits: ['item:click', 'create'],
   data() {
@@ -104,7 +113,7 @@ export default {
       q: '',
       total: -1,
       collections: [],
-      isLoading: false,
+      isLoading: false
     }
   },
   computed: {
@@ -116,34 +125,31 @@ export default {
       return {
         currentPage: this.paginationCurrentPage,
         perPage: this.paginationPerPage,
-        totalRows: this.total,
+        totalRows: this.total
       }
     },
     searchApiQueryParameters() {
       if (!this.show) {
         return {
           query: {},
-          hash: '',
+          hash: ''
         }
       }
       const query = {
         offset: this.paginationPerPage * (this.paginationCurrentPage - 1),
         page: this.paginationCurrentPage,
         limit: this.paginationPerPage,
         orderBy: this.orderBy,
-        q: this.q,
+        q: this.q
       }
       return {
         query,
-        hash: JSON.stringify(query)
-          .split('')
-          .sort()
-          .join(''),
+        hash: JSON.stringify(query).split('').sort().join('')
       }
-    },
+    }
   },
   methods: {
-    loadCollections() {},
+    loadCollections() {}
   },
   watch: {
     searchApiQueryParameters: {
@@ -152,7 +158,7 @@ export default {
         if (!this.show || !this.isLoggedIn) {
           // eslint-disable-next-line
           console.debug(
-            '[AddToCollection] @searchApiQueryParameters \n cannot be loaded now.... not loggedin or dialog not shown',
+            '[AddToCollection] @searchApiQueryParameters \n cannot be loaded now.... not loggedin or dialog not shown'
           )
           return
         }
@@ -178,57 +184,47 @@ export default {
               creationDate: d.creation_date,
               lastModifiedDate: d.last_modified_date,
               countArticles: d.count_articles,
-              ...d,
-            }),
+              ...d
+            })
         )
         this.total = total
         this.isPristine = false
       },
-      immediate: false,
-    },
-  },
+      immediate: false
+    }
+  }
 }
 </script>
-<style lang="scss">
-.AddToCollection {
-  .dropdown-menu {
-    min-width: 300px;
-  }
-  h2 {
-    font-size: inherit;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-    font-family: var(--font-family-heading);
-  }
-
-  .items {
-    height: 200px;
-
-    overflow: scroll;
-  }
+<style lang="css">
+.AddToCollection .dropdown-menu {
+  min-width: 300px;
+}
+.AddToCollection .items {
+  max-height: 50vh;
+  overflow: scroll;
 }
 .AddToCollection_item {
   display: block;
   padding: var(--spacing-2) var(--spacing-3);
-
   border-bottom: 1px solid;
-  &:hover {
-    background-color: var(--primary);
-    color: var(--white);
-  }
+  cursor: pointer;
+}
+.AddToCollection_item:hover {
+  background-color: var(--clr-grey-100);
+  color: var(--white);
+}
 
-  &:hover .text-muted {
-    color: var(--white);
-  }
+.AddToCollection_item:hover .text-muted {
+  color: var(--clr-grey-700) !important;
 }
 </style>
 <i18n lang="json">
-  {
-    "en": {
-      "no_collections_found": "No collections found",
-      "actions": {
-        "create": "new..."
-      }
+{
+  "en": {
+    "no_collections_found": "No collections found",
+    "actions": {
+      "create": "new..."
     }
   }
+}
 </i18n>