Module:Sandbox/LVL: Difference between revisions

Jump to navigation Jump to search
Browse history interactively
← Older editNewer edit →

LVL (talk | contribs)

3 user groups
4,834 edits
undo
LVL (talk | contribs)
Contributors, Interface administrators, Moderators
4,834 edits
No edit summary
LVL (talk | contribs)
Contributors, Interface administrators, Moderators
4,834 edits
No edit summary
Line 525: Line 525:
hero_icon = mw.getCurrentFrame():expandTemplate{ title = template_title, args = template_args }
hero_icon = mw.getCurrentFrame():expandTemplate{ title = template_title, args = template_args }
-- First column in each row is hero name
-- First column in each row is hero name. Make it sticky to the left for horizontal scrolling.
row_str = row_str .. "<td>" .. hero_icon .. "</td>"
-- Added explicit background-color and a box-shadow for better UX.
local hero_cell_style = 'style="position: sticky; left: 0; background-color: #f8f9fa; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.2);"'
row_str = row_str .. "<td " .. hero_cell_style .. ">" .. hero_icon .. "</td>"
-- Consecutive columns are then stats
-- Consecutive columns are then stats
Line 592: Line 594:
-- First header is Hero
-- First header is Hero. The top-left corner cell needs to be sticky in both directions.
local headers_str = "<th>" .. "Hero" .. "</th>"
-- z-index: 2 ensures it's on top of other sticky cells. Added explicit background and shadow.
local hero_header_style = 'style="position: sticky; top: 0; left: 0; z-index: 2; background-color: #eaecf0; box-shadow: 2px 0 5px -2px rgba(0,0,0,0.2);"'
local headers_str = "<th " .. hero_header_style .. ">" .. "Hero" .. "</th>"
local header_style = ""
local header_style = ""
local category_data = attribute_module.get_category_data()
local category_data = attribute_module.get_category_data()
Line 644: Line 648:
end
end
header_style = ' style="background-color: ' .. "rgb(" .. category_rgb .. ') ;"'
-- Make header cells sticky to the top (for vertical scrolling). z-index: 1 keeps them above the body but below the corner cell.
header_style = ' style="position: sticky; top: 0; z-index: 1; background-color: ' .. "rgb(" .. category_rgb .. ') ;"'
headers_str = headers_str .. "<th" .. header_style .. ">" .. attr_localized .. postfix .. "</th>"
headers_str = headers_str .. "<th" .. header_style .. ">" .. attr_localized .. postfix .. "</th>"
Line 652: Line 657:
headers_str = "<tr>" .. headers_str .. "</tr>"
headers_str = "<tr>" .. headers_str .. "</tr>"


local cssAdded = false
local table_str = '<table class="wikitable sortable" style="table-layout: auto; width: 100%;">' .. headers_str .. body_str .. "</table>"
if not cssAdded then        -- first call on the page
local output_str = '<div style="overflow-x: auto; width: 100%;">' .. table_str .. '</div>'
    cssAdded = true
return output_str
    mw.getCurrentFrame():extensionTag{
        name = 'templatestyles',
        args = { src = 'Template:HeroComparison/styles.css' }  -- optional, see note
    }
    -- Fallback: inline <style> in case you do not want a separate css page
    mw.getCurrentFrame():preprocess('<style>'..
        '.hero-comp-table{position:relative;overflow:auto;max-height:85vh}' ..
        '.hero-comp-table th{position:sticky;top:0;z-index:2;background:#2b2b2b}' ..
        '.hero-comp-table td:first-child,.hero-comp-table th:first-child{' ..
        'position:sticky;left:0;z-index:1;background:#1f1f1f;font-weight:bold}' ..
        '</style>')
end
--------------------------------------------------------------------
-- 2.  Build the table inside a scrolling wrapper
--------------------------------------------------------------------
local tableStr =
  '<div class="hero-comp-table">' ..
  '<table class="wikitable sortable" style="width:100%;margin:0">' ..
  headers_str .. body_str ..
  '</table></div>'
return tableStr
end
end


Retrieved from "https://deadlock.wiki/Module:Sandbox/LVL"