fix: ellipsis on book card

bayang · Jan 27, 2022 · 0197911 · 0197911
1 parent 4515285
commit 0197911
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 5 deletions.
diff --git a/src/jelu-ui/package-lock.json b/src/jelu-ui/package-lock.json
diff --git a/src/jelu-ui/package.json b/src/jelu-ui/package.json
@@ -22,6 +22,7 @@
     "v-tooltip": "^4.0.0-beta.8",
     "vue": "^3.2.16",
     "vue-router": "^4.0.12",
+    "vue-snip": "^1.3.0",
     "vue3-carousel": "^0.1.35",
     "vuex": "^4.0.2"
   },

diff --git a/src/jelu-ui/src/components/BookCard.vue b/src/jelu-ui/src/components/BookCard.vue
@@ -76,16 +76,22 @@ const showProgressBar = (book: UserBook) => {
       />
     </div>
     <header class="card-header">
-      <p class="p-3 card-header-title is-capitalized is-family-sans-serif is-ellipsis">
+      <p
+        v-snip:js="4" 
+        class="p-3 card-header-title is-capitalized is-family-sans-serif"
+      >
         {{ book.book.title }}
       </p>
     </header>
     <div class="card-content has-text-dark py-2">
       <div class="content has-text-left m-0">
-        <span
+        <p
           v-if="book.book.authors != null && book.book.authors.length > 0"
+          v-snip:js="3"
           class="is-inline-block"
-        >{{ authorsText }}</span>
+        >
+          {{ authorsText }}
+        </p>
       </div>
       <footer class="card-footer">
         <div>

diff --git a/src/jelu-ui/src/main.ts b/src/jelu-ui/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import VTooltipPlugin from 'v-tooltip'
+import VueSnip from 'vue-snip'
 import Oruga from '@oruga-ui/oruga-next'
 // import '@oruga-ui/oruga-next/dist/oruga.css'
 
@@ -19,6 +20,7 @@ createApp(App)
     .use(router)
     .use(store, key)
     .use(VTooltipPlugin)
+    .use(VueSnip)
     .use(Oruga, {
         iconPack: 'mdi',
         ...bulmaConfig