948451 - Update the specification boxes on small screens (phones)

Status: RESOLVED WONTFIX

(developer.mozilla.org Graveyard :: Design, defect, P3)

Description

[Jean-Yves Perrier [:teoli]]

Attachment: The desktop version of the widget

A few of our in-content widgets are looking nice on desktop, but are too wide on small factors, lowering the user experience on phones.

One of them is the specification table.

We should keep it as a table on desktop screens, but displays it as a definition list on a phone.

Comment 1

[Jean-Yves Perrier [:teoli]]

Attachment: Screen Shot 2013-12-03 at 15.21.40.png

A crude proposal of the same HTML presented as a definition list.

The experimental CSS is this:
.redesign table.standard-table th { display:none;}
.redesign table.standard-table td:nth-of-type(n) { box-shadow:none; background-color:transparent;border:0px;margin:0px; padding:0px}
.redesign table.standard-table td:nth-of-type(3n+1) {
    display: inline;
    font-size:medium;
    font-weight: bold;
    margin-right: 12px;
}
.redesign table.standard-table td:nth-of-type(3n+2) {
    display: block;
}
.redesign table.standard-table td:nth-of-type(3n+3) {
    display: block;
    background-color: transparent;
    margin-left: 12px;
    margin-bottom: 1.5em;
    font-style: italic;
}

It is experimental because:
- it affects all standard-table on the page, and not only the spec box
- it is not rtl-proof (margin-right & co must be inverted in these case)

I would like a UX feedback, if possible, before to go further in that direction.

Comment 2

[David Walsh :davidwalsh]

I like it, FWIW

Comment 3

[David Walsh :davidwalsh]

Pinging on this again.  I think we can skip Holly on this one and just implement what you have here, JYP.  I think it looks great!  Feel free to add this to CustomCSS and resolve the ticket.  Nice work!

Comment 4

[Jean-Yves Perrier [:teoli]]

We want to empty CustomCSS and use it (or its successor) for what it was intended to (quick fixes, tests; allowing decoupling between the urgent needs of the writers and the availability of the dev team).

So I don't want to add this to CustomCSS.

In fact, the plan is to revisit all what is in CustomCSS and to open bugs so that you move them into the regular wiki pages. (Don't have time now).

Comment 5

[Jean-Yves Perrier [:teoli]]

regular wiki pages = regular css files

Comment 6

[David Walsh :davidwalsh]

JYP:

I want to remove it too but it will be easiest to migrate all of that stuff at one time, and not piece by piece, IMO.

Comment 7

[Jean-Yves Perrier [:teoli]]

I'm not doing work that will be erased in a few months. I already have too much work on my pile.

If you guys think this in a necessary step, just do it.

Comment 8

[BMO Automation]

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/.