wikimedia/mediawiki-extensions-TemplateData
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/TemplateData synced 2024-11-27 17:20:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix CSS styling of the HTML rendering broken since 2016

Browse source 
Some time ago there was a little bit of custom CSS applied to the HTML
table rendering. This is broken since patch I74214ea from 2016. This
patch renamed all CSS classes but forgot to update the PHP code
accordingly.

I decided to not change the HTML rendering because these class names
might already be used in custom per-wiki or per-user CSS. Instead I
partly revert I74214ea.

Unfortunately, some of the styles are quite dramatic, don't look good
or just don't work. I decided to remove some. The argument is that
the HTML rendering looks the same for 6 years now. I don't see a good
reason to change it now.

In detail:
* Suggested values are not aliases and should not be rendered in
  gray.
* The message "no description" is rendered in gray and italics. But
  this was applied to the wrong DOM element and made everything else
  gray and italic as well.
* The color #777 is not readable, violating WCAG rules. While it's ok
  to dim aliases and such, it must be at least #555 or darker.
* The "nowrap" destroys the table the moment one of the parameters
  does have a longer name or alias. Let the browser handle this, as
  it did for 6 years now.
* Same for rendering aliases as individual, indented blocks. This
  makes the table unnecessarily big when there are many aliases, and
  just doesn't look right. Again, let's stick to what we had for
  6 years.

Change-Id: Idfa76eed6e2d68474c79d4674efce091cb031b66
This commit is contained in:
Thiemo Kreuz 2022-08-08 11:01:35 +02:00
parent 17a7b167f6
commit 8497d85a2d
3 changed files with 17 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
includes/TemplateDataHtmlFormatter.php
View file

@ -138,9 +138,7 @@ class TemplateDataHtmlFormatter {
$suggestedValues = [];
foreach ( $param->suggestedvalues as $suggestedValue ) {
$suggestedValues[] = Html::element( 'code', [ 'class' => 'mw-templatedata-doc-param-alias' ],
$suggestedValue
);
$suggestedValues[] = Html::element( 'code', [], $suggestedValue );
}
if ( $param->deprecated ) {
@ -161,12 +159,11 @@ class TemplateDataHtmlFormatter {
implode( $this->localizer->msg( 'word-separator' )->escaped(), $allParamNames )
)
// Description
. Html::rawElement( 'td', [
'class' => [
'mw-templatedata-doc-muted' => ( $param->description === null )
]
],
Html::element( 'p', [],
. Html::rawElement( 'td', [],
Html::element( 'p',
[
'class' => $param->description ? null : 'mw-templatedata-doc-muted',
],
$param->description ??
$this->localizer->msg( 'templatedata-doc-param-desc-empty' )->text()
)

19
modules/ext.templateData/templateData.css
View file

@ -1,33 +1,26 @@
.mw-templateData-doc-params tbody > tr > th {
.mw-templatedata-doc-params tbody > tr > th {
text-align: left;
font-weight: normal;
}
.mw-templateData-doc-param-alias {
color: #777;
display: block;
margin-left: 1em;
.mw-templatedata-doc-param-alias {
color: #555; /* required to pass WCAG AAA */
}
.mw-templateData-doc-muted {
.mw-templatedata-doc-muted {
font-style: italic;
color: #777;
color: #555; /* required to pass WCAG AAA */
}
.mw-templatedata-doc-param-status-required {
font-weight: bold;
}
.mw-templateData-format {
.mw-templatedata-format {
font-weight: normal;
font-size: 0.85em;
}
.mw-templateData-doc-param-name,
.mw-templateData-doc-param-type {
white-space: nowrap;
}
.mw-templateData-maps-panel-button {
margin-bottom: 0.5em;
}

10
tests/phpunit/TemplateDataBlobTest.php
View file

@ -1464,14 +1464,14 @@ HTML
<tr>
<th>foo</th>
<td class="mw-templatedata-doc-param-name"><code>foo</code></td>
<td class="mw-templatedata-doc-muted"><p>(templatedata-doc-param-desc-empty)</p><dl></dl></td>
<td><p class="mw-templatedata-doc-muted">(templatedata-doc-param-desc-empty)</p><dl></dl></td>
<td class="mw-templatedata-doc-param-type mw-templatedata-doc-muted">(templatedata-doc-param-type-unknown)</td>
<td class="mw-templatedata-doc-param-status-optional" data-sort-value="0">(templatedata-doc-param-status-optional)</td>
</tr>
<tr>
<th>bar</th>
<td class="mw-templatedata-doc-param-name"><code>bar</code></td>
<td class="mw-templatedata-doc-muted"><p>(templatedata-doc-param-desc-empty)</p><dl></dl></td>
<td><p class="mw-templatedata-doc-muted">(templatedata-doc-param-desc-empty)</p><dl></dl></td>
<td class="mw-templatedata-doc-param-type mw-templatedata-doc-muted">(templatedata-doc-param-type-unknown)</td>
<td class="mw-templatedata-doc-param-status-required" data-sort-value="2">(templatedata-doc-param-status-required)</td>
</tr>
@ -1504,10 +1504,10 @@ HTML
<tr>
<th>Label</th>
<td class="mw-templatedata-doc-param-name"><code>suggestedParam</code>(word-separator)<code class="mw-templatedata-doc-param-alias">Alias1</code>(word-separator)<code class="mw-templatedata-doc-param-alias">Alias2</code></td>
<td class="">
<td>
<p>Param docs</p>
<dl>
<dt>(templatedata-doc-param-suggestedvalues)</dt><dd><code class="mw-templatedata-doc-param-alias">Suggested1</code>(word-separator)<code class="mw-templatedata-doc-param-alias">Suggested2</code></dd>
<dt>(templatedata-doc-param-suggestedvalues)</dt><dd><code>Suggested1</code>(word-separator)<code>Suggested2</code></dd>
<dt>(templatedata-doc-param-default)</dt><dd>Default docs</dd>
<dt>(templatedata-doc-param-example)</dt><dd>Example docs</dd>
<dt>(templatedata-doc-param-autovalue)</dt><dd><code>Auto value</code></dd>
@ -1519,7 +1519,7 @@ HTML
<tr>
<th>deprecatedParam</th>
<td class="mw-templatedata-doc-param-name"><code>deprecatedParam</code></td>
<td class="mw-templatedata-doc-muted"><p>(templatedata-doc-param-desc-empty)</p><dl></dl></td>
<td><p class="mw-templatedata-doc-muted">(templatedata-doc-param-desc-empty)</p><dl></dl></td>
<td class="mw-templatedata-doc-param-type">(templatedata-doc-param-type-date)</td>
<td class="mw-templatedata-doc-param-status-deprecated" data-sort-value="-1">(templatedata-doc-param-status-deprecated)</td>
</tr>