mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-03-10 19:39:10 +00:00
Fix mobile torrent table display logic
The mobile torrent table changes were not working correctly due to CSS specificity and display logic issues. Fixes: 1. Changed .torrent-meta display logic: - Before: display: none by default, then display: flex on mobile - After: display: flex by default, display: none !important on desktop - This ensures the metadata shows on mobile and is properly hidden on desktop 2. Fixed expanded row colspan: - Dynamically calculate colspan based on screen width - Mobile (≤768px): colspan = 2 (name + add columns) - Desktop (>768px): colspan = 4 (name + seed + size + add columns) - Prevents layout issues when expanding torrent names Why the original didn't work: - CSS specificity: 'display: none' as default was overriding mobile styles - The @include mobile wasn't applying correctly due to cascade order - Using @include desktop with !important ensures proper hiding Result: - Mobile: Shows torrent title with size/seeders on second line - Desktop: Shows full 4-column table with separate columns - Expanded rows now span correct number of columns on both layouts
This commit is contained in:
@@ -108,7 +108,10 @@
|
||||
expandedCol.dataset[scopedStyleDataVariable] = "";
|
||||
expandedRow.className = "expanded";
|
||||
expandedCol.innerText = text;
|
||||
expandedCol.colSpan = 4;
|
||||
|
||||
// Colspan: 2 on mobile (name + add), 4 on desktop (name + seed + size + add)
|
||||
const isMobile = window.innerWidth <= 768;
|
||||
expandedCol.colSpan = isMobile ? 2 : 4;
|
||||
|
||||
expandedRow.appendChild(expandedCol);
|
||||
tableRow.insertAdjacentElement("afterend", expandedRow);
|
||||
@@ -244,15 +247,16 @@
|
||||
}
|
||||
|
||||
.torrent-meta {
|
||||
display: none; // Hidden on desktop, shown on mobile
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-color-60);
|
||||
|
||||
@include mobile {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
|
||||
// Hide on desktop
|
||||
@include desktop {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
|
||||
Reference in New Issue
Block a user