diff options
Diffstat (limited to 'www/wiki/docs/uidesign')
| -rw-r--r-- | www/wiki/docs/uidesign/confirmable.html | 147 | ||||
| -rw-r--r-- | www/wiki/docs/uidesign/design.html | 36 | ||||
| -rw-r--r-- | www/wiki/docs/uidesign/mediawiki.diff.html | 141 | ||||
| -rw-r--r-- | www/wiki/docs/uidesign/monospace.html | 179 | ||||
| -rw-r--r-- | www/wiki/docs/uidesign/table-layout.html | 59 |
5 files changed, 562 insertions, 0 deletions
diff --git a/www/wiki/docs/uidesign/confirmable.html b/www/wiki/docs/uidesign/confirmable.html new file mode 100644 index 00000000..d0358214 --- /dev/null +++ b/www/wiki/docs/uidesign/confirmable.html @@ -0,0 +1,147 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> +<head> + <meta charset="utf-8"> + <!-- + The jquery.confirmable module uses some additional modules and files + for internationalization support. These are omitted here for simplicity. + --> + <script type="text/javascript" src="../../resources/lib/jquery/jquery.js"></script> + <link rel="stylesheet" href="../../resources/src/jquery/jquery.confirmable.css"> + <script type="text/javascript" src="../../resources/src/jquery/jquery.confirmable.js"></script> + <style> + body { + font: small sans-serif; + } + .mw-rollback-link a, + .mw-unwatch-link a, + .mw-thanks-thank-link a { + background: #ccf; + } + </style> +</head> +<body> + <h2>Introduction</h2> + + <p>The jquery.confirmable module provides a simple inline confirmation script for potentially destructive or uncancellable actions.</p> + + <p>Possible uses include confirmable "rollback" links in histories, confirmable "unwatch" links on watchlists, or confirmable "thanks" links (provided by the Echo extension).</p> + + <p>Shown below is a demo of how each of those could work on history and watchlist entries, in an LTR and RTL language. The enhanced links are highlighted in blue.</p> + + <h2>Examples</h2> + + <h3>LTR (English)</h3> + + <p>Watchlist:</p> + + <ul lang="en" dir="ltr"> + <li class="mw-line-even mw-changeslist-line-not-watched"> + (<a href="#">diff</a> | <a href="#">hist</a>) + <span class="mw-changeslist-separator">. .</span> + <span class="mw-title"><a href="#" class="mw-changeslist-title">Example page</a></span>; <span class="mw-changeslist-date">13:38</span> + <span class="mw-changeslist-separator">. .</span> + <span class="mw-plusminus-neg">(-130)</span> + <span class="mw-changeslist-separator">. .</span> + <a href="#" class="mw-userlink">Example user</a> + <span class="mw-usertoollinks">(<a href="#">Talk</a> | <a href="#">contribs</a> | <a href="#">block</a>)</span> + <span class="comment">(example edit)</span> + <span class="mw-rollback-link">[<a href="https://www.mediawiki.org/wiki/Random_ideas_for_rollback_to_be_shelved_and_forgotten_about">rollback</a>]</span> + (<span class="mw-unwatch-link"><a href="#">unwatch</a></span>) + </li> + </ul> + + <p>History:</p> + + <ul lang="en" dir="ltr"> + <li> + <span class="mw-history-histlinks">(cur | <a href="#">prev</a>)</span> + <input type="radio" style="visibility: hidden;" /><input type="radio" checked /> + <a href="#" class="mw-changeslist-date">13:38, 28 October 2013</a> + <span class='history-user'> + <a href="#" class="mw-userlink">Example user</a> + <span class="mw-usertoollinks">(<a href="#">Talk</a> | <a href="#">contribs</a> | <a href="#">block</a>)</span> + </span> + <span class="mw-changeslist-separator">. .</span> + <span class="history-size">(1,654 bytes)</span> + <span class="mw-plusminus-neg">(-130)</span> + <span class="mw-changeslist-separator">. .</span> + <span class="comment">(example edit)</span> + (<span class="mw-rollback-link"><a href="https://www.mediawiki.org/wiki/Random_ideas_for_rollback_to_be_shelved_and_forgotten_about">rollback 1 edit</a></span> | <span class="mw-history-undo"><a href="#">undo</a></span> | <span class="mw-thanks-thank-link"><a href="#">thank</a></span>) + </li> + </ul> + + <script type="text/javascript"> + $( 'ul[lang="en"] .mw-rollback-link a' ) + .confirmable({ i18n: { confirm: 'Are you sure you want to rollback?' } }); + $( 'ul[lang="en"] .mw-unwatch-link a' ) + .confirmable({ handler: function(){ alert('Unwatched!') } }); + $( 'ul[lang="en"] .mw-thanks-thank-link a' ) + .confirmable({ handler: function(){ alert('Thanked!') } }); + </script> + + <h3>RTL (Hebrew)</h3> + <!-- All of the Hebrew text below has been basically pulled out of my hat. --> + + <p>Watchlist:</p> + + <ul lang="he" dir="rtl"> + <li class="mw-line-even mw-changeslist-line-not-watched"> + (<a href="#">הבדל</a> | <a href="#">היסטוריה</a>) + <span class="mw-changeslist-separator">. .</span> + <span class="mw-title"><a href="#" class="mw-changeslist-title">דף דוגמה</a></span>; <span class="mw-changeslist-date">13:38</span> + <span class="mw-changeslist-separator">. .</span> + <span class="mw-plusminus-neg">(-57)</span> + <span class="mw-changeslist-separator">. .</span> + <a href="#" class="mw-userlink">דוגמא אדם</a> + <span class="mw-usertoollinks">(<a href="#">שיחה</a> | <a href="#">תרומות</a> | <a href="#">חסימה</a>)</span> + <span class="comment">(עריכה לדוגמה)</span> + <span class="mw-rollback-link">[<a href="https://www.mediawiki.org/wiki/Random_ideas_for_rollback_to_be_shelved_and_forgotten_about">שחזור</a>]</span> + (<span class="mw-unwatch-link"><a href="#">הפסקת מעקב</a></span>) + </li> + </ul> + + <p>History:</p> + + <ul lang="he" dir="rtl"> + <li> + <span class="mw-history-histlinks">(נוכחית | <a href="#">קודמת</a>)</span> + <input type="radio" style="visibility: hidden;" /><input type="radio" checked /> + <a href="#" class="mw-changeslist-date">23:41, 12 במאי 2012</a> + <span class='history-user'> + <a href="#" class="mw-userlink">דוגמא אדם</a> + <span class="mw-usertoollinks">(<a href="#">שיחה</a> | <a href="#">תרומות</a> | <a href="#">חסימה</a>)</span> + </span> + <span class="mw-changeslist-separator">. .</span> + <span class="history-size">(1,762 בתים)</span> + <span class="mw-plusminus-neg">(-57)</span> + <span class="mw-changeslist-separator">. .</span> + <span class="comment">(עריכה לדוגמה)</span> + (<span class="mw-rollback-link"><a href="https://www.mediawiki.org/wiki/Random_ideas_for_rollback_to_be_shelved_and_forgotten_about">שחזור עריכה אחת</a></span> | <span class="mw-history-undo"><a href="#">ביטול</a></span> | <span class="mw-thanks-thank-link"><a href="#">תודה</a></span>) + </li> + </ul> + + <script type="text/javascript"> + var hebrewI18n = { + confirm: 'האם ברצונך להמשיך?', + yes: 'כן', + no: 'לא', + } + + $( 'ul[lang="he"] .mw-rollback-link a' ) + .confirmable({ i18n: $.extend( {}, hebrewI18n, { confirm: 'האם ברצונך לשחזר?' } ) }); + $( 'ul[lang="he"] .mw-unwatch-link a' ) + .confirmable({ i18n: hebrewI18n, handler: function(){ alert('Unwatched!') } }); + $( 'ul[lang="he"] .mw-thanks-thank-link a' ) + .confirmable({ i18n: hebrewI18n, handler: function(){ alert('Thanked!') } }); + </script> + <style type="text/css"> + /* This is normally handled by CSSJanus. */ + ul[dir=rtl] .jquery-confirmable-button { + margin-left: 0; + margin-right: 1ex; + } + </style> +</body> +</html> + diff --git a/www/wiki/docs/uidesign/design.html b/www/wiki/docs/uidesign/design.html new file mode 100644 index 00000000..6ab57d7d --- /dev/null +++ b/www/wiki/docs/uidesign/design.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> +<head> + <link rel="stylesheet" href="../../resources/src/mediawiki.legacy/shared.css"> + <link rel="stylesheet" href="../../resources/src/mediawiki/mediawiki.feedlink.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</th></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</th></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/www/wiki/docs/uidesign/mediawiki.diff.html b/www/wiki/docs/uidesign/mediawiki.diff.html new file mode 100644 index 00000000..cd13dbac --- /dev/null +++ b/www/wiki/docs/uidesign/mediawiki.diff.html @@ -0,0 +1,141 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> +<head> + <meta charset="utf-8"> + <link rel="stylesheet" href="../../resources/src/mediawiki/mediawiki.diff.styles.css"> + <link rel="stylesheet" media="print" href="../../resources/src/mediawiki/mediawiki.diff.styles.print.css"> +</head> +<body> + +<p>This show various styles for our diff action. Style sheet: <code><a href="../../resources/src/mediawiki/mediawiki.diff.styles.css">resources/src/mediawiki/mediawiki.diff.styles.css</a></code>.</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>Try it out in print mode, too. Style sheet: <code><a href="../../resources/src/mediawiki/mediawiki.diff.styles.print.css">resources/src/mediawiki/mediawiki.diff.styles.print.css</a></code>.</p> + +<p>Practical example copied from MediaWiki's HTML output:</p> + +<table class="diff diff-contentalign-left"> + <colgroup><col class="diff-marker"> + <col class="diff-content"> + <col class="diff-marker"> + <col class="diff-content"> + </colgroup> +<tbody> +<tr> + <td class="diff-marker">−</td> + <td class="diff-deletedline"><div>Lorem ipsum dolor sit amet<del class="diffchange diffchange-inline">, consectetur adipisicing elit</del>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></td> + <td class="diff-marker">+</td> + <td class="diff-addedline"><div>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></td> +</tr> +<tr> + <td class="diff-marker">−</td> + <td class="diff-deletedline"></td> + <td colspan="2" class="diff-empty"> </td> +</tr> +<tr> + <td class="diff-marker">−</td> + <td class="diff-deletedline"><div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></td> + <td colspan="2" class="diff-empty"> </td> +</tr> +<tr> + <td class="diff-marker"> </td> + <td class="diff-context"></td> + <td class="diff-marker"> </td> + <td class="diff-context"></td> +</tr> +<tr> + <td class="diff-marker"> </td> + <td class="diff-context"><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></td> + <td class="diff-marker"> </td> + <td class="diff-context"><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></td> +</tr> +<tr> + <td class="diff-marker"> </td> + <td class="diff-context"></td> + <td class="diff-marker"> </td> + <td class="diff-context"></td> +</tr> +<tr> + <td class="diff-marker">−</td> + <td class="diff-deletedline"><div>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim<del class="diffchange diffchange-inline"> id est laborum</del>.</div></td> + <td class="diff-marker">+</td> + <td class="diff-addedline"><div>Excepteur sint occaecat cupidatat non proident, sunt<ins class="diffchange diffchange-inline"> reprehenderit in voluptate</ins> in culpa qui officia deserunt mollit anim.</div></td> +</tr> +<tr> + <td colspan="2" class="diff-empty"> </td> + <td class="diff-marker">+</td> + <td class="diff-addedline"></td> +</tr> +<tr> + <td colspan="2" class="diff-empty"> </td> + <td class="diff-marker">+</td> + <td class="diff-addedline"><div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></td> +</tr> +</tbody></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"><code>diff-addedline</code>: added line</td></tr> + <tr><td class="diff-deletedline"><code>diff-deletedline</code>: deleted line</td></tr> + <tr><td class="diff-context"><code>diff-context</code>: context</td></tr> + + <tr><th>Same as above with a <code><ins></code> or <code><del></code> child element having the <code>diffchange</code> class:</th></tr> + + <tr><td class="diffchange">Diffchange</td></tr> + <tr><td class="diff-addedline"><ins class="diffchange">Added line + diffchange</ins></td></tr> + <tr><td class="diff-deletedline"><del class="diffchange">Deleted line + diffchange</del></td></tr> +</table> + +<p>Here an example for the diff output when a whole paragraph was moved:</p> + +<table class="diff diff-contentalign-left"> + <colgroup><col class="diff-marker"> + <col class="diff-content"> + <col class="diff-marker"> + <col class="diff-content"> + </colgroup><tbody> +<tr> + <td class="diff-marker"> </td> + <td class="diff-context"></td> + <td class="diff-marker"> </td> + <td class="diff-context"></td> +</tr> +<tr> + <td class="diff-marker"><a class="mw-diff-movedpara-left" href="#movedpara_3_1_rhs">⚫</a></td> + <td class="diff-deletedline"><div><a name="movedpara_1_1_lhs"></a>Lorem ipsum alias non veritatis porro quidem harum ut et at ab sit atque soluta deleniti architecto ut pariatur? Non consequat. Aut minus occaecat quas lorem impedit, earum praesentium enim reprehenderit, anim consequat. Et maiores consequatur incidunt, nostrud non consectetur, ut eiusmod mollit anim eum vitae qui obcaecati molestiae nostrud dolore hic aperiam commodo nihil omnis aliquam irure expedita minima ut fugiat, error odi.</div></td> + <td colspan="2" class="diff-empty"> </td> +</tr> +<tr> + <td class="diff-marker"> </td> + <td class="diff-context"></td> + <td class="diff-marker"> </td> + <td class="diff-context"></td> +</tr> +<tr> + <td class="diff-marker"> </td> + <td class="diff-context"><div>Lorem ipsum sunt ducimus, quos aut quia a nulla molestiae doloremque dolorem inventore vel officia temporibus at ut iste totam officiis impedit, quaerat voluptate fugiat esse est sit, assumenda quis quaerat provident, laborum molestiae esse, quam qui cillum velit, mollit veniam, consequuntur esse, dolorem do amet, maiores ad dolores dolor duis aut amet, adipisicing est.</div></td> + <td class="diff-marker"> </td> + <td class="diff-context"><div>Lorem ipsum sunt ducimus, quos aut quia a nulla molestiae doloremque dolorem inventore vel officia temporibus at ut iste totam officiis impedit, quaerat voluptate fugiat esse est sit, assumenda quis quaerat provident, laborum molestiae esse, quam qui cillum velit, mollit veniam, consequuntur esse, dolorem do amet, maiores ad dolores dolor duis aut amet, adipisicing est.</div></td> +</tr> +<tr> + <td colspan="2" class="diff-empty"> </td> + <td class="diff-marker">+</td> + <td class="diff-addedline"></td> +</tr> +<tr> + <td colspan="2" class="diff-empty"> </td> + <td class="diff-marker"><a class="mw-diff-movedpara-right" href="#movedpara_1_1_lhs">⚫</a></td> + <td class="diff-addedline"><div><a name="movedpara_3_1_rhs"></a>Lorem ipsum alias non veritatis porro quidem harum ut et at ab sit atque soluta deleniti architecto ut pariatur? Non consequat. Aut minus occaecat quas lorem impedit, earum praesentium enim reprehenderit, anim consequat. Et maiores consequatur incidunt, nostrud non consectetur, ut eiusmod mollit anim eum vitae qui obcaecati molestiae nostrud dolore hic aperiam commodo nihil omnis aliquam irure expedita minima ut fugiat, error odi.</div></td> +</tr> +<tr> + <td class="diff-marker"> </td> + <td class="diff-context"></td> + <td class="diff-marker"> </td> + <td class="diff-context"></td> +</tr> +</tbody></table> + +</body> +</html> diff --git a/www/wiki/docs/uidesign/monospace.html b/www/wiki/docs/uidesign/monospace.html new file mode 100644 index 00000000..cdaf580a --- /dev/null +++ b/www/wiki/docs/uidesign/monospace.html @@ -0,0 +1,179 @@ +<!DOCTYPE html> +<html lang="en" dir="ltr"> +<head> + <style> + pre, + textarea { + border: 1px dashed #AAA; + background-color: #E0E0E0; + color: #000000; + padding: 0.5em; + height: 1em; + width: 90%; + } + blockquote { + font-style: italic; + } + table { + width: 100%; + table-layout: fixed; + } + td { + padding: 0.5em; + } + </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> +Additionally, it seems that textareas have their own font-size set in Chrome +(but not Firefox and other browsers), making them unaffected by this behavior. +</p> +<p> +Below are various rendering: +</p> + +<table> + +<tr> +<th><pre></th> +<th><textarea></th> +</tr> + +<tr> +<td> +<pre style=' +font-family: monospace;'> +font-family: monospace; +</pre> +</td> +<td> +<textarea style=' +font-family: monospace;'> +font-family: monospace; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: "Courier New";'> +font-family: "Courier New"; +</pre> +</td> +<td> +<textarea style=' +font-family: "Courier New";'> +font-family: "Courier New"; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: Courier;'> +font-family: Courier; +</pre> +</td> +<td> +<textarea style=' +font-family: Courier;'> +font-family: Courier; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: monospace, monospace;'> +font-family: monospace, monospace; +</pre> +</td> +<td> +<textarea style=' +font-family: monospace, monospace;'> +font-family: monospace, monospace; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: monospace, "Courier New";'> +font-family: monospace, "Courier New"; +</pre> +</td> +<td> +<textarea style=' +font-family: monospace, "Courier New";'> +font-family: monospace, "Courier New"; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: monospace, Courier;'> +font-family: monospace, Courier; +</pre> +</td> +<td> +<textarea style=' +font-family: monospace, Courier;'> +font-family: monospace, Courier; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: monospace, Verdana;'> +font-family: monospace, Verdana; +</pre> +</td> +<td> +<textarea style=' +font-family: monospace, Verdana;'> +font-family: monospace, Verdana; +</textarea> +</td> +</tr> + +<tr> +<td> +<pre style=' +font-family: monospace, DOESNOTEXISTREALLY;'> +font-family: monospace, DOESNOTEXISTREALLY; +</pre> +</td> +<td> +<textarea style=' +font-family: monospace, DOESNOTEXISTREALLY;'> +font-family: monospace, DOESNOTEXISTREALLY; +</textarea> +</td> +</tr> + +</table> diff --git a/www/wiki/docs/uidesign/table-layout.html b/www/wiki/docs/uidesign/table-layout.html new file mode 100644 index 00000000..2c268199 --- /dev/null +++ b/www/wiki/docs/uidesign/table-layout.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<html> +<head> + <style> + /** 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> |