groove/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-07-09 10:51:37 +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

21
client/assets/tailwind.css
View file

@ -59,22 +59,23 @@
--spacing-80e: 20em;
--spacing-96e: 24em;
--color-bg: #483D8B;
--color-primary: #2E1A47;
--color-bg: #B19CD9;
--color-primary: #9370DB;
--color-mid-purple: #A286DC;
--color-accent: #1ad691;
--color-error: #ff5252;
--color-info: #2196f3;
--color-success: #4caf50;
--color-warning: #fb8c00;
--color-darkgreen: rgb(34, 127, 35);
--color-black-50: #B19CD9;
--color-black-100: #9370DB;
--color-black-200: #7B68EE;
--color-black-300: #6A5ACD;
--color-black-400: #483D8B;
--color-black-500: #3C1F7B;
--color-black-600: #2E1A47;
--color-black-700: #1E1134;
--color-black-50: #E6E6FA;
--color-black-100: #D8BFD8;
--color-black-200: #DDA0DD;
--color-black-300: #DA70D6;
--color-black-400: #BA55D3;
--color-black-500: #9370DB;
--color-black-600: #8A2BE2;
--color-black-700: #9400D3;
--font-sans: 'Source Sans Pro';
--font-mono: 'Ubuntu Mono';

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>

28
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 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>
<modals-emails-user-e-reader-device-modal v-if="isCurrentUser" v-model="showEReaderDeviceModal" :existing-devices="revisedEreaderDevices" :ereader-device="selectedEReaderDevice" @update="ereaderDevicesUpdated" />