mirror of
https://github.com/kikootwo/ReadMeABook.git
synced 2026-06-03 04:40:09 +00:00
Apple-style audiobook card & modal redesign
Add Apple-style UI refinements and UX improvements across audiobooks. - Add app icons and update manifest/layout to reference new 180x180 and 1024x1024 app icons. - Add global CSS animations (shimmer and toast slide-in) for improved skeletons/toasts. - Refactor AudiobookCard: new "cover-first" design, accessibility improvements, hover actions, request handling, inline toast/error UI, status helper (status -> badge/state mapping), simplified metadata layout, and polished animations/visuals. Removed some legacy imports and adjusted request UX (shorter toasts, error timing). - Enhance AudiobookDetailsModal: mobile-first sticky header, desktop modal polish, improved status logic, toast/notification helper, ASIN copy behavior, ebook request flows, uses preferences (squareCovers) and various layout/formatting tweaks. - Propagate hideRequestActions from bookdate page (bookdate/page.tsx). These changes focus on visual polish, accessibility, and smoother request/notification UX. Files changed: public manifest & icons, globals.css, app/layout.tsx, bookdate page, AudiobookCard, AudiobookDetailsModal, and PreferencesContext (context usage updated).
This commit is contained in:
@@ -414,6 +414,7 @@ export default function BookDatePage() {
|
||||
requestStatus={currentRec.requestStatus}
|
||||
isAvailable={currentRec.isAvailable}
|
||||
requestedByUsername={currentRec.requestedByUsername}
|
||||
hideRequestActions
|
||||
/>
|
||||
) : null;
|
||||
})()}
|
||||
|
||||
@@ -170,3 +170,29 @@ body {
|
||||
-webkit-backface-visibility: hidden;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
/* Premium Shimmer Animation for Skeletons */
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Smooth Toast Slide In */
|
||||
@keyframes toast-slide-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translate(-50%, 20px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-toast-in {
|
||||
animation: toast-slide-in 0.3s ease-out;
|
||||
}
|
||||
|
||||
+2
-1
@@ -30,7 +30,8 @@ export const metadata: Metadata = {
|
||||
],
|
||||
shortcut: "/rmab_icon.ico",
|
||||
apple: [
|
||||
{ url: "/RMAB_1024x1024_ICON.png", sizes: "1024x1024", type: "image/png" },
|
||||
{ url: "/RMAB_180x180_APPICON.png", sizes: "180x180", type: "image/png" },
|
||||
{ url: "/RMAB_1024x1024_APPICON.png", sizes: "1024x1024", type: "image/png" },
|
||||
],
|
||||
},
|
||||
appleWebApp: {
|
||||
|
||||
Reference in New Issue
Block a user