Domů Procházet Nápověda
Přihlásit se
NeoZones
/
pennyspages
zrcadlo https://github.com/NeoZones/pennyspages
Sledovat 2
Oblíbit 0
Rozštěpit 0
Soubory Úkoly 0 Wiki
Strom: 895199a700
Větve Značky
pennyspages
/
docs
/
uidesign
/
mediawiki.diff.html

mediawiki.diff.html 7.2 KB
Historie Surový

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 
  1. <!DOCTYPE html>
    2. 

  2. <html lang="en" dir="ltr">
    3. 

  3. <head>
    4. 

  4. 	<meta charset="utf-8">
    5. 

  5. 	<link rel="stylesheet" href="../../resources/src/mediawiki.diff.styles/diff.css">
    6. 

  6. 	<link rel="stylesheet" media="print" href="../../resources/src/mediawiki.diff.styles/print.css">
    7. 

  7. </head>
    8. 

  8. <body>
    9. 

  9. 

  10. <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>
    11. 

  11. <p>This file might help us fix our diff colors which have been a recurring issues among the community for a loooong time.</p>
    12. 

  12. <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>
    13. 

  13. 

  14. <p>Practical example copied from MediaWiki's HTML output:</p>
    15. 

  15. 

  16. <table class="diff diff-contentalign-left">
    17. 

  17. 	<colgroup><col class="diff-marker">
    18. 

  18. 	<col class="diff-content">
    19. 

  19. 	<col class="diff-marker">
    20. 

  20. 	<col class="diff-content">
    21. 

  21. 	</colgroup>
    22. 

  22. <tbody>
    23. 

  23. <tr>
    24. 

  24. 	<td class="diff-marker">−</td>
    25. 

  25. 	<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>
    26. 

  26. 	<td class="diff-marker">+</td>
    27. 

  27. 	<td class="diff-addedline"><div>Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div></td>
    28. 

  28. </tr>
    29. 

  29. <tr>
    30. 

  30. 	<td class="diff-marker">−</td>
    31. 

  31. 	<td class="diff-deletedline"></td>
    32. 

  32. 	<td colspan="2" class="diff-empty">&nbsp;</td>
    33. 

  33. </tr>
    34. 

  34. <tr>
    35. 

  35. 	<td class="diff-marker">−</td>
    36. 

  36. 	<td class="diff-deletedline"><div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></td>
    37. 

  37. 	<td colspan="2" class="diff-empty">&nbsp;</td>
    38. 

  38. </tr>
    39. 

  39. <tr>
    40. 

  40. 	<td class="diff-marker">&nbsp;</td>
    41. 

  41. 	<td class="diff-context"></td>
    42. 

  42. 	<td class="diff-marker">&nbsp;</td>
    43. 

  43. 	<td class="diff-context"></td>
    44. 

  44. </tr>
    45. 

  45. <tr>
    46. 

  46. 	<td class="diff-marker">&nbsp;</td>
    47. 

  47. 	<td class="diff-context"><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></td>
    48. 

  48. 	<td class="diff-marker">&nbsp;</td>
    49. 

  49. 	<td class="diff-context"><div>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div></td>
    50. 

  50. </tr>
    51. 

  51. <tr>
    52. 

  52. 	<td class="diff-marker">&nbsp;</td>
    53. 

  53. 	<td class="diff-context"></td>
    54. 

  54. 	<td class="diff-marker">&nbsp;</td>
    55. 

  55. 	<td class="diff-context"></td>
    56. 

  56. </tr>
    57. 

  57. <tr>
    58. 

  58. 	<td class="diff-marker">−</td>
    59. 

  59. 	<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>
    60. 

  60. 	<td class="diff-marker">+</td>
    61. 

  61. 	<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>
    62. 

  62. </tr>
    63. 

  63. <tr>
    64. 

  64. 	<td colspan="2" class="diff-empty">&nbsp;</td>
    65. 

  65. 	<td class="diff-marker">+</td>
    66. 

  66. 	<td class="diff-addedline"></td>
    67. 

  67. </tr>
    68. 

  68. <tr>
    69. 

  69. 	<td colspan="2" class="diff-empty">&nbsp;</td>
    70. 

  70. 	<td class="diff-marker">+</td>
    71. 

  71. 	<td class="diff-addedline"><div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div></td>
    72. 

  72. </tr>
    73. 

  73. </tbody></table>
    74. 

  74. 

  75. <p>Below are some basic lines being applied one or two classes. Mainly for debugging purposes.</p>
    76. 

  76. 

  77. <table class="diff">
    78. 

  78. 	<tr><th>Diff</th></tr>
    79. 

  79. 

  80. 	<tr><td class="diff-addedline"><code>diff-addedline</code>: added line</td></tr>
    81. 

  81. 	<tr><td class="diff-deletedline"><code>diff-deletedline</code>: deleted line</td></tr>
    82. 

  82. 	<tr><td class="diff-context"><code>diff-context</code>: context</td></tr>
    83. 

  83. 

  84. 	<tr><th>Same as above with a <code>&lt;ins&gt;</code> or <code>&lt;del&gt;</code> child element having the <code>diffchange</code> class:</th></tr>
    85. 

  85. 

  86. 	<tr><td class="diffchange">Diffchange</td></tr>
    87. 

  87. 	<tr><td class="diff-addedline"><ins class="diffchange">Added line + diffchange</ins></td></tr>
    88. 

  88. 	<tr><td class="diff-deletedline"><del class="diffchange">Deleted line + diffchange</del></td></tr>
    89. 

  89. </table>
    90. 

  90. 

  91. <p>Here an example for the diff output when a whole paragraph was moved:</p>
    92. 

  92. 

  93. <table class="diff diff-contentalign-left">
    94. 

  94. 	<colgroup><col class="diff-marker">
    95. 

  95. 		<col class="diff-content">
    96. 

  96. 		<col class="diff-marker">
    97. 

  97. 		<col class="diff-content">
    98. 

  98. 	</colgroup><tbody>
    99. 

  99. <tr>
    100. 

  100. 	<td class="diff-marker">&nbsp;</td>
    101. 

  101. 	<td class="diff-context"></td>
    102. 

  102. 	<td class="diff-marker">&nbsp;</td>
    103. 

  103. 	<td class="diff-context"></td>
    104. 

  104. </tr>
    105. 

  105. <tr>
    106. 

  106. 	<td class="diff-marker"><a class="mw-diff-movedpara-left" href="#movedpara_3_1_rhs">⚫</a></td>
    107. 

  107. 	<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>
    108. 

  108. 	<td colspan="2" class="diff-empty">&nbsp;</td>
    109. 

  109. </tr>
    110. 

  110. <tr>
    111. 

  111. 	<td class="diff-marker">&nbsp;</td>
    112. 

  112. 	<td class="diff-context"></td>
    113. 

  113. 	<td class="diff-marker">&nbsp;</td>
    114. 

  114. 	<td class="diff-context"></td>
    115. 

  115. </tr>
    116. 

  116. <tr>
    117. 

  117. 	<td class="diff-marker">&nbsp;</td>
    118. 

  118. 	<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>
    119. 

  119. 	<td class="diff-marker">&nbsp;</td>
    120. 

  120. 	<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>
    121. 

  121. </tr>
    122. 

  122. <tr>
    123. 

  123. 	<td colspan="2" class="diff-empty">&nbsp;</td>
    124. 

  124. 	<td class="diff-marker">+</td>
    125. 

  125. 	<td class="diff-addedline"></td>
    126. 

  126. </tr>
    127. 

  127. <tr>
    128. 

  128. 	<td colspan="2" class="diff-empty">&nbsp;</td>
    129. 

  129. 	<td class="diff-marker"><a class="mw-diff-movedpara-right" href="#movedpara_1_1_lhs">⚫</a></td>
    130. 

  130. 	<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>
    131. 

  131. </tr>
    132. 

  132. <tr>
    133. 

  133. 	<td class="diff-marker">&nbsp;</td>
    134. 

  134. 	<td class="diff-context"></td>
    135. 

  135. 	<td class="diff-marker">&nbsp;</td>
    136. 

  136. 	<td class="diff-context"></td>
    137. 

  137. </tr>
    138. 

  138. </tbody></table>
    139. 

  139. 

  140. </body>
    141. 

  141. </html>
    142. 

  142.