🎨 Improved edit links page with responsive card grid layout

📱 Mobile & Desktop Optimization:
- Responsive grid layout: 1 card (mobile) → 2 cards (tablet) → 3 cards (desktop) → 4 cards (large screens)
- Better card design with improved spacing and hover effects
- Enhanced mobile experience with optimized touch targets

🔧 UI/UX Improvements:
- Modern card-based layout instead of stacked list
- Website logos with fallback icons for better visual recognition
- Improved button placement and iconography
- Better responsive breakpoints for different screen sizes

 Visual Enhancements:
- Smooth hover animations and shadow effects
- Better logo positioning with placeholder icons
- Optimized spacing and typography for mobile devices
- Professional card design with rounded corners and subtle shadows

This update provides a much cleaner and more organized view of links, especially on mobile devices where the cards stack properly and buttons are easily accessible.
This commit is contained in:
2025-08-01 11:52:06 -04:00
parent ccf8b49f95
commit 1f0420c6b3
2 changed files with 165 additions and 28 deletions

View File

@@ -432,7 +432,7 @@
<div class="stat-label">Page Views</div>
</div>
<div class="stat-item">
<div class="stat-number">{{ page.links|sum(attribute='click_count') or 0 }}</div>
<div class="stat-number">{{ page.links|sum(attribute='clicks') or 0 }}</div>
<div class="stat-label">Total Clicks</div>
</div>
</div>
@@ -500,7 +500,7 @@
{% endif %}
<div class="link-url">{{ link.short_url if link.short_url else link.url }}</div>
<div style="margin-top: 10px; font-size: 0.85em; color: #666;">
<strong>Clicks:</strong> {{ link.click_count or 0 }} |
<strong>Clicks:</strong> {{ link.clicks or 0 }} |
<strong>Added:</strong> {{ link.created_at or 'N/A' }}
</div>
</div>