fix #1441

see also #1419

Author: danieleguido

src/components/IssueViewerTableOfContents.vue

@@ -1,24 +1,31 @@
 <template>
   <div class="issue-viewer-table-of-contents">
-    <div v-for="(item, i) in items" :key="i"
+    <div
+      v-for="(item, i) in items"
+      :key="i"
       class="border-bottom"
       @click="$emit('article-selected', item)"
     >
       <table-of-contents-item
         :ref="`toc-article-${item.uid}`"
         :item="item"
         :headers="headers"
-        :active="item.uid === selectedArticleId">
-        <template v-slot:actions>
-          <div class="border-top border-bottom py-1 my-2">
-            <span class="small">{{$t('label_continue_reading')}}</span>
-            <a class="small-caps" :class="{
-              'font-weight-bold': item.uid === selectedArticleId
-            }" @click="$emit('click-full-text', item.uid)">
+        :active="item.uid === selectedArticleId"
+      >
+        <!-- <template v-slot:actions>
+          <div>
+            <span class="small">{{ $t('label_continue_reading') }}</span>
+            <a
+              class="small-caps"
+              :class="{
+                'font-weight-bold': item.uid === selectedArticleId
+              }"
+              @click="$emit('click-full-text', item.uid)"
+            >
               {{ $t('closeReadingView') }}
             </a>
           </div>
-        </template>
+        </template> -->
       </table-of-contents-item>
     </div>
   </div>
@@ -29,46 +36,46 @@ import TableOfContentsItem from '@/components/modules/lists/TableOfContentsItem.
 
 export default {
   data: () => ({
-    scrollTocToArticleTimer: 0,
+    scrollTocToArticleTimer: 0
   }),
   props: {
     headers: {
       type: Object,
-      default: () => {},
+      default: () => {}
     },
     selectedArticleId: String,
     items: {
       type: Array,
-      default: () => [],
+      default: () => []
     }
   },
   components: {
-    TableOfContentsItem,
+    TableOfContentsItem
   },
   methods: {
     /** @param {string} articleId */
     scrollTocToArticle(articleId) {
       const articleComponent = (this.$refs[`toc-article-${articleId}`] ?? [])[0]
       if (articleComponent == null) {
-        console.warn('scrollTocToArticle: ',articleId, 'DOM not ready yet.')
+        console.warn('scrollTocToArticle: ', articleId, 'DOM not ready yet.')
         clearTimeout(this.scrollTocToArticleTimer)
         this.scrollTocToArticleTimer = setTimeout(() => this.scrollTocToArticle(articleId), 500)
-        return;
+        return
       }
       const articleElement = articleComponent.$el
       const container = this.$el.parentNode.parentNode
 
       const relativeTop = articleElement.offsetTop - container.offsetTop
       container.scrollTo({ top: relativeTop - 1, behavior: 'smooth' })
-    },
+    }
   },
   watch: {
     /** @param {string} id */
     selectedArticleId: {
       handler(id) {
-        this.scrollTocToArticle(id);
+        this.scrollTocToArticle(id)
       },
-      immediate: true,
+      immediate: true
     }
   }
 }
@@ -81,5 +88,4 @@ export default {
   }
 }
 </i18n>
-<style lang="css" scoped>
-</style>
+<style lang="css" scoped></style>

src/components/modules/lists/ArticleItem.vue

@@ -27,22 +27,21 @@
         />
       </div>
     </div>
-
+    <div class="article-meta">
+      <span v-if="showType && !showMeta">{{ $t(`buckets.type.${item.type}`) }}</span>
+      <span v-if="showPages && !showMeta"> – {{ pages }} </span>
+    </div>
     <div
       v-if="showExcerpt && !item?.matches?.length && item.type !== 'image'"
       class="article-excerpt mt-2"
     >
-      <span class="article-excerpt">{{ item.excerpt }}</span>
-      <b-badge v-if="showSize || showType" variant="light" class="mr-1 pt-1">
-        <span v-if="showType && item.type">{{ $t(`buckets.type.${item.type}`) }} | </span>
-        <span v-if="showSize">
-          <span v-if="item.size > 1200">{{
-            $t('readingTime', { min: parseInt(item.size / 1200) })
-          }}</span>
-          <span v-else>{{ $t('reducedReadingTime') }}</span>
-        </span>
+      <blockquote class="text-muted">{{ item.excerpt }}</blockquote>
+      <b-badge v-if="showSize" variant="light" class="mr-1 pt-1">
+        <span v-if="item.size > 1200">{{
+          $t('readingTime', { min: parseInt(item.size / 1200) })
+        }}</span>
+        <span v-else>{{ $t('reducedReadingTime') }}</span>
       </b-badge>
-      <span v-if="showPages">{{ pages }}</span>
     </div>
 
     <slot name="actions"></slot>

src/components/modules/lists/TableOfContentsItem.vue

@@ -1,40 +1,36 @@
 <template>
   <div class="TableOfContentsItem">
-  <div :class="{ media: true, active }">
-    <div class="media-body">
-      <article-item :item="item" class="p-3 clearfix"
-        show-excerpt
-        show-entities
-        show-size
-        show-pages
-        show-matches
-        show-type>
-        <template v-slot:title>
-          <h2 style="font-weight: bold;">
-            {{item.title}}
-          </h2>
-        </template>
-        <template v-slot:actions>
-          <slot name="actions"></slot>
-        </template>
-      </article-item>
-      <div v-bind:key="i" v-for="(image, i) in item.images">
-        <image-item
-          :height="200"
-          class="mx-3 mb-2"
-          :item="image"
-          :headers="headers"
-        />
-        <div class=" ml-3 mb-3">
-          <router-link class="btn btn-outline-secondary btn-sm "
-            :to="getSimilarImagesHref(image)">
-            get similar images
-          </router-link>
+    <div :class="{ media: true, active }">
+      <div class="media-body">
+        <article-item
+          :item="item"
+          class="p-3 clearfix"
+          show-excerpt
+          show-entities
+          show-pages
+          show-matches
+          show-type
+        >
+          <template v-slot:title>
+            <h2 class="font-weight-bold text-decoration-underline">
+              {{ item.title }}
+            </h2>
+          </template>
+          <template v-slot:actions>
+            <slot name="actions"></slot>
+          </template>
+        </article-item>
+        <div v-bind:key="i" v-for="(image, i) in item.images">
+          <image-item :height="200" class="mx-3 mb-2" :item="image" :headers="headers" />
+          <div class="ml-3 mb-3">
+            <router-link class="btn btn-outline-secondary btn-sm" :to="getSimilarImagesHref(image)">
+              get similar images
+            </router-link>
+          </div>
         </div>
       </div>
     </div>
   </div>
-  </div>
 </template>
 
 <script>
@@ -47,28 +43,26 @@ export default {
     item: Object,
     headers: {}
   },
-  methods:{
+  methods: {
     getSimilarImagesHref(image) {
       return `/search/images?p=1&similarTo=${image.uid}`
     }
   },
   components: {
     ArticleItem,
-    ImageItem,
+    ImageItem
   }
 }
 </script>
 
 <style lang="scss">
-.TableOfContentsItem{
-  h2{
+.TableOfContentsItem {
+  h2 {
     font-size: 1.1em;
   }
-  .active{
+  .active {
     box-shadow: inset 0.15em 0 #343a40;
     background-color: #f2f2f2;
-
-
   }
 }
 </style>