Module:Click-IT

Module documentation

[view] [edit] [history] [purge]

What is Click-IT?!?

Named after the delicious frozen San Francisco dessert, the Click-IT module is a refreshing template for presenting readers with a way to navigate to a wiki represented by an icon. With Click-IT, easy to read and visually engaging elements lead users to the content of their heart's desire.

Click-IT is used in the Wikimedia Foundation Brand Guidelines in order to designate a category things. Simple, lightweight illustrations enable a content category to be easily recognizable and appeal to an international audience.

Ice Cream

Guidelines

Use a simple, lightweight illustration—Avoid putting more than one image into the icon. Look for or make an illustration that has a simple shape and few details.

Make your own

Icons are simple pictographs that designate a category of things. Each icon lives inside a fixed square so that it's legible and not cramped within a wiki. - All icons are scaled down to 100px and have a line weight of 2pt. - If your icon uses a rectangle, the corner radius should be 3px. - The background should always be 100px x 100px and at least 1px wider/taller than the icon itself to avoid unwanted trimming.

Exporting

Export as PNG at 300dpi on a transparent background, using the background to define the file dimensions which avoids messy misalignment of icons.

The above documentation is transcluded from Module:Click-IT/doc. (edit | history)
Editors can experiment in this module’s sandbox (create | mirror) and testcases (create) pages.
Please add categories to the /doc subpage. Subpages of this module.

--
-- This module implements {{Click-IT}}
--
local getArgs = require('Module:Arguments').getArgs
local p = {}

function p.main( frame )
	p.label = tostring(frame.args.label)
	p.icon = frame.args.icon
	p.link = frame.args.link
	p.alt_text = frame.args.alt
	return p._main()
end

function p._main()
	return _create()
end

function _cssTableLabel()
	local css = {}
	return css
end

function _cssTableIcon()
	local css = {}
	css['font-size'] = '18px'
	css['width'] = '150px'
	css['height'] = '110px'
	css['padding-top'] = '20px'
	css['padding-bottom'] = '20px'
	css['display'] = 'inline-block'
	css['text-align'] = 'center'
	css['border'] = '1px solid #a2a9b1'
	css['background-color'] = '#f8f9fa'
	return css
end

function _cssContainerDiv()
	local css = {}
	css['position'] = 'relative'
	css['display'] = 'inline-block'	
	return css;
end

function _create()
	local icon = _createIcon()
	local label = _createLabel()
	local container = mw.html.create('div')
	container
		:css(_cssContainerDiv())
		:node(icon)
		:node(label)
	return tostring(container)
end

function _createIcon()
	local div = mw.html.create('div')
	div
		:css(_cssTableIcon())
		:wikitext("[[File:" .. p.icon .. "|center|100x100px|link=" .. p.link .."|alt=" .. p.alt_text .. "]]")
	return tostring(div)
end

function _createLabel()
	local label = mw.html.create('div')
	label
        :css(_cssTableLabel())
        :wikitext(p.label)
    return tostring(label)
end


return p