Hoo man has uploaded a new change for review.
https://gerrit.wikimedia.org/r/163071
Change subject: Don't inline hard coded CSS
......................................................................
Don't inline hard coded CSS
Bug: 69540
Change-Id: Ic206f4fac3a4995244eecd0e6b6843b44d82d71a
---
M includes/lua/InfoboxRender.lua
M resources/infobox.css
M tests/phpunit/includes/lua/InfoboxRenderTests.lua
3 files changed, 69 insertions(+), 57 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Capiunto
refs/changes/71/163071/1
diff --git a/includes/lua/InfoboxRender.lua b/includes/lua/InfoboxRender.lua
index bd67e3a..66f3cd0 100644
--- a/includes/lua/InfoboxRender.lua
+++ b/includes/lua/InfoboxRender.lua
@@ -25,7 +25,6 @@
:tag( 'table' )
:addClass( 'mw-capiunto-infobox' )
:attr( 'cellspacing', 3 )
- :css( 'border-spacing', '3px' )
if args.bodyClass then
table
@@ -35,9 +34,6 @@
if args.isSubbox then
table
:addClass( 'mw-capiunto-infobox-subbox' )
- else
- table
- :css( 'width', '22em' )
end
if args.bodyStyle then
@@ -54,7 +50,7 @@
end
end
--- Adds a header to html
+-- Adds a table header to html
--
-- @param html
-- @param args
@@ -64,7 +60,7 @@
local th = html:tag( 'tr' )
:tag( 'th' )
:attr( 'colspan', 2 )
- :css( 'text-align', 'center' )
+ :addClass( 'mw-capiunto-infobox-header' )
:wikitext( header )
if class then
@@ -92,7 +88,7 @@
if row.label then
local th = tr:tag( 'th' )
:attr( 'scope', 'row' )
- :css( 'text-align', 'left' )
+ :addClass( 'mw-capiunto-infobox-label' )
:wikitext( row.label )
if args.labelStyle then
@@ -104,7 +100,7 @@
if not row.label then
dataCell
:attr( 'colspan', 2 )
- :css( 'text-align', 'center' )
+ :addClass( 'mw-capiunto-infobox-spanning' )
end
if row.class then
@@ -159,11 +155,7 @@
:tag( 'tr' )
:tag( 'th' )
:attr( 'colspan', 2 )
- :css( {
- ['text-align'] = 'center',
- ['font-size'] = '125%',
- ['font-weight'] = 'bold'
- } )
+ :addClass( 'mw-capiunto-infobox-top' )
:wikitext( args.top )
if args.topClass then
@@ -186,7 +178,7 @@
:tag( 'tr' )
:tag( 'td' )
:attr( 'colspan', '2' )
- :css( 'text-align', 'center' )
+ :addClass( 'mw-capiunto-infobox-bottom' )
:newline()
:wikitext( args.bottom )
diff --git a/resources/infobox.css b/resources/infobox.css
index d0ee609..4dd27e4 100644
--- a/resources/infobox.css
+++ b/resources/infobox.css
@@ -2,21 +2,24 @@
* Infobox main CSS
*/
.mw-capiunto-infobox {
- border: 1px solid #aaa;
- background-color: #f9f9f9;
- color: black;
- /* @noflip */
- margin: 0.5em 0 0.5em 1em;
- padding: 0.2em;
- /* @noflip */
- float: right;
- /* @noflip */
- clear: right;
- /* @noflip */
- text-align: left;
- font-size: 88%;
- line-height: 1.5em;
+ border: 1px solid #aaa;
+ background-color: #f9f9f9;
+ color: black;
+ /* @noflip */
+ margin: 0.5em 0 0.5em 1em;
+ padding: 0.2em;
+ /* @noflip */
+ float: right;
+ /* @noflip */
+ clear: right;
+ /* @noflip */
+ text-align: left;
+ font-size: 88%;
+ line-height: 1.5em;
+ border-spacing: 3px;
+ width: 22em;
}
+
.mw-capiunto-infobox-subbox {
padding: 0;
border:none;
@@ -28,11 +31,29 @@
float: none;
background-color: transparent;
}
+
.mw-capiunto-infobox caption {
- font-size: 125%;
- font-weight: bold;
+ font-size: 125%;
+ font-weight: bold;
}
+
.mw-capiunto-infobox td,
.mw-capiunto-infobox th {
- vertical-align: top;
+ vertical-align: top;
+}
+
+.mw-capiunto-infobox-header,
+.mw-capiunto-infobox-spanning,
+.mw-capiunto-infobox-bottom {
+ text-align: center;
+}
+
+.mw-capiunto-infobox-label {
+ text-align: left;
+}
+
+.mw-capiunto-infobox-top {
+ text-align: center;
+ font-size: 125%;
+ font-weight: bold;
}
diff --git a/tests/phpunit/includes/lua/InfoboxRenderTests.lua
b/tests/phpunit/includes/lua/InfoboxRenderTests.lua
index 4f647e1..175cc43 100644
--- a/tests/phpunit/includes/lua/InfoboxRenderTests.lua
+++ b/tests/phpunit/includes/lua/InfoboxRenderTests.lua
@@ -91,7 +91,7 @@
},
{ name = 'mw.capiunto.Infobox._render.renderWrapper 1', func =
testRenderWrapper, type='ToString',
args = { {} },
- expect = { '<table class="mw-capiunto-infobox" cellspacing="3"
style="border-spacing:3px;width:22em"></table>' }
+ expect = { '<table class="mw-capiunto-infobox"
cellspacing="3"></table>' }
},
{ name = 'mw.capiunto.Infobox._render.renderWrapper 2', func =
testRenderWrapper, type='ToString',
args = { { isChild = true } },
@@ -104,41 +104,40 @@
{ name = 'mw.capiunto.Infobox._render.renderWrapper 4', func =
testRenderWrapper, type='ToString',
args = { { isSubbox = true } },
expect = {
- '<table class="mw-capiunto-infobox mw-capiunto-infobox-subbox"
cellspacing="3" ' ..
- 'style="border-spacing:3px"></table>'
+ '<table class="mw-capiunto-infobox mw-capiunto-infobox-subbox"
cellspacing="3"></table>'
}
},
{ name = 'mw.capiunto.Infobox._render.renderHeader 1', func =
testRenderHeader, type='ToString',
args = { {}, 'foo' },
- expect = { '<tr><th colspan="2"
style="text-align:center">foo</th></tr>' }
+ expect = { '<tr><th colspan="2"
class="mw-capiunto-infobox-header">foo</th></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderHeader 2', func =
testRenderHeader, type='ToString',
args = { {}, 'foo', 'bar' },
- expect = { '<tr><th colspan="2" class="bar"
style="text-align:center">foo</th></tr>' }
+ expect = { '<tr><th colspan="2" class="mw-capiunto-infobox-header
bar">foo</th></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderHeader 3', func =
testRenderHeader, type='ToString',
args = { { headerStyle = 'what:ever' }, 'foo', 'bar' },
- expect = { '<tr><th colspan="2" class="bar"
style="text-align:center;what:ever">foo</th></tr>' }
+ expect = { '<tr><th colspan="2" class="mw-capiunto-infobox-header
bar" style="what:ever">foo</th></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderRow 1', func =
testRenderRow, type='ToString',
args = { {}, { data = 'foo' } },
- expect = { '<tr><td colspan="2"
style="text-align:center">\nfoo</td></tr>' }
+ expect = { '<tr><td colspan="2"
class="mw-capiunto-infobox-spanning">\nfoo</td></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderRow 2', func =
testRenderRow, type='ToString',
args = { {}, { data = 'foo', label = 'bar' } },
- expect = { '<tr><th scope="row"
style="text-align:left">bar</th><td>\nfoo</td></tr>' }
+ expect = { '<tr><th scope="row"
class="mw-capiunto-infobox-label">bar</th><td>\nfoo</td></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderRow 3', func =
testRenderRow, type='ToString',
args = { { labelStyle = 'a:b' }, { data = 'foo', label = 'bar' } },
- expect = { '<tr><th scope="row"
style="text-align:left;a:b">bar</th><td>\nfoo</td></tr>' }
+ expect = { '<tr><th scope="row" class="mw-capiunto-infobox-label"
style="a:b">bar</th><td>\nfoo</td></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderRow 4', func =
testRenderRow, type='ToString',
args = { {}, { data = 'foo', class='meh', dataStyle="a:b" } },
- expect = { '<tr><td colspan="2" class="meh"
style="text-align:center;a:b">\nfoo</td></tr>' }
+ expect = { '<tr><td colspan="2" class="mw-capiunto-infobox-spanning
meh" style="a:b">\nfoo</td></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderWikitext 1', func =
testRenderWikitext, type='ToString',
args = { 'abc' },
- expect = { '<tr><td colspan="2"
style="text-align:center">\nabc</td></tr>' }
+ expect = { '<tr><td colspan="2"
class="mw-capiunto-infobox-spanning">\nabc</td></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderTitle 1', func =
testRenderTitle, type='ToString',
args = { { title = 'cd' } },
@@ -150,11 +149,11 @@
},
{ name = 'mw.capiunto.Infobox._render.renderSubHeaders 1', func =
testRenderSubHeader, type='ToString',
args = { { subHeaders = { { text = 'foo' } } } },
- expect = { '<tr><td colspan="2"
style="text-align:center">\nfoo</td></tr>' }
+ expect = { '<tr><td colspan="2"
class="mw-capiunto-infobox-spanning">\nfoo</td></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderSubHeaders 2', func =
testRenderSubHeader, type='ToString',
args = { { subHeaders = { { text = 'foo', style = 'a' } } } },
- expect = { '<tr><td colspan="2"
style="text-align:center;a">\nfoo</td></tr>' }
+ expect = { '<tr><td colspan="2" class="mw-capiunto-infobox-spanning"
style="a">\nfoo</td></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderTopRow 1', func =
testRenderTopRow, type='ToString',
args = { {} },
@@ -162,11 +161,11 @@
},
{ name = 'mw.capiunto.Infobox._render.renderTopRow 2', func =
testRenderTopRow, type='ToString',
args = { { top = 'foo' } },
- expect = { '<tr><th colspan="2"
style="font-weight:bold;text-align:center;font-size:125%">foo</th></tr>' }
+ expect = { '<tr><th colspan="2"
class="mw-capiunto-infobox-top">foo</th></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderTopRow 3', func =
testRenderTopRow, type='ToString',
args = { { top = 'foo', topClass = 'a', topStyle='b' } },
- expect = { '<tr><th colspan="2" class="a"
style="font-weight:bold;text-align:center;font-size:125%;b">foo</th></tr>' }
+ expect = { '<tr><th colspan="2" class="mw-capiunto-infobox-top a"
style="b">foo</th></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderBottomRow 1', func =
testRenderBottomRow, type='ToString',
args = { {} },
@@ -174,11 +173,11 @@
},
{ name = 'mw.capiunto.Infobox._render.renderBottomRow 2', func =
testRenderBottomRow, type='ToString',
args = { { bottom = 'foo' } },
- expect = { '<tr><td colspan="2"
style="text-align:center">\nfoo</td></tr>' }
+ expect = { '<tr><td colspan="2"
class="mw-capiunto-infobox-bottom">\nfoo</td></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderBottomRow 2', func =
testRenderBottomRow, type='ToString',
args = { { bottom = 'foo', bottomClass = 'a', bottomStyle = 'b' } },
- expect = { '<tr><td colspan="2" class="a"
style="text-align:center;b">\nfoo</td></tr>' }
+ expect = { '<tr><td colspan="2" class="mw-capiunto-infobox-bottom a"
style="b">\nfoo</td></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderImages 1', func =
testRenderImages, type='ToString',
args = { { } },
@@ -186,11 +185,11 @@
},
{ name = 'mw.capiunto.Infobox._render.renderImages 2', func =
testRenderImages, type='ToString',
args = { { captionStyle = 'a:b', images = { { image =
'[[File:Foo.bar]]', caption="a" } }, } },
- expect = { '<tr><td colspan="2"
style="text-align:center">\n[[File:Foo.bar]]<br /><div
style="a:b">a</div></td></tr>' }
+ expect = { '<tr><td colspan="2"
class="mw-capiunto-infobox-spanning">\n[[File:Foo.bar]]<br /><div
style="a:b">a</div></td></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderImages 3', func =
testRenderImages, type='ToString',
args = { { imageStyle = 'a', imageClass="b", images = { { image =
'img' } }, } },
- expect = { '<tr><td colspan="2" class="b"
style="text-align:center;a">\nimg</td></tr>' }
+ expect = { '<tr><td colspan="2" class="mw-capiunto-infobox-spanning
b" style="a">\nimg</td></tr>' }
},
{ name = 'mw.capiunto.Infobox._render.renderImages 4', func =
testRenderImages, type='ToString',
args =
@@ -200,9 +199,9 @@
{ image = '[[File:B]]', caption = 'C', class =
'D-Class' },
} } },
expect = {
- '<tr><td colspan="2"
style="text-align:center">\n[[File:Foo.bar]]</td></tr>' ..
- '<tr><td colspan="2" style="text-align:center">\n[[File:A]]<br
/><div>Capt.</div></td></tr>' ..
- '<tr class="D-Class"><td colspan="2"
style="text-align:center">\n[[File:B]]<br /><div>C</div></td></tr>'
+ '<tr><td colspan="2"
class="mw-capiunto-infobox-spanning">\n[[File:Foo.bar]]</td></tr>' ..
+ '<tr><td colspan="2"
class="mw-capiunto-infobox-spanning">\n[[File:A]]<br
/><div>Capt.</div></td></tr>' ..
+ '<tr class="D-Class"><td colspan="2"
class="mw-capiunto-infobox-spanning">\n[[File:B]]<br /><div>C</div></td></tr>'
}
},
{ name = 'mw.capiunto.Infobox._render.renderRows 1', func =
testRenderRows, type='ToString',
@@ -218,10 +217,10 @@
{ data = 'foo', class='meh' },
}, labelStyle="a:b" } },
expect = {
- '<tr><th scope="row"
style="text-align:left;a:b">bar</th><td>\nfoo</td></tr>' ..
- '<tr><th colspan="2" class="bar"
style="text-align:center">foo</th></tr>' ..
- '<tr><td colspan="2"
style="text-align:center">\nBerlin</td></tr>' ..
- '<tr><td colspan="2" class="meh"
style="text-align:center">\nfoo</td></tr>'
+ '<tr><th scope="row" class="mw-capiunto-infobox-label"
style="a:b">bar</th><td>\nfoo</td></tr>' ..
+ '<tr><th colspan="2" class="mw-capiunto-infobox-header
bar">foo</th></tr>' ..
+ '<tr><td colspan="2"
class="mw-capiunto-infobox-spanning">\nBerlin</td></tr>' ..
+ '<tr><td colspan="2" class="mw-capiunto-infobox-spanning
meh">\nfoo</td></tr>'
}
},
}
--
To view, visit https://gerrit.wikimedia.org/r/163071
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ic206f4fac3a4995244eecd0e6b6843b44d82d71a
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Capiunto
Gerrit-Branch: master
Gerrit-Owner: Hoo man <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
