improve ui responsiveness of manga tables

src/components/MangaList.vue

@@ -1,8 +1,7 @@
 <script lang="ts">
 import {Options, Vue} from 'vue-class-component';
-import {Prop, Watch} from 'vue-property-decorator';
+import {Prop} from 'vue-property-decorator';
-import {BTable, type TableItem} from 'bootstrap-vue-next';
+import MangaListTable from '@/components/MangaListTable.vue';
-import type {TableFieldObject} from 'bootstrap-vue-next/dist/src/types';
 import type {AniListMangaListEntry} from '@/data/models/anilist/AniListMangaListEntry';
 import type {AniListMedia} from '@/data/models/anilist/AniListMedia';
 import type {AniListMangaList} from '@/data/models/anilist/AniListMangaList';
@@ -12,202 +11,59 @@ import type {MangaUpdatesChapter} from '@/data/models/mangaupdates/MangaUpdatesC
 
 export type ViewList = {
   list: AniListMangaList,
-  entries: ViewEntry[]
+  entries: ViewEntry[],
 }
-
 export type ViewEntry = {
   entry: AniListMangaListEntry,
   media: AniListMedia | null,
   relation: MangaUpdatesRelation | null,
   series: MangaUpdatesSeries | null,
-  chapters: MangaUpdatesChapter[]
+  chapters: MangaUpdatesChapter[],
 };
 
-type CellData<I, V> = {
-  value: V,
-  index: number,
-  item: TableItem<I>,
-  field: TableFieldObject<I>,
-  items: TableItem<I>[],
-  toggleDetails: () => void,
-  detailsShowing: boolean | undefined
-}
-
 @Options({
   name: 'MangaList',
-  components: {BTable},
+  components: {MangaListTable},
 })
 export default class MangaList extends Vue {
   @Prop({required: true})
   readonly viewList!: ViewList;
 
-  private bTableRefreshHack = true;
-
   get localeListName(): string {
     const key = 'manga.status.' + this.viewList.list.name.toLocaleLowerCase();
     const res = this.$t(key);
     return res == 'key' ? this.viewList.list.name : res;
   }
-
-  get fields(): TableFieldObject<ViewEntry>[] {
-    return [{
-      key: 'media.coverImage.large',
-      label: '',
-      sortable: true,
-    }, {
-      key: 'media.title.userPreferred',
-      label: this.$t('manga.title'),
-      sortable: true,
-    }, {
-      key: 'entry.score',
-      label: this.$t('manga.score'),
-      sortable: true,
-    }, {
-      key: 'entry.progress',
-      label: this.$t('manga.progress'),
-      sortable: true,
-      tdClass: 'text-end',
-      thClass: 'text-end',
-    }, {
-      key: 'newChapters',
-      formatter: (value, key, item: TableEntry) => this.newChapterCount(item),
-      label: this.$t('manga.chapters.newCount'),
-      sortable: true,
-      tdClass: 'text-end',
-      thClass: 'text-end text-nowrap',
-    }, {
-      key: 'latestChapters',
-      label: this.$t('manga.chapters.latest'),
-      sortable: true,
-      tdClass: 'text-nowrap',
-    }];
-  }
-
-  get tableEntries(): ViewEntry[] {
-    return this.viewList.entries;
-  }
-
-  newChapterCount(entry: ViewEntry): number {
-    const max = entry.media?.chapters || entry.chapters.reduce((l, r) => Math.max(l, r.chapter), 0);
-    return max === 0 ? 0 : max - entry.entry.progress;
-  }
-
-  latestChaptersSorted(entry: ViewEntry): MangaUpdatesChapter[] {
-    return entry.chapters.sort((l, r) => l.chapter - r.chapter);
-  }
-
-  cd<V = any>(data: V): CellData<ViewEntry, V> {
-    return (data as CellData<ViewEntry, V>);
-  }
-
-  @Watch('viewList', {deep: true})
-  private onViewListChanged(): void {
-    this.bTableRefreshHack = false;
-    this.$nextTick(() => {
-      this.bTableRefreshHack = true;
-      // (this.$refs.table as any).refresh();
-      // (this.$refs.table as any).$forceUpdate();
-    });
-  }
 }
 </script>
 
 <template>
