v2.11.0

README.md

@@ -4,7 +4,7 @@ Welcome to the _impresso_ app frontend website to search, explore and create per
 
 ## Install for development
 
-This is a website that uses vue2 framework build in **node v17** and **is not compatible with node v18**. We provide a dockerfile-dev which points to the right node version to use. Alternatively, you can use `nvm install 17` and then install all dependencies 
+This is a website that uses vue2 framework build in **node v17** and **is not compatible with node v18**. We provide a dockerfile-dev which points to the right node version to use. Alternatively, you can use `nvm install 17` and then install all dependencies
 
 with `--openssl-legacy-provider` option
 
@@ -20,14 +20,18 @@ VUE_APP_MIDDLELAYER_API_PATH="/api"
 VUE_APP_MIDDLELAYER_API_SOCKET_PATH="/api/socket.io"
 ```
 
-FInally run with:
+To use vue proxy while developing, add this env variable to your `.env.development.local` file:
 
+```sh
+VUE_APP_USE_PROXY_MIDDLEWARE=true
+```
+
+Finally run with:
 
 ```
 NODE_OPTIONS=--openssl-legacy-provider npm start
 ```
 
-
 ### Use docker stack for development (node v12)
 
 We provide a Dockerfile-dev to streamline node 12 installation with now unsupported modules.

package.json

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

src/App.vue

@@ -199,9 +199,12 @@ $clr-grey-900: #ddd;
   --impresso-border-radius-lg: 20px;
   --impresso-border-radius-xl: 30px;
   --impresso-font-size-smallcaps: 0.72em;
-  --impresso-letter-spacing-smallcaps: 0.85px;
+  --impresso-letter-spacing-smallcaps: 0.08em;
   --impresso-font-size-smaller: 0.85em;
+  --impresso-wght: 450;
+  --impresso-wght-bold: 700;
   --impresso-wght-smallcaps: 580;
+  --impresso-wght-smallcaps-bold: 800;
   --clr-white: #f8f8ff;
   --clr-white-rgba-20: #ffffff33;
   --clr-dark: var(--impresso-color-black);
@@ -456,7 +459,7 @@ label {
     height: 100%;
     pointer-events: none;
     &.locked {
-      background: rgba($clr-primary, 0.25);
+      background: rgba(var(--impresso-color-black), 0.25);
       pointer-events: auto;
     }
   }
@@ -500,31 +503,33 @@ svg {
 }
 
 ul.nav.nav-pills {
-  border-bottom: 1px solid $clr-tertiary;
+  border-bottom: 1px solid var(--clr-grey-200);
 }
+ul.nav.nav-pills .nav-item .nav-link {
+  background-color: transparent;
+  font-variant: normal;
+  letter-spacing: var(--impresso-letter-spacing-smallcaps);
+  text-transform: uppercase;
+  font-size: var(--impresso-font-size-smallcaps);
+  font-weight: var(--impresso-wght-smallcaps);
+  font-variation-settings: 'wght' var(--impresso-wght-smallcaps);
+  border-bottom: 1px solid transparent;
+}
+ul.nav.nav-pills .nav-item.active .nav-link,
+ul.nav.nav-pills .nav-item .nav-link.active {
+  color: var(--impresso-color-black);
 
+  font-weight: var(--impresso-wght-smallcaps-bold);
+  font-variation-settings: 'wght' var(--impresso-wght-smallcaps-bold);
+  box-shadow: var(--clr-grey-200) 0px 2px 0px 0px, var(--clr-grey-200) 0px 2px 0px 0px;
+  border-bottom: 1px solid var(--clr-grey-200);
+}
 ul.nav.nav-pills .nav-item {
-  .nav-link {
-    background-color: transparent;
-    font-variant: normal;
-    letter-spacing: var(--impresso-letter-spacing-smallcaps);
-    text-transform: uppercase;
-    font-size: var(--impresso-font-size-smallcaps);
-    font-weight: var(--impresso-wght-smallcaps);
-    font-variation-settings: 'wght' var(--impresso-wght-smallcaps);
-  }
-  &.active .nav-link,
-  .nav-link.active {
-    color: $clr-primary;
-    font-weight: bold;
-    /** box shadow that looks like a border bottom solid  */
-    box-shadow: 0 2px 0px -1px $clr-primary; // 0 2px 0 -1px $clr-primary inset;
-  }
   // hover
   &:hover .nav-link {
-    color: $clr-primary;
+    color: var(--impresso-color-black);
     /** box shadow that looks like a border bottom solid  */
-    box-shadow: 0 2px 0px -1px $clr-primary;
+    box-shadow: var(--impresso-color-black) 0px 2px 0px 0px;
   }
 }
 
@@ -603,7 +608,7 @@ ul.nav.nav-pills .nav-item {
 }
 
 .border-primary {
-  border-color: $clr-primary !important;
+  border-color: var(--impresso-color-black) !important;
 }
 
 .border-tertiary {
@@ -615,7 +620,7 @@ ul.nav.nav-pills .nav-item {
 }
 
 .bg-primary {
-  background-color: $clr-primary;
+  background-color: var(--impresso-color-black);
   color: $clr-white;
 }
 
@@ -678,7 +683,7 @@ ul.nav.nav-pills .nav-item {
 .bg-dark .btn-primary {
   background-color: white;
   color: black;
-  border: 1px solid $clr-primary;
+  border: 1px solid var(--impresso-color-black);
 }
 // .btn-outline-primary:hover {
 //   color: $clr-dark;
@@ -697,7 +702,7 @@ ul.nav.nav-pills .nav-item {
 }
 @mixin slider-dot {
   // border-radius: 50%;
-  background-color: $clr-primary; // $clr-bg-primary ;
+  background-color: var(--impresso-color-black); // $clr-bg-primary ;
   // border: 1px solid black ;
   box-shadow: none;
 }
@@ -769,16 +774,16 @@ input[type='range']:active::-ms-thumb {
 }
 
 .vue-slider .vue-slider-process {
-  background-color: $clr-primary;
+  background-color: var(--impresso-color-black);
   box-shadow: 0px 0px 0 6px rgba(0, 0, 0, 0.1);
   height: 2px !important;
   margin-top: 0px;
   border-radius: 1px;
 }
 
 .vue-slider .vue-slider-dot-tooltip-inner {
-  border-color: $clr-primary;
-  background-color: $clr-primary;
+  border-color: var(--impresso-color-black);
+  background-color: var(--impresso-color-black);
   padding: 0px 5px 2px 5px;
   border-radius: 1px;
 }
@@ -805,7 +810,7 @@ input[type='range']:active::-ms-thumb {
     bottom: 0px;
     width: 1px;
     height: 1px;
-    background-color: $clr-primary;
+    background-color: var(--impresso-color-black);
     z-index: 1002;
   }
   .dropdown.show::after {
@@ -854,7 +859,6 @@ input[type='range']:active::-ms-thumb {
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  background: transparentize($clr-primary, 0.8);
   max-width: 100%;
 
   .pagination {
@@ -881,7 +885,7 @@ input[type='range']:active::-ms-thumb {
   .page-link:hover,
   .page-item.active .page-link {
     background: $clr-bg-primary;
-    color: $clr-primary;
+    color: var(--impresso-color-black);
     border-color: $clr-bg-primary !important;
   }
 }
@@ -897,7 +901,7 @@ input[type='range']:active::-ms-thumb {
   color: inherit; // $clr-tertiary;
 }
 .icon-link:hover {
-  color: $clr-primary;
+  color: var(--impresso-color-black);
 }
 
 .overlay-region {
@@ -924,10 +928,6 @@ input[type='range']:active::-ms-thumb {
 }
 
 .matches {
-  span {
-    color: transparentize($clr-primary, 0.45);
-    background: transparentize($clr-primary, 0.94);
-  }
   em {
     background: gold;
     color: black;
@@ -980,7 +980,7 @@ input[type='range']:active::-ms-thumb {
 //   left: -25%;
 //   right: -25%;
 //   top: 0;
-//   background-color: transparentize($clr-primary, 0.3);
+//   background-color: transparentize(var(--impresso-color-black), 0.3);
 // }
 /* bounce animation */
 .bounce-enter-active {

src/components/HomePage2020.vue

@@ -66,9 +66,9 @@
               src="@/assets/img/Twitter_Logo_WhiteOnImage.png"
               class="mr-2"
               style="max-height: 1em"
-              alt="X (former witter) icon"
+              alt="X (former Twitter) icon"
             />
-            X (former witter):
+            X (former Twitter):
             <a href="https://twitter.com/ImpressoProject" target="_blank">@impressoproject</a>
           </p>
           <p>
@@ -142,7 +142,7 @@
 
         <div class="HomePage__card">
           <h3>
-            Try the Impresso Challenges
+            Learn Impresso with the Impresso Challenges
           </h3>
           <p>
             How to explore the newspapers with persons or locations? <br />What are topics good for?

src/components/IIIFFragment.vue

@@ -5,6 +5,10 @@
         class="shadow-sm"
         :src="computedImageUrl"
         :alt="isNotFound ? 'Image not available' : ''"
+        :style="{
+          transform: `scale(${scale})`,
+          'transform-origin': 'left top',
+        }"
       />
       <div class="IIIFFragment__regions" :style="computedRegionsStyle">
         <div
@@ -59,6 +63,11 @@ export default defineComponent({
       type: String,
       default: 'max',
     },
+    scale: {
+      // scale down size parameter when printing image
+      type: Number,
+      default: 1,
+    },
     coords: {
       // IIIF size parameter
       type: Object,
@@ -99,6 +108,8 @@ export default defineComponent({
         width: `${this.imageWidth}px`,
         height: `${this.imageHeight}px`,
         opacity: this.isLoaded ? 1 : 0,
+        transform: `scale(${this.scale})`,
+        'transform-origin': 'left top',
       }
     },
     computedRegions() {

src/components/SelectionMonitor.vue

@@ -38,7 +38,7 @@
         />
         <h2 class="mx-3" v-if="monitor.item">
           <ItemLabel :item="monitor.item" :type="monitor.type" />
-          <span class="small-caps pl-2">{{ $t('types_' + monitor.type) }}</span>
+          <!-- <span class="small-caps pl-2">{{ $t('types_' + monitor.type) }}</span> -->
         </h2>
 
         <!-- end title -->

src/components/TextReuseExplorerPage.vue

@@ -10,14 +10,15 @@
             <span>{{ $t('routes.' + $route.name) }}</span>
             <small><InfoButton name="text-reuse" class="ml-1"/></small>
           </h3>
-          <section class="text-serif TextReuseExplorerPage_summary">
-            <div>
+          <section class="text-serif  TextReuseExplorerPage_summary">
+            <Ellipsis :initialHeight="60" :maxHeight="0">
               <span v-html="incipit" />
               <SearchQuerySummary
+                class="textbox-fancy"
                 v-on:updated="summaryUpdatedHandler"
                 :search-query="{ filters: supportedFiltersWithItems }"
               />
-            </div>
+            </Ellipsis>
             <div class="ml-2">
               <AddToCollection
                 @item:click="handleAddToCollectionClick"
@@ -218,6 +219,7 @@
 
 <script>
 import InfoButton from '@/components/base/InfoButton'
+import Ellipsis from '@/components/modules/Ellipsis'
 import List from '@/components/modules/lists/List'
 import ClusterItem from '@/components/modules/lists/ClusterItem'
 import SearchQuerySummary from '@/components/modules/SearchQuerySummary'
@@ -254,6 +256,7 @@ const OrderByOptions = [
 export default {
   components: {
     ClusterItem,
+    Ellipsis,
     TextReusePassageItem,
     InfoButton,
     List,

src/components/TextReusePassageMonitor.vue

@@ -99,6 +99,7 @@ export default {
   }),
   methods: {
     async loadEndPassage({ query }) {
+      console.debug('[TextReusePassageMonitor] loadEndPassage', query)
       this.endPassageIsLoading = true
       await textReusePassages
         .find({ query })
@@ -128,12 +129,13 @@ export default {
         : [{ type: 'textReuseCluster', q: this.item.textReuseCluster.id }]
       filters.push({ type: 'id', q: this.item.id, context: 'exclude' })
       const query = {
-        page: this.endPassageOffset,
+        skip: parseInt(this.endPassageOffset, 10),
         limit: 1,
         orderBy: this.endPassageOrderBy,
         filters,
         addons: { newspaper: 'text' },
       }
+
       return {
         query,
         hash: JSON.stringify(query)

src/components/modules/Ellipsis.vue

@@ -17,6 +17,8 @@
 </template>
 
 <script>
+import { max } from 'd3'
+
 export default {
   name: 'Ellipsis',
   data: () => ({
@@ -82,7 +84,8 @@ export default {
         this.height =
           this.maxHeight !== 0
             ? Math.min(+this.$refs.contents.scrollHeight, this.maxHeight) + this.additionalHeight
-            : +this.$refs.contents.scrollHeight
+            : Math.min(+this.$refs.contents.scrollHeight, window.innerHeight / 2) +
+              this.additionalHeight
       }
     },
   },