Status

Developer Documentation
Macros/Templates
--
enhancement
2 years ago
2 years ago

People

(Reporter: sebo, Unassigned)

Tracking

(Depends on: 3 bugs, Blocks: 1 bug)

Details

(Reporter)

Description

2 years ago
Once bug 1207335 is done, we need to change all summary boxes to use the new class.

AFAICS there's currently one template 'cssinfo' and a lot of pages having manually generated boxes, which need to be changed.

Examples for the related pages are:
.cssprop => https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type (CSS property)
.htmlelt => https://developer.mozilla.org/en-US/docs/Web/HTML/Element/keygen (HTML element)
.audionodebox => https://developer.mozilla.org/en-US/docs/Web/API/StereoPannerNode (Web Audio API)

Also, there are pages, which currently do not use a class, though may be changed to use the new one.

Examples for those pages are:
https://developer.mozilla.org/en-US/docs/Web/Events/touchstart (event)
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan (SVG Element)
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/filter (SVG Attribute)

Sebastian
(Reporter)

Updated

2 years ago
Blocks: 1207352
(Reporter)

Comment 1

2 years ago
In bug 1106768 comment 15 Jeremie mentioned that we should better use tables instead of lists, so we should also unify their structure.

Sebastian
Summary: Let summary boxes use unified CSS class → Unify summary box layout
In order to go forward here we need:
1. A decision about tables or lists.
2. The new CSS in place

Then we can start the cleaning (it will take some times. Once done, we can remove the old classes.

ni/ Jeremie and Stephanie for 1. (I have no strong feelings here, though I think tables are likely a bit more semantic than <dfn>s in <li>: these are not really 'terms defined')
Flags: needinfo?(shobson)
Flags: needinfo?(jeremie.patonnier)
(Reporter)

Comment 3

2 years ago
(In reply to Jean-Yves Perrier [:teoli] from comment #2)
> In order to go forward here we need:
> 1. A decision about tables or lists.

I'm fine with both, though I agree with Jeremie that <dfn> and related tags have different semantics and should not be used anymore. (<div>s could be used instead if we decide to keep the lists.)

> 2. The new CSS in place

For reference, that's bug 1207335.

> Then we can start the cleaning (it will take some times. Once done, we can
> remove the old classes.

For reference, that's bug 1207352.

Sebastian
I agree that using tables for this makes sense.
(In reply to Jean-Yves Perrier [:teoli] from comment #2)
> In order to go forward here we need:
> 1. A decision about tables or lists.
> 
> ni/ Jeremie and Stephanie for 1. (I have no strong feelings here, though I
> think tables are likely a bit more semantic than <dfn>s in <li>: these are
> not really 'terms defined')

See https://bugzilla.mozilla.org/show_bug.cgi?id=1106768#c15
IMO we should use tables rather than lists ;)
Flags: needinfo?(jeremie.patonnier)

Comment 6

2 years ago
decision
Tables styled like this will appear properly formatted:

(all the existing classes work right now but I picked .properties as what we should move towards)

<table class="properties">
    <tr>
        <th scope="row">Applies to</th>
        <td>flex containers</td>
    </tr>
    <tr>
        <th scope="row">Inherited</th>
        <td>no</td>
    </tr>
</table>
Flags: needinfo?(shobson)
(Reporter)

Comment 7

2 years ago
Switched 'cssinfo' template to the new table layout in https://developer.mozilla.org/en-US/docs/Template:cssinfo$revision/930349.

Thank you, Stephanie, for preparing the CSS!

I didn't assign this bug to me yet, because I don't know if I'll have time to work on this.

Current numbers of pages that need to be changed:

.cssprop: 309 (will be much less when all pages using the {{cssinfo}} macro got refreshed)
https://developer.mozilla.org/en-US/search?css_classnames=cssprop
0

.htmlelt: 111
https://developer.mozilla.org/en-US/search?css_classnames=htmlelt

.audionodebox: 29
https://developer.mozilla.org/en-US/search?css_classnames=audionodebox

Events: 193 (only en-US)
https://developer.mozilla.org/en-US/docs/Web/Events and searched for $('.standard-table > tbody > tr > td > code > a[href^="/en-US/docs/Web/Events/"]:not(.new)') using the DevTools' console

SVG elements: 74 (only en-US)
https://developer.mozilla.org/en-US/docs/Web/SVG/Element and searched for $('.index a') using the DevTools' console

SVG attributes: 162 (only en-US)
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute and searched for $('[style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;"] a:not(.new)') using the DevTools' console

Sebastian
Depends on: 1212752
Depends on: 1212755
Depends on: 1212760
Depends on: 1212762
Depends on: 1212765
Depends on: 1212767
No longer depends on: 1207335
(Reporter)

Comment 8

2 years ago
Thanks Jean-Yves for creating the related bug reports.

I've created a general template propertiesbox[1], which takes a serialized array of properties and generates the table to display them. Using this template we'll have a general layout.

Sebastian

[1] https://developer.mozilla.org/en-US/docs/Template:propertiesbox
Depends on: 1213569
Depends on: 1214587
Depends on: 1214591
(Reporter)

Updated

2 years ago
Depends on: 1216419
(Reporter)

Updated

2 years ago
Depends on: 1216420
(Reporter)

Updated

2 years ago
Depends on: 1216421
(Reporter)

Updated

2 years ago
Depends on: 1216422
(Reporter)

Updated

2 years ago
Depends on: 1216423
(Reporter)

Updated

2 years ago
Depends on: 1216424
(Reporter)

Updated

2 years ago
Depends on: 1216425
(Reporter)

Updated

2 years ago
Depends on: 1216428
(Reporter)

Updated

2 years ago
Depends on: 1216429
(Reporter)

Updated

2 years ago
Depends on: 1216796
(Reporter)

Updated

2 years ago
Depends on: 1218849
(Reporter)

Updated

2 years ago
Depends on: 1218861
(Reporter)

Updated

2 years ago
Depends on: 1218863
(Reporter)

Updated

2 years ago
Depends on: 1218864
(Reporter)

Updated

2 years ago
Depends on: 1218865
(Reporter)

Updated

2 years ago
Depends on: 1218866
You need to log in before you can comment on or make changes to this bug.