ICANNWiki

Module:MasonryLayout: Difference between revisions

← Older editNewer edit →
MarkWD (talk | contribs)
Bureaucrats, Check users, Interface administrators, Administrators (Semantic MediaWiki), Curators (Semantic MediaWiki), Editors (Semantic MediaWiki), steward, Suppressors, Administrators, Temporary account IP viewers
25,069 edits
// via Wikitext Extension for VSCode
// via Wikitext Extension for VSCode
Line 733: Line 733:
     local options = config.options or {}
     local options = config.options or {}
     local blockRenderers = config.blockRenderers or {}
     local blockRenderers = config.blockRenderers or {}
   
    local columnCount = options.columns or DEFAULT_COLUMNS
      
      
     -- Build cards with render-time content generation
     -- Build cards with render-time content generation
Line 772: Line 770:
     end
     end
      
      
     -- Distribute cards across columns
     -- NEW: Mobile-first approach - build ordered single column
     local distribution = p.distributeCards(cards, columnCount)
    local orderedCards = {}
    local introCard = nil
    local infoBoxCard = nil
    local otherCards = {}
   
    -- Separate special cards from regular cards
     for _, card in ipairs(cards) do
        if card.id == 'intro' then
            introCard = card
        elseif card.id == 'infoBox' then
            infoBoxCard = card
        else
            table.insert(otherCards, card)
        end
    end
   
    -- Build final ordered list: intro → infoBox → others
    if introCard then
        table.insert(orderedCards, introCard)
    end
    if infoBoxCard then
        table.insert(orderedCards, infoBoxCard)
    end
    for _, card in ipairs(otherCards) do
        table.insert(orderedCards, card)
    end
      
      
     -- Render the complete masonry layout
     -- Render as single column layout
     local containerClass = options.containerClass or 'country-hub-masonry-container'
     local containerClass = options.containerClass or 'country-hub-masonry-container'
    local cardClass = options.cardClass or 'country-hub-masonry-card'
   
     local masonryHtml = string.format('<div class="%s">', containerClass)
     local masonryHtml = string.format('<div class="%s">', containerClass)
      
      
     -- Add debug information as HTML comments
     -- Add debug information
     if distribution then
     masonryHtml = masonryHtml .. string.format(
        '<!-- Masonry Debug: Total cards: %d, Mobile-first single column layout -->',
        #orderedCards
    )
   
    -- Render each card in order
    for _, card in ipairs(orderedCards) do
         masonryHtml = masonryHtml .. string.format(
         masonryHtml = masonryHtml .. string.format(
             '<!-- Masonry Debug: Total cards: %d, Columns: %d, Heights: [%s], Balance: %.2f, Extreme cards: %d -->',
             '\n<div class="%s" data-card-id="%s">%s</div>',
             #cards,
             cardClass,
             #(distribution.columns or {}),
             card.id or 'unknown',
            table.concat(distribution.heights or {}, ', '),
             card.content or EMPTY_STRING
            distribution.balance or 0,
             distribution.extremeCards or 0
         )
         )
       
        -- Add per-card debug info
        for i, column in ipairs(distribution.columns or {}) do
            masonryHtml = masonryHtml .. string.format('\n<!-- Column %d: ', i)
            for _, card in ipairs(column) do
                masonryHtml = masonryHtml .. string.format('%s(%dpx) ', card.id or 'unknown', card.estimatedSize or 0)
            end
            masonryHtml = masonryHtml .. '-->'
        end
     end
     end
      
      
     masonryHtml = masonryHtml .. '\n' .. p.renderDistributedLayout(distribution, options)
     masonryHtml = masonryHtml .. '\n</div>'
    masonryHtml = masonryHtml .. '</div>'
      
      
     return masonryHtml
     return masonryHtml
Retrieved from "https://staging.icannwiki.org/Module:MasonryLayout"