-  <div class="card">
+  <div class="card manga-list">
-    <h3 class="card-title p-3">{{ localeListName }}</h3>
+    <h3 class="card-title manga-list-title mb-0">{{ localeListName }}</h3>
-    <BTable ref="table" v-if="bTableRefreshHack" :fields="fields" :items="tableEntries" :primary-key="'id'"
+    <MangaListTable :viewList="viewList"/>
-            class="manga-table" hover striped>
-      <template #cell(media.coverImage.large)="data">
-        <img :src="data.value as string" alt="cover-img" class="list-cover"/>
-      </template>
-      <template #cell(media.title.userPreferred)="data">
-        <div class="flex-grow-1">
-          <div>{{ cd(data).item.media?.title.userPreferred }}</div>
-          <div>{{ cd(data).item.media?.title.english }}</div>
-        </div>
-        <div v-if="cd(data).item.relation" style="font-size: 0.5em">
-          MangaUpdates:
-          <a v-if="cd(data).item.series" :href="cd(data).item.series.url" target="_blank">
-            {{ cd(data).item.series.title }}
-          </a>
-        </div>
-      </template>
-      <template #cell(entry.score)="data">
-        <i class="fa fa-star" style="color: #ff9933"/>
-        {{ cd(data).value }}
-      </template>
-      <template #cell(progress)="data">
-        {{ cd(data).value + ' / ' + (cd(data).item.media?.chapters ?? '?') }}
-      </template>
-      <template #cell(latestChapters)="data">
-        <div v-for="c in latestChaptersSorted(cd(data).item)">
-          {{ c.chapter + ' (' + c.group + ')' }}
-        </div>
-      </template>
-    </BTable>
-    <!--    <table class="table table-striped manga-table mb-1">-->
-    <!--      <thead>-->
-    <!--        <tr>-->
-    <!--          <th></th>-->
-    <!--          <th>{{ $t('manga.title') }}</th>-->
-    <!--          <th class="text-end">{{ $t('manga.score') }}</th>-->
-    <!--          <th class="text-end">{{ $t('manga.progress') }}</th>-->
-    <!--          <th class="text-end">{{ $t('manga.chapters.newCount') }}</th>-->
-    <!--          <th>{{ $t('manga.chapters.latest') }}</th>-->
-    <!--        </tr>-->
-    <!--      </thead>-->
-    <!--      <tbody>-->
-    <!--        <tr v-for="entry in tableEntries">-->
-    <!--          <td><img :src="entry.media?.coverImage.large" alt="cover-img" class="list-cover"/></td>-->
-    <!--          <td>-->
-    <!--            &lt;!&ndash;            <div class="d-flex flex-column h-100">&ndash;&gt;-->
-    <!--            <div class="flex-grow-1">-->
-    <!--              <div>{{ entry.media?.title.userPreferred }}</div>-->
-    <!--              <div>{{ entry.media?.title.english }}</div>-->
-    <!--            </div>-->
-    <!--            <div v-if="entry.relation" style="font-size: 0.5em">-->
-    <!--              MangaUpdates:-->
-    <!--              <template v-if="entry.series">{{ entry.series.title }}</template>-->
-    <!--            </div>-->
-    <!--            &lt;!&ndash;            </div>&ndash;&gt;-->
-    <!--          </td>-->
-    <!--          <td class="text-end">{{ entry.entry.score }}</td>-->
-    <!--          <td class="text-end" style="min-width: 5rem">-->
-    <!--            {{ entry.entry.progress + ' / ' + (entry.media?.chapters ?? '?') }}-->
-    <!--          </td>-->
-    <!--          <td class="text-end" style="min-width: 5rem">-->
-    <!--            {{ newChapterCount(entry) }}-->
-    <!--          </td>-->
-    <!--          <td style="min-width: 5rem">-->
-    <!--            <div v-for="c in latestChaptersSorted(entry)">-->
-    <!--              {{ c.chapter + ' (' + c.group + ')' }}-->
-    <!--            </div>-->
-    <!--          </td>-->
-    <!--        </tr>-->
-    <!--      </tbody>-->
-    <!--    </table>-->
   </div>
 </template>
 
