v3.0.2

improve gallery and more
ghost-land · Nov 21, 2024 · a880577 · a880577
1 parent 6b3d707
commit a880577
Show file tree

Hide file tree

Showing 10 changed files with 530 additions and 197 deletions.
diff --git a/README.md b/README.md
@@ -9,10 +9,16 @@ A modern web application for tracking Nintendo Switch content, built with React
 - 🌓 Dark/Light theme support
 - 📱 Fully responsive design
 - 📊 Detailed content information
-- 🖼️ Screenshot gallery with lightbox
+- 🖼️ Interactive screenshot gallery with advanced features:
+  - Zoom and rotation controls
+  - Slideshow mode
+  - Fullscreen support
+  - Keyboard shortcuts
+  - Touch gestures
+  - Image download
 - 📈 Download statistics integration
 - 🔄 Auto-refresh capabilities
-- 🎯 Customizable display settings
+- ⚙️ Customizable display settings
 
 ## Development
 
@@ -21,7 +27,7 @@ This project uses:
 - React 18 with TypeScript
 - Tailwind CSS for styling
 - Zustand for state management
-- PhotoSwipe for the gallery viewer
+- Lucide for icons
 
 ### Getting Started
 
@@ -49,6 +55,25 @@ The application supports various configuration options through the settings pane
 - Auto-refresh intervals
 - Custom data source URLs
 
+## Gallery Controls
+
+The screenshot gallery supports various controls:
+- **Keyboard**:
+  - Arrow keys: Navigate between images
+  - R: Rotate image
+  - +/-: Zoom in/out
+  - F: Toggle fullscreen
+  - Space: Toggle slideshow
+  - ESC: Close gallery
+- **Mouse**:
+  - Click and drag to pan
+  - Mouse wheel to zoom
+  - Click outside to close
+- **Touch**:
+  - Swipe to navigate
+  - Pinch to zoom
+  - Double tap to toggle zoom
+
 ## Contributing
 
 1. Fork the repository
@@ -65,4 +90,4 @@ This project is licensed under the MIT License - see the [LICENSE](LICENSE) file
 
 - Data provided by [nlib.cc](https://nlib.cc)
 - Icons by [Lucide](https://lucide.dev)
-- Gallery powered by [PhotoSwipe](https://photoswipe.com)
+- Stats by [ghostland.at](https://stats.ghostland.at)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "nx-content",
   "private": true,
-  "version": "3.0.0",
+  "version": "3.0.2",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,10 +13,8 @@
     "fuse.js": "^7.0.0",
     "lucide-react": "^0.344.0",
     "nx-content": "file:",
-    "photoswipe": "^5.4.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-photoswipe-gallery": "^3.0.1",
     "zustand": "^4.5.0"
   },
   "devDependencies": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -176,8 +176,6 @@ export default function App() {
             tidQuery={tidQuery}
             onNameChange={setNameQuery}
             onTidChange={setTidQuery}
-            resultCount={filteredItems.length}
-            totalCount={items.filter(item => item.type === lastActiveTab).length}
           />
 
           <TabNavigation

diff --git a/src/components/ContentTable.tsx b/src/components/ContentTable.tsx
@@ -192,7 +192,10 @@ export function ContentTable({
       )}
 
       {selectedId && (
-        <div className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4 z-50">
+        <div 
+          className="fixed inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4 z-50"
+          onClick={() => setSelectedId(null)}
+        >
           <div className="bg-card rounded-lg shadow-xl w-full max-h-[95vh] overflow-y-auto border border-border sm:max-w-4xl">
             <GameDetails
               content={getRelatedContent(allItems, selectedId)}

diff --git a/src/components/ErrorLog.tsx b/src/components/ErrorLog.tsx
@@ -38,8 +38,14 @@ export function ErrorLog({ onClose }: ErrorLogProps) {
   const logs = filter === 'all' ? logger.getLogs() : logger.getErrorLogs();
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-      <div className="bg-card rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] flex flex-col border border-border">
+    <div 
+      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-2 sm:p-4 z-50"
+      onClick={onClose}
+    >
+      <div 
+        className="bg-card rounded-lg shadow-xl w-full max-w-4xl max-h-[95vh] flex flex-col border border-border"
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="p-4 border-b border-border flex items-center justify-between">
           <div className="flex items-center space-x-2">
             <AlertTriangle className="h-5 w-5 text-primary" />
@@ -58,7 +64,7 @@ export function ErrorLog({ onClose }: ErrorLogProps) {
                 const url = URL.createObjectURL(blob);
                 const a = document.createElement('a');
                 a.href = url;
-                a.download = `nx-working-logs-${new Date().toISOString()}.txt`;
+                a.download = `nx-content-logs-${new Date().toISOString()}.txt`;
                 document.body.appendChild(a);
                 a.click();
                 document.body.removeChild(a);
@@ -67,7 +73,7 @@ export function ErrorLog({ onClose }: ErrorLogProps) {
               className="flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-primary/10 text-primary hover:bg-primary/20 transition-colors"
             >
               <FileText className="h-4 w-4" />
-              <span>Export Logs</span>
+              <span className="hidden sm:inline">Export Logs</span>
             </button>
             <button
               onClick={onClose}
@@ -78,11 +84,11 @@ export function ErrorLog({ onClose }: ErrorLogProps) {
           </div>
         </div>
 
-        <div className="p-4 border-b border-border flex items-center justify-between">
+        <div className="p-4 border-b border-border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-2">
           <select
             value={filter}
             onChange={(e) => setFilter(e.target.value as 'all' | 'error')}
-            className="bg-muted border border-border rounded-lg px-3 py-1.5 text-foreground hover:border-primary/50 transition-colors"
+            className="w-full sm:w-auto bg-muted border border-border rounded-lg px-3 py-1.5 text-foreground hover:border-primary/50 transition-colors text-sm"
           >
             <option value="all">All Logs ({logger.getLogs().length})</option>
             <option value="error">Errors Only ({logger.getErrorLogs().length})</option>
@@ -93,7 +99,7 @@ export function ErrorLog({ onClose }: ErrorLogProps) {
               logger.clearLogs();
               onClose();
             }}
-            className="px-3 py-1.5 text-sm text-red-500 hover:text-red-600 transition-colors"
+            className="w-full sm:w-auto px-3 py-1.5 text-sm text-red-500 hover:text-red-600 transition-colors text-center"
           >
             Clear All Logs
           </button>
@@ -125,11 +131,11 @@ export function ErrorLog({ onClose }: ErrorLogProps) {
                         {log.level.toUpperCase()}
                       </span>
                     </div>
-                    <span className="text-sm text-muted-foreground">
+                    <span className="text-xs sm:text-sm text-muted-foreground">
                       {new Date(log.timestamp).toLocaleString()}
                     </span>
                   </div>
-                  <p className="mb-2 text-foreground">{log.message}</p>
+                  <p className="mb-2 text-sm text-foreground break-words">{log.message}</p>
                   {log.details && formatLogDetails(log.details)}
                 </div>
               ))}