Closed Bug 774840 Opened 13 years ago Closed 12 years ago

Kuma: Add needed JS support for implementing tabbed boxes

Categories

(developer.mozilla.org Graveyard :: Wiki pages, defect, P2)

Product:
developer.mozilla.org Graveyard
Component:
Wiki pages
Type:
defect

Tracking

(Not tracked)

Status:
RESOLVED FIXED

People

(Reporter: sheppy, Unassigned)

References

Details

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?
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
: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?
: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.
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?
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. :(
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.
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
Status: NEW → RESOLVED
Closed: 12 years ago
Resolution: --- → FIXED
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.
(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.
haha, and there it is, suddenly the tabs are there. They weren't 20 minutes ago. :)
Status: REOPENED → RESOLVED
Closed: 12 years ago → 12 years ago
Resolution: --- → FIXED
I just updated allizom; unfortunately I never remember allizom, as I forget about it since -new is the new standard.
I never look at allizom. I always forget it's there. :)
Looks awesome. Thank you, David!
Priority: -- → P2
Version: Kuma → unspecified
Component: Website → Landing pages
Product: developer.mozilla.org → developer.mozilla.org Graveyard
You need to log in before you can comment on or make changes to this bug.