-<style>
+<style lang="scss">
-.manga-table .list-cover {
+@import 'bootstrap/scss/functions';
-  width: 4rem;
+@import 'bootstrap/scss/variables';
-  height: 4rem;
+@import 'bootstrap/scss/mixins/breakpoints';
-  object-fit: cover;
+
-  border-radius: 0.25rem;
+@include media-breakpoint-down(sm) {
+  .manga-list {
+    border: 0 !important;
+
+    .manga-list-title {
+      padding: 0.25rem;
+    }
+  }
 }
 
-.manga-table tr td:first-child,
+@include media-breakpoint-up(sm) {
-.manga-table tr th:first-child {
+  .manga-list {
-  padding-inline-start: 1rem;
+    .manga-list-title {
-}
+      padding: 1rem;
-
+    }
-.manga-table tr td:last-child,
+  }
-.manga-table tr th:last-child {
-  padding-inline-end: 1rem;
-}
-
-.manga-table > :not(caption) tr:last-child td {
-  border-bottom-width: 0;
 }
 </style>

src/components/MangaListTable.vue

@@ -0,0 +1,265 @@
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import {Prop, Watch} from 'vue-property-decorator';
+import {BTable, type TableItem} from 'bootstrap-vue-next';
+import type {TableFieldObject} from 'bootstrap-vue-next/dist/src/types';
+import type {MangaUpdatesChapter} from '@/data/models/mangaupdates/MangaUpdatesChapter';
+import type {ViewEntry, ViewList} from '@/components/MangaList.vue';
+
+type HeadData<I> = {
+  label: string,
+  column: string,
+  field: TableFieldObject<I>,
+  'is-foot': boolean,
+}
+
+type CellData<I, V> = {
+  value: V,
+  index: number,
+  item: TableItem<I>,
+  field: TableFieldObject<I>,
+  items: TableItem<I>[],
+  toggleDetails: () => void,
+  detailsShowing: boolean | undefined,
+}
+
+@Options({
+  name: 'MangaListTable',
+  components: {BTable},
+})
+export default class MangaListTable extends Vue {
+  @Prop({required: true})
+  readonly viewList!: ViewList;
+
+  bTableRefreshHack = true;
+
+  get fields(): TableFieldObject<ViewEntry>[] {
+    return [{
+      key: 'media.coverImage.large',
+      label: '',
+      sortable: true,
+    }, {
+      key: 'media.title.userPreferred',
+      label: this.$t('manga.title'),
+      sortable: true,
+    }, {
+      key: 'entry.score',
+      label: this.$t('manga.score'),
+      sortable: true,
+      tdClass: 'text-center manga-column-score',
+      thClass: 'text-center manga-column-score',
+    }, {
+      key: 'entry.progress',
+      label: this.$t('manga.progress'),
+      sortable: true,
+      tdClass: 'text-end text-nowrap',
+      thClass: 'text-end',
+    }, {
+      key: 'newChapters',
+      formatter: (value: never, key: never, item: ViewEntry) => this.newChapterCount(item),
+      label: this.$t('manga.chapters.newCount'),
+      sortable: true,
+      tdClass: 'text-end',
+      thClass: 'text-end',
+    }, {
+      key: 'latestChapters',
+      label: this.$t('manga.chapters.latest'),
+      sortable: true,
+      tdClass: 'manga-column-latest-chapters text-nowrap',
+      thClass: 'manga-column-latest-chapters',
+    }];
+  }
+
+  get tableEntries(): ViewEntry[] {
+    return this.viewList.entries;
+  }
+
+  newChapterCount(entry: ViewEntry): number {
+    const max = entry.media?.chapters || entry.chapters.reduce((l, r) => Math.max(l, r.chapter), 0);
+    return max === 0 ? 0 : max - entry.entry.progress;
+  }
+
+  latestChaptersSorted(entry: ViewEntry): MangaUpdatesChapter[] {
+    return entry.chapters.sort((l, r) => l.chapter - r.chapter);
+  }
+
+  cd<V = any>(data: V): CellData<ViewEntry, V> {
+    return (data as CellData<ViewEntry, V>);
+  }
+
+  hd<V = any>(data: V): HeadData<V> {
+    return (data as HeadData<V>);
+  }
+
+  @Watch('viewList', {deep: true})
+  private onViewListChanged(): void {
+    this.bTableRefreshHack = false;
+    this.$nextTick(() => {
+      this.bTableRefreshHack = true;
+      // (this.$refs.table as any).refresh();
+      // (this.$refs.table as any).$forceUpdate();
+    });
+  }
+}
+</script>
+
+<template>
+  <!--  <div>-->
+  <BTable ref="table" v-if="bTableRefreshHack" :fields="fields" :items="tableEntries" :primary-key="'id'"
+          class="manga-table" hover striped responsive no-sort-reset sort-by="newChapters" sort-desc>
+    <template #cell(media.coverImage.large)="data">
+      <img :src="data.value as string" alt="cover-img" class="list-cover"/>
+    </template>
+    <template #cell(media.title.userPreferred)="data">
+      <div class="flex-grow-1">
+        <div>{{ cd(data).item.media?.title.native }}</div>
+        <div>{{ cd(data).item.media?.title.english }}</div>
+      </div>
+      <div v-if="cd(data).item.relation" style="font-size: 0.5em">
+        MangaUpdates:
+        <a v-if="cd(data).item.series" :href="cd(data).item.series!.url" target="_blank">
+          {{ cd(data).item.series!.title }}
+        </a>
+      </div>
+    </template>
+    <template #head(entry.score)="data">
+      <div class="table-header-mobile"><i class="fa fa-star" style="color: var(--bs-orange)"/></div>
+      <div class="table-header-desktop"> {{ hd(data).label }}</div>
+    </template>
+    <template #cell(entry.score)="data">
+      <div class="table-data-mobile">{{ cd(data).value }}</div>
+      <div class="table-data-desktop"><i class="fa fa-star" style="color: var(--bs-orange)"/> {{ cd(data).value }}</div>
+    </template>
+    <template #head(entry.progress)="data">
+      <div class="table-header-mobile"><i class="fa fa-bars-progress"/></div>
+      <div class="table-header-desktop"> {{ hd(data).label }}</div>
+    </template>
+    <template #cell(entry.progress)="data">
+      {{ cd(data).value + ' / ' + (cd(data).item.media?.chapters ?? '?') }}
+    </template>
+    <template #head(newChapters)="data">
+      <div class="table-header-mobile"><i class="fa fa-plus" style="color: var(--bs-success)"/></div>
+      <div class="table-header-desktop"> {{ hd(data).label }}</div>
+    </template>
+    <template #cell(latestChapters)="data">
+      <div v-for="c in latestChaptersSorted(cd(data).item)">
+        {{ c.chapter + ' (' + c.group + ')' }}
+      </div>
+    </template>
+  </BTable>
+  <!--    <table class="table table-striped manga-table mb-1">-->
+  <!--      <thead>-->
+  <!--        <tr>-->
+  <!--          <th></th>-->
+  <!--          <th>{{ $t('manga.title') }}</th>-->
+  <!--          <th class="text-end">{{ $t('manga.score') }}</th>-->
+  <!--          <th class="text-end">{{ $t('manga.progress') }}</th>-->
+  <!--          <th class="text-end">{{ $t('manga.chapters.newCount') }}</th>-->
+  <!--          <th>{{ $t('manga.chapters.latest') }}</th>-->
+  <!--        </tr>-->
+  <!--      </thead>-->
+  <!--      <tbody>-->
+  <!--        <tr v-for="entry in tableEntries">-->
+  <!--          <td><img :src="entry.media?.coverImage.large" alt="cover-img" class="list-cover"/></td>-->
+  <!--          <td>-->
+  <!--            &lt;!&ndash;            <div class="d-flex flex-column h-100">&ndash;&gt;-->
+  <!--            <div class="flex-grow-1">-->
+  <!--              <div>{{ entry.media?.title.userPreferred }}</div>-->
+  <!--              <div>{{ entry.media?.title.english }}</div>-->
+  <!--            </div>-->
+  <!--            <div v-if="entry.relation" style="font-size: 0.5em">-->
+  <!--              MangaUpdates:-->
+  <!--              <template v-if="entry.series">{{ entry.series.title }}</template>-->
+  <!--            </div>-->
+  <!--            &lt;!&ndash;            </div>&ndash;&gt;-->
+  <!--          </td>-->
+  <!--          <td class="text-end">{{ entry.entry.score }}</td>-->
+  <!--          <td class="text-end" style="min-width: 5rem">-->
+  <!--            {{ entry.entry.progress + ' / ' + (entry.media?.chapters ?? '?') }}-->
+  <!--          </td>-->
+  <!--          <td class="text-end" style="min-width: 5rem">-->
+  <!--            {{ newChapterCount(entry) }}-->
+  <!--          </td>-->
+  <!--          <td style="min-width: 5rem">-->
+  <!--            <div v-for="c in latestChaptersSorted(entry)">-->
+  <!--              {{ c.chapter + ' (' + c.group + ')' }}-->
+  <!--            </div>-->
+  <!--          </td>-->
+  <!--        </tr>-->
+  <!--      </tbody>-->
+  <!--    </table>-->
+  <!--  </div>-->
+</template>
+
+<style lang="scss">
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins/breakpoints';
+
+//disable wrapping of table headers
+.manga-table th {
+  white-space: nowrap;
+}
+
+//cover
+.manga-table .list-cover {
+  max-width: var(--manga-cover-size);
+  //height: var(--manga-cover-size);
+  object-fit: cover;
+  border-radius: calc(var(--manga-cover-size) / 16);
+}
+
+//disable bottom board on last row
+.manga-table > :not(caption) tr:last-child td {
+  border-bottom-width: 0;
+}
+
+@include media-breakpoint-down(sm) {
+  .manga-table {
+    --manga-cover-size: 3rem;
+    --manga-cover-corner-radius: 0.25rem;
+    font-size: 0.8em;
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+
+  .manga-table th,
+  .manga-table td {
+    padding: 0.25rem !important;
+  }
+
+  //.manga-table .manga-column-score,
+  .manga-table .manga-column-latest-chapters {
+    display: none;
+  }
+
+  .manga-table .table-header-desktop,
+  .manga-table .table-data-desktop {
+    display: none;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .manga-table {
+    --manga-cover-size: 4rem;
+    --manga-cover-corner-radius: 0.25rem;
+  }
+
+  //more horizontal space usage at the start of the row
+  .manga-table tr td:first-child,
+  .manga-table tr th:first-child {
+    padding-inline-start: 1rem;
+  }
+
+  //more horizontal space usage at the end of the row
+  .manga-table tr td:last-child,
+  .manga-table tr th:last-child {
+    padding-inline-end: 1rem;
+  }
+
+  .manga-table .table-header-mobile,
+  .manga-table .table-data-mobile {
+    display: none;
+  }
+}
+</style>

src/components/MangaLists.vue

@@ -62,7 +62,19 @@ export default class MangaLists extends Vue {
 </script>
 
 <template>
-  <div class="overflow-y-auto p-3">
+  <div class="overflow-y-auto manga-lists">
     <MangaList v-for="viewList in viewLists" :key="viewList.list.name" :viewList="viewList" class="mb-3"/>
   </div>
 </template>
+
+<style lang="scss">
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins/breakpoints';
+
+@include media-breakpoint-up(sm) {
+  .manga-lists {
+    padding: 1rem !important;
+  }
+}
+</style>