root/trading_bot_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Optimize screenshot gallery layout for 2-timeframe analysis

Browse Source 
- Add adaptive grid layout that adjusts based on number of screenshots
- 2 screenshots: side-by-side view with larger aspect ratio for better comparison
- 1 screenshot: centered layout with max-width constraint
- 3-4+ screenshots: responsive multi-column grid
- Add 'Side-by-Side View' indicator for 2-screenshot layout
- Improve aspect ratios for better chart visibility and comparison
- Enhance user experience for multi-timeframe analysis
This commit is contained in:
mindesbunister
2025-07-17 15:05:33 +02:00
parent a062bae8e2
commit 48446f9722
1 changed files with 18 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components/ScreenshotGallery.tsx
View File

@@ -157,24 +157,39 @@ export default function ScreenshotGallery({
📸
</span>
Chart Screenshots
{sortedData.length === 2 && (
<span className="ml-2 text-xs bg-purple-500/20 text-purple-300 px-2 py-1 rounded-full border border-purple-500/30">
Side-by-Side View
</span>
)}
</h4>
<div className="text-xs text-gray-400">
{sortedData.length} captured • Click to enlarge
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div className={`grid gap-4 ${
sortedData.length === 1 ? 'grid-cols-1 max-w-md mx-auto' :
sortedData.length === 2 ? 'grid-cols-1 md:grid-cols-2' :
sortedData.length === 3 ? 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3' :
sortedData.length === 4 ? 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4' :
'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
}`}>
{sortedData.map((item, displayIndex) => {
const imageUrl = formatScreenshotUrl(item.screenshot)
return (
<div
key={displayIndex}
className="group relative bg-gray-800/30 rounded-lg overflow-hidden border border-gray-700 hover:border-purple-500/50 transition-all cursor-pointer transform hover:scale-[1.02]"
className={`group relative bg-gray-800/30 rounded-lg overflow-hidden border border-gray-700 hover:border-purple-500/50 transition-all cursor-pointer transform hover:scale-[1.02] ${
sortedData.length === 2 ? 'lg:aspect-[4/3]' : ''
}`}
onClick={() => onImageClick(imageUrl)}
>
{/* Preview Image */}
<div className="aspect-video bg-gray-800 flex items-center justify-center relative">
<div className={`bg-gray-800 flex items-center justify-center relative ${
sortedData.length === 2 ? 'aspect-[16/10] lg:aspect-[4/3]' : 'aspect-video'
}`}>
<img
src={imageUrl}
alt={`${symbol} - ${item.displayLayout} - ${item.displayTimeframe} chart`}