fix(webui): better handling of the read-more expansion panel during page change

komga-webui/src/components/ReadMore.vue

@@ -1,5 +1,5 @@
 <template>
-  <vue-read-more-smooth no-shadow :lines="4">
+  <vue-read-more-smooth no-shadow :lines="4" :open.sync="open">
     <div style="white-space: pre-wrap" class="body-2">
       <slot/>
     </div>
@@ -19,8 +19,25 @@ import Vue from 'vue'
 
 export default Vue.extend({
   name: 'ReadMore',
-  components: { VueReadMoreSmooth },
+  components: {VueReadMoreSmooth},
+  data: () => {
+    return {
+      open: false,
+    }
+  },
+  watch: {
+    value(val) {
+      this.open = val
+    },
+    open(val) {
+      this.$emit('input', val)
+    },
+  },
   props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
     i18nMore: {
       type: String,
       default: 'read_more.more',

komga-webui/src/views/BrowseBook.vue

@@ -226,7 +226,7 @@
 
               <v-row v-if="book.metadata.summary">
                 <v-col>
-                  <read-more>{{ book.metadata.summary }}</read-more>
+                  <read-more v-model="readMore">{{ book.metadata.summary }}</read-more>
                 </v-col>
               </v-row>
             </template>
@@ -272,7 +272,7 @@
 
         <v-row v-if="book.metadata.summary">
           <v-col>
-            <read-more>{{ book.metadata.summary }}</read-more>
+            <read-more v-model="readMore">{{ book.metadata.summary }}</read-more>
           </v-col>
         </v-row>
       </template>
@@ -487,6 +487,7 @@ export default Vue.extend({
       siblingPrevious: {} as BookDto,
       siblingNext: {} as BookDto,
       readLists: [] as ReadListDto[],
+      readMore: false,
     }
   },
   async created() {
@@ -518,6 +519,7 @@ export default Vue.extend({
   },
   async beforeRouteUpdate(to, from, next) {
     if (to.params.bookId !== from.params.bookId) {
+      this.readMore = false
       this.loadBook(to.params.bookId)
     }
 

komga-webui/src/views/BrowseOneshot.vue

@@ -249,7 +249,7 @@
 
               <v-row v-if="book.metadata.summary">
                 <v-col>
-                  <read-more>{{ book.metadata.summary }}</read-more>
+                  <read-more v-model="readMore">{{ book.metadata.summary }}</read-more>
                 </v-col>
               </v-row>
             </template>
@@ -295,7 +295,7 @@
 
         <v-row v-if="book.metadata.summary">
           <v-col>
-            <read-more>{{ book.metadata.summary }}</read-more>
+            <read-more v-model="readMore">{{ book.metadata.summary }}</read-more>
           </v-col>
         </v-row>
       </template>
@@ -609,6 +609,7 @@ export default Vue.extend({
       contextName: '',
       collections: [] as CollectionDto[],
       readLists: [] as ReadListDto[],
+      readMore: false,
     }
   },
   async created() {
@@ -650,6 +651,7 @@ export default Vue.extend({
   },
   async beforeRouteUpdate(to, from, next) {
     if (to.params.seriesId !== from.params.seriesId) {
+      this.readMore = false
       this.loadSeries(to.params.seriesId)
     }
 

komga-webui/src/views/BrowseSeries.vue

@@ -171,7 +171,12 @@
 
             <template v-if="$vuetify.breakpoint.smAndUp">
               <!-- Alternate titles  -->
-              <read-more class="mb-4" i18n-less="titles_more.less" i18n-more="titles_more.more">
+              <read-more v-model="readMoreTitles"
+                         class="mb-4"
+                         i18n-less="titles_more.less"
+                         i18n-more="titles_more.more"
+                         v-if="series.metadata.alternateTitles.length > 0"
+              >
                 <v-row v-for="(a, i) in series.metadata.alternateTitles"
                        :key="i"
                        class="align-center text-caption"
@@ -201,7 +206,7 @@
 
               <v-row v-if="series.metadata.summary">
                 <v-col>
-                  <read-more>{{ series.metadata.summary }}</read-more>
+                  <read-more v-model="readMore">{{ series.metadata.summary }}</read-more>
                 </v-col>
               </v-row>
 
@@ -215,7 +220,7 @@
                     </template>
                     {{ $t('browse_series.series_no_summary') }}
                   </v-tooltip>
-                  <read-more>{{ series.booksMetadata.summary }}</read-more>
+                  <read-more v-model="readMore">{{ series.booksMetadata.summary }}</read-more>
                 </v-col>
               </v-row>
             </template>
@@ -225,7 +230,12 @@
 
       <template v-if="$vuetify.breakpoint.xsOnly">
         <!-- Alternate titles  -->
-        <read-more class="mb-4" i18n-less="titles_more.less" i18n-more="titles_more.more">
+        <read-more v-model="readMoreTitles"
+                   class="mb-4"
+                   i18n-less="titles_more.less"
+                   i18n-more="titles_more.more"
+                   v-if="series.metadata.alternateTitles.length > 0"
+        >
           <v-row v-for="(a, i) in series.metadata.alternateTitles"
                  :key="i"
                  class="align-center text-caption"
@@ -259,7 +269,7 @@
         <!--   Series summary     -->
         <v-row v-if="series.metadata.summary">
           <v-col>
-            <read-more>{{ series.metadata.summary }}</read-more>
+            <read-more v-model="readMore">{{ series.metadata.summary }}</read-more>
           </v-col>
         </v-row>
 
@@ -274,7 +284,7 @@
               </template>
               {{ $t('browse_series.series_no_summary') }}
             </v-tooltip>
-            <read-more>{{ series.booksMetadata.summary }}</read-more>
+            <read-more v-model="readMore">{{ series.booksMetadata.summary }}</read-more>
           </v-col>
         </v-row>
       </template>
@@ -621,6 +631,8 @@ export default Vue.extend({
         tag: [] as NameValue[],
         mediaProfile: [] as NameValue[],
       },
+      readMore: false,
+      readMoreTitles: false,
     }
   },
   computed: {
@@ -810,6 +822,8 @@ export default Vue.extend({
 
       // reset
       await this.resetParams(to, to.params.seriesId)
+      this.readMore = false
+      this.readMoreTitles = false
       this.page = 1
       this.totalPages = 1
       this.totalElements = null