diff options
Diffstat (limited to 'docs/uidesign')
| -rw-r--r-- | docs/uidesign/child-selector-emu.html | 101 | ||||
| -rw-r--r-- | docs/uidesign/design.html | 34 | ||||
| -rw-r--r-- | docs/uidesign/mediawiki.action.history.diff.html | 57 | ||||
| -rw-r--r-- | docs/uidesign/monospace.html | 78 | ||||
| -rw-r--r-- | docs/uidesign/table-layout.html | 60 |
5 files changed, 330 insertions, 0 deletions
diff --git a/docs/uidesign/child-selector-emu.html b/docs/uidesign/child-selector-emu.html new file mode 100644 index 00000000..8294b6d7 --- /dev/null +++ b/docs/uidesign/child-selector-emu.html @@ -0,0 +1,101 @@ +<!DOCTYPE html> +<html> +<head> + <title>CSS Child selector emulation for IE 6</title> + <style type="text/css"> + /** Common rules **/ + body { background-color: #CCC; } + table { border:1px black solid; } + caption { + background-color: #98fb98; + border:1px solid #40FF40; + } + + /** "old" rules" **/ + table.global th, + table.global td + { + border: 1px red solid; + background-color:white; + padding:1em; + } + table.global th + { + background-color: #ffc0cb; + } + + /** second table. Try to emulate child selector */ + table.childemu th, + table.childemu td { + border: 1px red solid; + background-color:white; + padding:1em; + } + table.childemu th + { + background-color: #ffc0cb; + } + + /** Reset style applied in childemu classes */ + /** TODO: find the real default value!! */ + table.childemu tr * th, + table.childemu tr * td { + border: none; + background-color: transparent; + padding: 0; + } + + + /** child selector emulation */ + </style> +</head> +<body> +<p> +The following table show how nested tables inherit colors from the wikitable class (here it was renamed "global"). +</p> +<table class="global"> +<caption>Global table</caption> +<tr> + <th>TH: should have pink bg</th> +</tr> +<tr> + <td>TD: white bg</td> +</tr> +<tr> + <td> + <table class="nested"> + <caption>Nested table</caption> + <tr> + <th>Nested TH: transparent</th> + <td>Nested TD: transparent</td> + </tr> + </table> + </td> +</tr> +</table> + +<p> +With child selector we could limit the wikitable styling to the direct childs of the table. Unfortunately, Internet Explorer 6.0 does not support child selector. See <a href="https://bugzilla.wikimedia.org/show_bug.cgi?id=33752">our bug #33752</a>. +</p> +<table class="childemu"> +<caption>Global table</caption> +<tr> + <th>TH: should have pink bg</th> +</tr> +<tr> + <td>TD: white bg</td> +</tr> +<tr> + <td> + <table class="nested"> + <caption>Nested table</caption> + <tr> + <th>Nested TH: transparent</th> + <td>Nested TD: transparent</td> + </tr> + </table> + </td> +</tr> +</table> +<p><strong>NOTE:</strong>The nested caption keep the green background. The nested table keep the black border. This is because those declarations are global so we did not reset them.</p> + diff --git a/docs/uidesign/design.html b/docs/uidesign/design.html new file mode 100644 index 00000000..20dab86e --- /dev/null +++ b/docs/uidesign/design.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <link rel="stylesheet" href="../../skins/common/shared.css" /> +</head> +<body style="font-size: small;"> + + <h2>Messages</h2> + <p class="success">Success message</p> + <p class="warning">Warning message</p> + <p class="error">Error message</p> + + <h2>Messages box</h2> + <p class="visualClear successbox">Success message</p> + <p class="visualClear warningbox">Warning message</p> + <p class="visualClear errorbox">Error message</p> + + <br class="visualClear"/> + <h2>Various</h2> + <span class="comment">span.comment</span> + <a class="feedlink">a.feedlink</a> + <table class="wikitable"> + <tr><th colspan="2">table.wikitable</td></tr> + <tr><td>cell</td><td>cell</td></tr> + <tr><td>cell</td><td>cell</td></tr> + </table> + + <table class="mw-datatable"> + <tr><th colspan="2">table.mw-datatable</td></tr> + <tr><td>line with hover</td><td>line with hover</td></tr> + <tr><td>line with hover</td><td>line with hover</td></tr> + </table> + +</body></html> diff --git a/docs/uidesign/mediawiki.action.history.diff.html b/docs/uidesign/mediawiki.action.history.diff.html new file mode 100644 index 00000000..fdc54aa3 --- /dev/null +++ b/docs/uidesign/mediawiki.action.history.diff.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <link rel="stylesheet" href="../../resources/mediawiki.action/mediawiki.action.history.diff.css" /> +</head> +<body style="background-color: #C0C0C0;"> +<p> +This show various styles for our diff action, the background being hardcoded to gray (<tt>#C0C0C0</tt>) The reference style sheet is:</p> +<p> +<tt><a href="../../resources/mediawiki.action/mediawiki.action.history.diff.css">resources/mediawiki.action/mediawiki.action.history.diff.css</a></tt>. +</p> +<p> +This file might help us fix our diff colors which have been a recurring issues among the community for a loooong time.</p> + +<p> +First, show the diff mostly like it would be chown on a wiki</p> +<table class="diff"> +<tr> + <td class="diff-marker">-</td> + <td class="diff-deletedline"><div> + Some content <span class="diffchange diffchange-inline">deleted / replaced</span> + </div></td> + <td class="diff-marker">+</td> + <td class="diff-addedline"><div> + Some content <span class="diffchange diffchange-inline">added / replacement</span> + </div></td> +</tr> +</table> + + +<p> +Below are some basic lines being applied one or two classes. Mainly for debugging purposes</p> + +<table class="diff"> + + <tr><th>Diff</th></tr> + + <tr><td class="diff-addedline"><tt>diff-addedline</tt>: added line</td></tr> + <tr><td class="diff-deletedline"><tt>diff-deletedline</tt>: deleted line</td></tr> + <tr><td class="diff-context"><tt>diff-context</tt>: context</td></tr> + + + <tr><th>Same as above with a <tt><span></tt> child element having the <tt>diffchange</tt> class</th></tr> + + <tr><td class="diffchange">Diffchange</td></tr> + <tr><td class="diff-addedline"> + <span class="diffchange">Added line + diffchange</span> + </td></tr> + <tr><td class="diff-deletedline"> + <span class="diffchange">Deleted line + diffchange</span> + </td></tr> + <tr><td class="diff-context"> + <span class="diffchange">Context + diffchange</span> + </td></tr> +</table> + +</body></html> diff --git a/docs/uidesign/monospace.html b/docs/uidesign/monospace.html new file mode 100644 index 00000000..84ec13a4 --- /dev/null +++ b/docs/uidesign/monospace.html @@ -0,0 +1,78 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <style type="text/css"> + pre { + border: 1px dashed #AAA; + background-color: #E0E0E0; + color: #000000; + margin: 1em 10%; + padding: 0.5em; + } + blockquote { + font-style: italic; + } + </style> +</head> +<body> +<p> +This page let you test the rendering font-family declaration for monospaced fonts. TODO: add some references here :-) +</p> +<p> +Erwin Dokter had the following explanation on <a href="https://bugzilla.wikimedia.org/33496">Bugzilla #33496</a>: +</p> +<blockquote> +By default, a (Windows) browser has it's default font-sizes set at 16px for +serif and sans-serif, and 13px for monospace. Except in IE, where you cannot +set any font-sizes... it uses 16px for all fonts. +<br/> +Vector has a base font-size of 0.8em, and most browsers *correctly* scale down +all fonts, including the monospace font, accordingly. So monospace is shown at +0.8 x 13px = 10px (which is perceived as 'too small'). But when you assign any +font besides just "monospace", those browsers will no longer treat it as +monospace and use 0.8 x 16px = 13px instead. +</blockquote> +<p> +Below are various rendering: +</p> + +<pre style=' +font-family: monospace;'> +font-family: monospace; +</pre> + +<pre style=' +font-family: "Courier New";'> +font-family: "Courier New"; +</pre> + +<pre style=' +font-family: Courier;'> +font-family: Courier; +</pre> + +<pre style=' +font-family: monospace, monospace;'> +font-family: monospace, monospace; +</pre> + +<pre style=' +font-family: monospace, "Courier New";'> +font-family: monospace, "Courier New"; +</pre> + +<pre style=' +font-family: monospace, Courier;'> +font-family: monospace, Courier; +</pre> + +<pre style=' +font-family: monospace, Verdana;'> +font-family: monospace, Verdana; +</pre> + +<pre style=' +font-family: monospace, DOESNOTEXISTREALLY;'> +font-family: monospace, DOESNOTEXISTREALLY; +</pre> + diff --git a/docs/uidesign/table-layout.html b/docs/uidesign/table-layout.html new file mode 100644 index 00000000..6f538258 --- /dev/null +++ b/docs/uidesign/table-layout.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> +<html> +<head> + <style type="text/css"> + /** This is just for coloring: */ + table { border: 1px solid #CC0; } + td { border: 1px solid #CCC; } + + table { + width: 100%; + table-layout: fixed; + } + + #first { + width: 300px; + } + </style> +</head> +<body> + +<p> +This play with table-layout:fixed; and applying the width to colgroup or col element. Firefox only recongize the width if it is applied on col element!</p> +<p> +On a perfect browser, both tables should look the same</p> + +<dl> + <dt>colgroup</dt> + <dd>300 px width is applied to the first colgroup element</dd> +</dl> +<div style="width: 400px;"> +<table> + <colgroup id="first" /></colgroup> + <colgroup id="second"/></colgroup> + <colgroup id="third" /></colgroup> + <tr> + <td>Very long?</td> + <td>#</td> + <td>$</td> + </tr> +</table> +</div> + +<dl> + <dt>col</dt> + <dd>Each colgroup has an additional col element. The first col element is applied the 300 px width</dd> +</dl> + +<div style="width: 400px;"> +<table> + <colgroup><col id="first" /></colgroup> + <colgroup><col id="second"/></colgroup> + <colgroup><col id="third" /></colgroup> + <tr> + <td>Very long?</td> + <td>#</td> + <td>$</td> + </tr> +</table> +</div> + |