feat: apply library density to hub rows and reduce grid sizes
close #433
This commit is contained in:
@@ -76,31 +76,31 @@ class GridSizeCalculator {
|
||||
|
||||
switch (density) {
|
||||
case LibraryDensity.comfortable:
|
||||
divisor = 5.0;
|
||||
maxItemWidth = 320;
|
||||
case LibraryDensity.normal:
|
||||
divisor = 6.0;
|
||||
divisor = 5.5;
|
||||
maxItemWidth = 260;
|
||||
case LibraryDensity.normal:
|
||||
divisor = 6.5;
|
||||
maxItemWidth = 230;
|
||||
case LibraryDensity.compact:
|
||||
divisor = 7.5;
|
||||
maxItemWidth = 200;
|
||||
divisor = 9.0;
|
||||
maxItemWidth = 160;
|
||||
}
|
||||
|
||||
return (availableWidth / divisor).clamp(0, maxItemWidth);
|
||||
} else if (ScreenBreakpoints.isTablet(screenWidth)) {
|
||||
// Medium screens (tablets): Fixed 3-4-5 items
|
||||
// Medium screens (tablets): Fixed 3-4-6 items
|
||||
int targetItemCount = switch (density) {
|
||||
LibraryDensity.comfortable => 3,
|
||||
LibraryDensity.normal => 4,
|
||||
LibraryDensity.compact => 5,
|
||||
LibraryDensity.compact => 6,
|
||||
};
|
||||
return availableWidth / targetItemCount;
|
||||
} else {
|
||||
// Small screens (phones): Fixed 2-3-3 items
|
||||
// Small screens (phones): Fixed 2-3-4 items
|
||||
int targetItemCount = switch (density) {
|
||||
LibraryDensity.comfortable => 2,
|
||||
LibraryDensity.normal => 3,
|
||||
LibraryDensity.compact => 3,
|
||||
LibraryDensity.compact => 4,
|
||||
};
|
||||
return availableWidth / targetItemCount;
|
||||
}
|
||||
|
||||
@@ -45,19 +45,19 @@ class ScreenBreakpoints {
|
||||
/// Grid layout constants
|
||||
class GridLayoutConstants {
|
||||
/// Maximum cross-axis extent for grid items in comfortable density mode
|
||||
static const double comfortableDesktop = 280;
|
||||
static const double comfortableTablet = 240;
|
||||
static const double comfortableMobile = 200;
|
||||
static const double comfortableDesktop = 250;
|
||||
static const double comfortableTablet = 210;
|
||||
static const double comfortableMobile = 180;
|
||||
|
||||
/// Maximum cross-axis extent for grid items in compact density mode
|
||||
static const double compactDesktop = 200;
|
||||
static const double compactTablet = 170;
|
||||
static const double compactMobile = 140;
|
||||
static const double compactDesktop = 160;
|
||||
static const double compactTablet = 140;
|
||||
static const double compactMobile = 120;
|
||||
|
||||
/// Maximum cross-axis extent for grid items in normal density mode
|
||||
static const double normalDesktop = 240;
|
||||
static const double normalTablet = 200;
|
||||
static const double normalMobile = 170;
|
||||
static const double normalDesktop = 220;
|
||||
static const double normalTablet = 185;
|
||||
static const double normalMobile = 155;
|
||||
|
||||
/// Maximum cross-axis extent for grid items on TV (10ft viewing distance)
|
||||
static const double comfortableTV = 200;
|
||||
|
||||
@@ -8,7 +8,7 @@ import 'package:provider/provider.dart';
|
||||
import '../focus/dpad_navigator.dart';
|
||||
import '../focus/key_event_utils.dart';
|
||||
import '../providers/settings_provider.dart';
|
||||
import '../services/settings_service.dart' show EpisodePosterMode;
|
||||
import '../services/settings_service.dart' show EpisodePosterMode, LibraryDensity;
|
||||
import '../theme/mono_tokens.dart';
|
||||
import '../utils/layout_constants.dart';
|
||||
import '../focus/locked_hub_controller.dart';
|
||||
@@ -370,16 +370,22 @@ class HubSectionState extends State<HubSection> {
|
||||
builder: (context, constraints) {
|
||||
// Responsive base card width for posters (2:3 aspect ratio)
|
||||
final screenWidth = constraints.maxWidth;
|
||||
final baseCardWidth = ScreenBreakpoints.isLargeDesktop(screenWidth)
|
||||
final settings = context.watch<SettingsProvider>();
|
||||
final densityScale = switch (settings.libraryDensity) {
|
||||
LibraryDensity.compact => 0.8,
|
||||
LibraryDensity.normal => 1.0,
|
||||
LibraryDensity.comfortable => 1.15,
|
||||
};
|
||||
final baseCardWidth = (ScreenBreakpoints.isLargeDesktop(screenWidth)
|
||||
? 220.0
|
||||
: ScreenBreakpoints.isDesktop(screenWidth)
|
||||
? 200.0
|
||||
: ScreenBreakpoints.isWideTablet(screenWidth)
|
||||
? 190.0
|
||||
: 160.0;
|
||||
: 160.0) * densityScale;
|
||||
|
||||
// Get episode poster mode setting
|
||||
final episodePosterMode = context.watch<SettingsProvider>().episodePosterMode;
|
||||
final episodePosterMode = settings.episodePosterMode;
|
||||
|
||||
// Determine hub content type for layout decisions
|
||||
final hasEpisodes = widget.hub.items.any((item) => item.usesWideAspectRatio(episodePosterMode));
|
||||
|
||||
Reference in New Issue
Block a user