groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-07-09 19:01:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

standardized the profile page with the other pages visually

Browse source
This commit is contained in:
zipben 2025-06-04 17:08:57 +00:00
parent c45246c750
commit 90e320bc2e
3 changed files with 27 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/pages/item/_id/index.vue
View file

@ -186,11 +186,11 @@
<!-- Comments List -->
<div v-if="comments.length" class="space-y-4">
<div v-for="comment in sortedComments" :key="comment.id" class="bg-bg border rounded-lg p-4" :class="comment.userId === currentUser.id ? 'border-white border-4' : 'border-gray-700'">
<div v-for="comment in sortedComments" :key="comment.id" class="bg-primary border rounded-lg p-4" :class="comment.userId === currentUser.id ? 'border-white border-4' : 'border-gray-700'">
<div class="flex justify-between items-start mb-2">
<div>
<nuxt-link :to="'/user/' + comment.userId" class="font-semibold hover:text-white hover:underline">{{ comment.user.displayName || comment.user.username }}</nuxt-link>
<span class="text-sm text-gray-400 ml-2">
<span class="text-sm text-gray-300 ml-2">
{{ formatDate(comment.createdAt) }}
</span>
</div>
@ -201,10 +201,10 @@
</div>
<div v-if="canEditComment(comment)" class="space-x-2">
<button v-if="editingCommentId !== comment.id" class="text-gray-400 hover:text-white" @click="startEditing(comment)">
<button v-if="editingCommentId !== comment.id" class="text-gray-300 hover:text-white" @click="startEditing(comment)">
{{ $strings.ButtonEdit }}
</button>
<button class="text-gray-400 hover:text-white" @click="deleteComment(comment)">
<button class="text-gray-300 hover:text-white" @click="deleteComment(comment)">
{{ $strings.ButtonDelete }}
</button>
</div>
@ -236,7 +236,7 @@
</div>
<!-- Comment Text Display -->
<div v-else class="text-gray-300">
<div v-else class="text-gray-200">
{{ comment.text }}
</div>
</div>

32
client/pages/user/_id/index.vue
View file

@ -1,22 +1,17 @@
<template>
<div class="page-container">
<div class="max-w-6xl mx-auto px-4 py-8">
<!-- Loading State -->
<div v-if="loading" class="flex items-center justify-center py-12">
<widgets-loading-spinner />
<div class="w-full h-full overflow-y-auto bg-gradient-to-br from-[#2e2e2e] via-[#313131] to-[#1f1f1f]">
<div class="max-w-6xl mx-auto px-2 py-6 lg:p-8">
<div v-if="loading" class="w-full h-full flex items-center justify-center">
<ui-loading-indicator />
</div>
<!-- Content when loaded -->
<template v-else>
<div v-if="user" class="mb-8">
<h1 class="text-3xl font-semibold mb-2">{{ user.displayName || user.username }}</h1>
<p class="text-gray-400">Member since {{ formatDate(user.createdAt) }}</p>
</div>
<div v-else-if="!user" class="w-full h-full flex items-center justify-center">
<p class="text-error text-lg">{{ $strings.MessageUserNotFound }}</p>
</div>
<div v-else>
<!-- Tab Navigation -->
<div v-if="user" class="flex border-b border-white/10 mb-6">
<button class="px-4 py-2 mr-4 font-semibold" :class="activeTab === 'account' ? 'text-white border-b-2 border-white' : 'text-gray-400 hover:text-white'" @click="activeTab = 'account'">Account Settings</button>
<button class="px-4 py-2 font-semibold" :class="activeTab === 'reviews' ? 'text-white border-b-2 border-white' : 'text-gray-400 hover:text-white'" @click="activeTab = 'reviews'">Reviews</button>
<button class="px-4 py-2 mr-4 font-semibold rounded-t-lg" :class="activeTab === 'account' ? 'text-white bg-primary border-b-0' : 'text-gray-400 hover:text-white'" @click="activeTab = 'account'">Account Settings</button>
<button class="px-4 py-2 font-semibold rounded-t-lg" :class="activeTab === 'reviews' ? 'text-white bg-primary border-b-0' : 'text-gray-400 hover:text-white'" @click="activeTab = 'reviews'">Reviews</button>
</div>
<!-- Reviews Tab -->
@ -135,12 +130,7 @@
</div>
</div>
</div>
<!-- Error State -->
<div v-if="!user && !loading" class="text-center py-12">
<p class="text-error text-lg">Error loading user profile</p>
</div>
</template>
</div>
</div>
<modals-emails-user-e-reader-device-modal v-if="isCurrentUser" v-model="showEReaderDeviceModal" :existing-devices="revisedEreaderDevices" :ereader-device="selectedEReaderDevice" @update="ereaderDevicesUpdated" />