Update the specification boxes on small screens (phones)



5 years ago
2 months ago


(Reporter: teoli, Unassigned)






(2 attachments)



5 years ago
Created attachment 8345299 [details]
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

5 years ago
Created attachment 8345302 [details]
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-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.
Flags: needinfo?(hhabstritt.bugzilla)
I like it, FWIW


5 years ago
Severity: normal → minor
Keywords: mobile
Priority: -- → P2
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!
Flags: needinfo?(hhabstritt.bugzilla) → needinfo?(jypenator)

Comment 4

5 years ago
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).
Flags: needinfo?(jypenator)

Comment 5

5 years ago
regular wiki pages = regular css files

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

5 years ago
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.
Priority: P2 → P3
You need to log in before you can comment on or make changes to this bug.