Closed Bug 1207344 Opened 9 years ago Closed 4 years ago

Unify summary box layout

Categories

(Developer Documentation Graveyard :: Macros/Templates, enhancement)

enhancement
Not set
normal

Tracking

(Not tracked)

RESOLVED WONTFIX

People

(Reporter: sebo, Unassigned)

References

Details

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
Blocks: 1207352
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)
(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)
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)
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
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
Depends on: 1216419
Depends on: 1216420
Depends on: 1216421
Depends on: 1216422
Depends on: 1216423
Depends on: 1216424
Depends on: 1216425
Depends on: 1216428
Depends on: 1216429
Depends on: 1216796
Depends on: 1218849
Depends on: 1218861
Depends on: 1218863
Depends on: 1218864
Depends on: 1218865
Depends on: 1218866
MDN Web Docs' bug reporting has now moved to GitHub. From now on, please file content bugs at https://github.com/mdn/sprints/issues/ and platform bugs at https://github.com/mdn/kuma/issues/.
Status: NEW → RESOLVED
Closed: 4 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.