Cutlery/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-07-31 14:33:52 -04:00
Code Issues Packages Projects Releases Wiki Activity

UI/UX fix x overflow for sessions tables on mobile

Browse Source
This commit is contained in:
advplyr 2025-07-26 09:45:44 -05:00
parent f273eee807
commit 0107cb4782
2 changed files with 110 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

148
client/pages/config/sessions.vue
View File

@ -6,80 +6,82 @@
</div> </div>
<div v-if="listeningSessions.length" class="block max-w-full relative"> <div v-if="listeningSessions.length" class="block max-w-full relative">
<table class="userSessionsTable"> <div class="overflow-x-auto">
<tr class="bg-primary/40"> <table class="userSessionsTable">
<th class="w-6 min-w-6 text-left hidden md:table-cell h-11"> <tr class="bg-primary/40">
<ui-checkbox v-model="isAllSelected" :partial="numSelected > 0 && !isAllSelected" small checkbox-bg="bg" /> <th class="w-6 min-w-6 text-left hidden md:table-cell h-11">
</th> <ui-checkbox v-model="isAllSelected" :partial="numSelected > 0 && !isAllSelected" small checkbox-bg="bg" />
<th v-if="numSelected" class="grow text-left" :colspan="7"> </th>
<div class="flex items-center"> <th v-if="numSelected" class="grow text-left" :colspan="7">
<p>{{ $getString('MessageSelected', [numSelected]) }}</p> <div class="flex items-center">
<div class="grow" /> <p>{{ $getString('MessageSelected', [numSelected]) }}</p>
<ui-btn small color="bg-error" :loading="deletingSessions" @click.stop="removeSessionsClick">{{ $strings.ButtonRemove }}</ui-btn> <div class="grow" />
</div> <ui-btn small color="bg-error" :loading="deletingSessions" @click.stop="removeSessionsClick">{{ $strings.ButtonRemove }}</ui-btn>
</th> </div>
<th v-if="!numSelected" class="grow sm:grow-0 sm:w-48 sm:max-w-48 text-left group cursor-pointer" @click.stop="sortColumn('displayTitle')"> </th>
<div class="inline-flex items-center"> <th v-if="!numSelected" class="grow sm:grow-0 sm:w-48 sm:max-w-48 text-left group cursor-pointer" @click.stop="sortColumn('displayTitle')">
{{ $strings.LabelItem }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('displayTitle') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span> <div class="inline-flex items-center">
</div> {{ $strings.LabelItem }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('displayTitle') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
</th> </div>
<th v-if="!numSelected" class="w-20 min-w-20 text-left hidden md:table-cell">{{ $strings.LabelUser }}</th> </th>
<th v-if="!numSelected" class="w-26 min-w-26 text-left hidden md:table-cell group cursor-pointer" @click.stop="sortColumn('playMethod')"> <th v-if="!numSelected" class="w-20 min-w-20 text-left hidden md:table-cell">{{ $strings.LabelUser }}</th>
<div class="inline-flex items-center"> <th v-if="!numSelected" class="w-26 min-w-26 text-left hidden md:table-cell group cursor-pointer" @click.stop="sortColumn('playMethod')">
{{ $strings.LabelPlayMethod }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('playMethod') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span> <div class="inline-flex items-center">
</div> {{ $strings.LabelPlayMethod }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('playMethod') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
</th> </div>
<th v-if="!numSelected" class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th> </th>
<th v-if="!numSelected" class="w-24 min-w-24 sm:w-32 sm:min-w-32 group cursor-pointer" @click.stop="sortColumn('timeListening')"> <th v-if="!numSelected" class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
<div class="inline-flex items-center"> <th v-if="!numSelected" class="w-24 min-w-24 sm:w-32 sm:min-w-32 group cursor-pointer" @click.stop="sortColumn('timeListening')">
{{ $strings.LabelTimeListened }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('timeListening') }" class="material-symbols text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span> <div class="inline-flex items-center">
</div> {{ $strings.LabelTimeListened }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('timeListening') }" class="material-symbols text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
</th> </div>
<th v-if="!numSelected" class="w-24 min-w-24 group cursor-pointer" @click.stop="sortColumn('currentTime')"> </th>
<div class="inline-flex items-center"> <th v-if="!numSelected" class="w-24 min-w-24 group cursor-pointer" @click.stop="sortColumn('currentTime')">
{{ $strings.LabelLastTime }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('currentTime') }" class="material-symbols text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span> <div class="inline-flex items-center">
</div> {{ $strings.LabelLastTime }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('currentTime') }" class="material-symbols text-base pl-px hidden sm:inline-block">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
</th> </div>
<th v-if="!numSelected" class="grow hidden sm:table-cell cursor-pointer group" @click.stop="sortColumn('updatedAt')"> </th>
<div class="inline-flex items-center"> <th v-if="!numSelected" class="grow hidden sm:table-cell cursor-pointer group" @click.stop="sortColumn('updatedAt')">
{{ $strings.LabelLastUpdate }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('updatedAt') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span> <div class="inline-flex items-center">
</div> {{ $strings.LabelLastUpdate }} <span :class="{ 'opacity-0 group-hover:opacity-30': !isSortSelected('updatedAt') }" class="material-symbols text-base pl-px">{{ sortDesc ? 'arrow_drop_down' : 'arrow_drop_up' }}</span>
</th> </div>
</tr> </th>
</tr>
<tr v-for="session in listeningSessions" :key="session.id" :class="{ selected: session.selected }" class="cursor-pointer" @click="clickSessionRow(session)"> <tr v-for="session in listeningSessions" :key="session.id" :class="{ selected: session.selected }" class="cursor-pointer" @click="clickSessionRow(session)">
<td class="hidden md:table-cell py-1 max-w-6 relative"> <td class="hidden md:table-cell py-1 max-w-6 relative">
<ui-checkbox v-model="session.selected" small checkbox-bg="bg" /> <ui-checkbox v-model="session.selected" small checkbox-bg="bg" />
<!-- overlay of the checkbox so that the entire box is clickable --> <!-- overlay of the checkbox so that the entire box is clickable -->
<div class="absolute inset-0 w-full h-full" @click.stop="session.selected = !session.selected" /> <div class="absolute inset-0 w-full h-full" @click.stop="session.selected = !session.selected" />
</td> </td>
<td class="py-1 grow sm:grow-0 sm:w-48 sm:max-w-48"> <td class="py-1 grow sm:grow-0 sm:w-48 sm:max-w-48">
<p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p> <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
<p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p> <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
</td> </td>
<td class="hidden md:table-cell w-20 min-w-20"> <td class="hidden md:table-cell w-20 min-w-20">
<p v-if="filteredUserUsername" class="text-xs">{{ filteredUserUsername }}</p> <p v-if="filteredUserUsername" class="text-xs">{{ filteredUserUsername }}</p>
<p v-else class="text-xs">{{ session.user ? session.user.username : 'N/A' }}</p> <p v-else class="text-xs">{{ session.user ? session.user.username : 'N/A' }}</p>
</td> </td>
<td class="hidden md:table-cell w-26 min-w-26"> <td class="hidden md:table-cell w-26 min-w-26">
<p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p> <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
</td> </td>
<td class="hidden sm:table-cell max-w-32 min-w-32"> <td class="hidden sm:table-cell max-w-32 min-w-32">
<p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" /> <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
</td> </td>
<td class="text-center w-24 min-w-24 sm:w-32 sm:min-w-32"> <td class="text-center w-24 min-w-24 sm:w-32 sm:min-w-32">
<p class="text-xs font-mono">{{ $elapsedPrettyLocalized(session.timeListening) }}</p> <p class="text-xs font-mono">{{ $elapsedPrettyLocalized(session.timeListening) }}</p>
</td> </td>
<td class="text-center hover:underline w-24 min-w-24" @click.stop="clickCurrentTime(session)"> <td class="text-center hover:underline w-24 min-w-24" @click.stop="clickCurrentTime(session)">
<p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p> <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
</td> </td>
<td class="text-center hidden sm:table-cell"> <td class="text-center hidden sm:table-cell">
<ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)"> <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)">
<p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p> <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
</ui-tooltip> </ui-tooltip>
</td> </td>
</tr> </tr>
</table> </table>
</div>
<!-- table bottom options --> <!-- table bottom options -->
<div class="flex items-center my-2"> <div class="flex items-center my-2">
<div class="grow" /> <div class="grow" />

68
client/pages/config/users/_id/sessions.vue
View File

@ -19,39 +19,41 @@
<div class="py-2"> <div class="py-2">
<h1 class="text-lg mb-2 text-white/90 px-2 sm:px-0">{{ $strings.HeaderListeningSessions }}</h1> <h1 class="text-lg mb-2 text-white/90 px-2 sm:px-0">{{ $strings.HeaderListeningSessions }}</h1>
<div v-if="listeningSessions.length"> <div v-if="listeningSessions.length">
<table class="userSessionsTable"> <div class="overflow-x-auto">
<tr class="bg-primary/40"> <table class="userSessionsTable">
<th class="w-48 min-w-48 text-left">{{ $strings.LabelItem }}</th> <tr class="bg-primary/40">
<th class="w-32 min-w-32 text-left hidden md:table-cell">{{ $strings.LabelPlayMethod }}</th> <th class="w-48 min-w-48 text-left">{{ $strings.LabelItem }}</th>
<th class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th> <th class="w-32 min-w-32 text-left hidden md:table-cell">{{ $strings.LabelPlayMethod }}</th>
<th class="w-32 min-w-32">{{ $strings.LabelTimeListened }}</th> <th class="w-32 min-w-32 text-left hidden sm:table-cell">{{ $strings.LabelDeviceInfo }}</th>
<th class="w-16 min-w-16">{{ $strings.LabelLastTime }}</th> <th class="w-32 min-w-32">{{ $strings.LabelTimeListened }}</th>
<th class="grow hidden sm:table-cell">{{ $strings.LabelLastUpdate }}</th> <th class="w-16 min-w-16">{{ $strings.LabelLastTime }}</th>
</tr> <th class="grow hidden sm:table-cell">{{ $strings.LabelLastUpdate }}</th>
<tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)"> </tr>
<td class="py-1 max-w-48"> <tr v-for="session in listeningSessions" :key="session.id" class="cursor-pointer" @click="showSession(session)">
<p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p> <td class="py-1 max-w-48">
<p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p> <p class="text-xs text-gray-200 truncate">{{ session.displayTitle }}</p>
</td> <p class="text-xs text-gray-400 truncate">{{ session.displayAuthor }}</p>
<td class="hidden md:table-cell"> </td>
<p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p> <td class="hidden md:table-cell">
</td> <p class="text-xs">{{ getPlayMethodName(session.playMethod) }}</p>
<td class="hidden sm:table-cell min-w-32 max-w-32"> </td>
<p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" /> <td class="hidden sm:table-cell min-w-32 max-w-32">
</td> <p class="text-xs truncate" v-html="getDeviceInfoString(session.deviceInfo)" />
<td class="text-center"> </td>
<p class="text-xs font-mono">{{ $elapsedPrettyLocalized(session.timeListening) }}</p> <td class="text-center">
</td> <p class="text-xs font-mono">{{ $elapsedPrettyLocalized(session.timeListening) }}</p>
<td class="text-center hover:underline" @click.stop="clickCurrentTime(session)"> </td>
<p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p> <td class="text-center hover:underline" @click.stop="clickCurrentTime(session)">
</td> <p class="text-xs font-mono">{{ $secondsToTimestamp(session.currentTime) }}</p>
<td class="text-center hidden sm:table-cell"> </td>
<ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)"> <td class="text-center hidden sm:table-cell">
<p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p> <ui-tooltip v-if="session.updatedAt" direction="top" :text="$formatDatetime(session.updatedAt, dateFormat, timeFormat)">
</ui-tooltip> <p class="text-xs text-gray-200">{{ $dateDistanceFromNow(session.updatedAt) }}</p>
</td> </ui-tooltip>
</tr> </td>
</table> </tr>
</table>
</div>
<div class="flex items-center justify-end py-1"> <div class="flex items-center justify-end py-1">
<ui-icon-btn icon="arrow_back_ios_new" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" /> <ui-icon-btn icon="arrow_back_ios_new" :size="7" icon-font-size="1rem" class="mx-1" :disabled="currentPage === 0" @click="prevPage" />
<p class="text-sm mx-1">{{ $getString('LabelPaginationPageXOfY', [currentPage + 1, numPages]) }}</p> <p class="text-sm mx-1">{{ $getString('LabelPaginationPageXOfY', [currentPage + 1, numPages]) }}</p>