Kuma: Add needed JS support for implementing tabbed boxes

RESOLVED FIXED

Status

Mozilla Developer Network
Wiki pages
P2
normal
RESOLVED FIXED
6 years ago
4 years ago

People

(Reporter: sheppy, Unassigned)

Tracking

Details

(Reporter)

Description

6 years ago
We need to get the tabbed "Browser compatibility" boxes working before launch if at all possible; otherwise, we have a significantly noticeable degradation in site appearance. The way we were doing this before involved embedded JS in the https://developer-new.mozilla.org/en-US/docs/Template:CompatibilityTable template, but that doesn't work on Kuma.

It's been suggested that we will need to have some client-side JS served up in the included JS provided by Kuma to support doing this. We need to figure this out and make it happen.

It's also worth noting that odds are good we will want and/or need other tabbed boxes in the future, with obviously different tab names and numbers of tabs.

:openjck, I want to nominate this for a launch blocker but am torn; the site is technically usable without it but there are an awful lot of pages that look pretty lousy, and clearly don't work the way they're meant to. I worry that without this landing, people are going to try to "fix" these, and just make a mess of the site.
Where is this used, Sheppy?  We have an example page?
I have a branch started here:

https://github.com/darkwing/kuma/tree/tabbed-boxes-774840

The issue is that the "Notes" and the "See also" blocks are being included in the "htab" element, thus breaking the tabbing.  Is this a template you can fix, sheppy?
(Reporter)

Comment 4

6 years ago
What's the content of the CompatibilityTable template on the VM you're testing on? It should create a div with the "htab" class on it automatically, containing just the right stuff.
Ali: Pulling this into the release. Please let me know if you feel otherwise.
Blocks: 773295
Duplicate of this bug: 765629
(Reporter)

Comment 7

6 years ago
:davidwalsh -- Not sure what's up here. The CompatibilityTable template creates the htab box, surrounding the <ul> block that's used to create the tabs. The JavaScript just imports the tabs' divs into the block. I don't think the problem is in the templates...
Sheppy, I'm not seeing the .htab elements anymore:

https://developer-new.mozilla.org/en-US/docs/CSS/animation#Browser_compatibility

What's the current status?
(Reporter)

Comment 9

6 years ago
:davidwalsh - see https://developer-new.mozilla.org/en-US/docs/Template:CompatibilityTable. This template inserts them when invoked. I don't know what changes need to be made there to work with the code you've written.
(In reply to Eric Shepherd [:sheppy] from comment #9)
> :davidwalsh - see
> https://developer-new.mozilla.org/en-US/docs/Template:CompatibilityTable.
> This template inserts them when invoked. I don't know what changes need to
> be made there to work with the code you've written.

Actually, FWIW, that template has everything commented out - so it won't insert anything.
(Reporter)

Comment 11

6 years ago
Yes, that was done to prevent errors from occurring on all those pages. I don't know what needs to be done now to use :davidwalsh's new support for tabbed boxes, so I don't know how to fix it. :(
(In reply to Eric Shepherd [:sheppy] from comment #11)
> Yes, that was done to prevent errors from occurring on all those pages. I
> don't know what needs to be done now to use :davidwalsh's new support for
> tabbed boxes, so I don't know how to fix it. :(

Well, :davidwalsh mentioned in comment #8 that he wasn't seeing the .htab elements, and that template has them commented out, so... maybe uncommenting that code is what needs doing?
(Reporter)

Comment 13

6 years ago
I uncommented the HTML in there, but now I get a cryptic error message on pages using the template. I have no idea what's wrong. :(
(Reporter)

Comment 14

6 years ago
OK, got the error fixed. Not sure what to do about the rest though. Presumably I need to add code of some kind to trigger constructing the box, but I don't know what code I need.

Comment 15

6 years ago
Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/bee96c982a0590440e1296871520f2c1ddcfdb61
fix bug 774840 - Add tab-box capabilities

https://github.com/mozilla/kuma/commit/de0e57708c5c70dc42259bd4b51d01e05157c282
Merge pull request #430 from darkwing/tabbed-boxes-774840

fix bug 774840 - Add tab-box capabilities

Updated

6 years ago
Status: NEW → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
(Reporter)

Comment 16

6 years ago
I still don't see tabbed compatibility tables. Is there anything more to be added here?

https://developer-new.mozilla.org/en-US/docs/Template:CompatibilityTable
Also not seeing it.

https://developer-dev.allizom.org/en-US/docs/CSS/animation#Browser_compatibility

Reopening just to make sure we keep track of this.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
This isn't display properly due to the caching issue;  the templates are updated but the pages aren't "refreshed" to see them.
(Reporter)

Comment 19

6 years ago
(In reply to David Walsh :davidwalsh from comment #18)
> This isn't display properly due to the caching issue;  the templates are
> updated but the pages aren't "refreshed" to see them.

What caching issue? I know we had a thing with changed templates not being picked up for a while, but it's been hours now. Other templates have been picked up since then.
(Reporter)

Comment 20

6 years ago
haha, and there it is, suddenly the tabs are there. They weren't 20 minutes ago. :)
Status: REOPENED → RESOLVED
Last Resolved: 6 years ago6 years ago
Resolution: --- → FIXED
I just updated allizom;  unfortunately I never remember allizom, as I forget about it since -new is the new standard.
(Reporter)

Comment 22

6 years ago
I never look at allizom. I always forget it's there. :)
Looks awesome. Thank you, David!
Priority: -- → P2
(Assignee)

Updated

6 years ago
Version: Kuma → unspecified
(Assignee)

Updated

6 years ago
Component: Website → Landing pages
Product: Mozilla Developer Network → Mozilla Developer Network
You need to log in before you can comment on or make changes to this bug.