Module:MasonryLayout: Difference between revisions
// via Wikitext Extension for VSCode |
// via Wikitext Extension for VSCode |
||
| (5 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
--[[ | --[[ | ||
* Name: MasonryLayout | |||
* Author: Mark W. Datysgeld | |||
* Description: Intelligent masonry layout system for content distribution with card organization across columns for optimal visual balance | |||
* Notes: Content-aware size estimation; intelligent card distribution algorithm; responsive column management; aggressive caching for performance; Blueprint integration; error handling integration; integrates with ErrorHandling for protected operations; uses TemplateHelpers caching mechanisms and utility functions; integrates with TemplateStructure for block-based rendering | |||
]] | ]] | ||
| Line 25: | Line 11: | ||
local EMPTY_STRING = '' | local EMPTY_STRING = '' | ||
local DEFAULT_COLUMNS = 3 | local DEFAULT_COLUMNS = 3 | ||
local MOBILE_BREAKPOINT = | local MOBILE_BREAKPOINT = 656 -- 41rem to match CSS breakpoint | ||
-- Size estimation constants (based on typical MediaWiki table rendering) | -- Size estimation constants (based on typical MediaWiki table rendering) | ||
| Line 41: | Line 26: | ||
-- Column distribution weights for different screen sizes | -- Column distribution weights for different screen sizes | ||
local RESPONSIVE_CONFIG = { | local RESPONSIVE_CONFIG = { | ||
desktop = { columns = 3 | desktop = { columns = 3, minWidth = MOBILE_BREAKPOINT + 1 }, | ||
mobile = { columns = 1, maxWidth = MOBILE_BREAKPOINT } | mobile = { columns = 1, maxWidth = MOBILE_BREAKPOINT } | ||
} | } | ||
| Line 669: | Line 653: | ||
if screenWidth <= MOBILE_BREAKPOINT then | if screenWidth <= MOBILE_BREAKPOINT then | ||
return 1 | return 1 | ||
else | else | ||
return 3 | return 3 | ||