I blogged on this earlier and have been tweeting about it over the weekend, but I think I'm ready to "formally" release my Brackets extension for CanIUse.com:
https://github.com/cfjedimaster/brackets-caniuse
Once installed, it adds a new option to your View menu: "Show CanIUse"
This will load a panel at the bottom. The left side is a list of all the possible features. This list is rather long so you can use the filter option on top to narrow it down.
To view a feature, simply click on it. I decided to show a subset of the available browsers from CanIUse and if the ones I chose are missing anything important (or if you think some should be trimmed), just let me know. I also show the top level stats as well.
Unfortunately, this is where I have a bit of a problem. Everything lays out well - and pretty close to the site, but also pretty tall vertically. You have to scroll to see the support. So for example, here is what you see initially:
and you then scroll down to see the actual table:
Obviously it is the numeric stats table to the right causing most of the issue, but I'm unsure as of how to fix. I'm thinking of maybe making it horizontal and placing it right below the legend.
Anyway - please let me know what you think!
Archived Comments
Ray,
Very cool!
There's a pull request that should get merged any day now to allow re-sizing of the bottom panel height, so that should make a big difference for this (or any) extension that uses the bottom panel.
The data in the table cells is pretty small, so it should be easy to squeeze a lot of width from that table so it fits to the right of the list. I have a 1200px wide display and when I use maximize Brackets, the results box already fits on the right. Also put an overflow-y: auto on the list so you can see the list and data at the same time.
The only problem I'm seeing is that the bottom of the vertical scroll bar is clipped on the bottom, so the height seems to be incorrect.
Thanks for another great Brackets extension,
Randy
Randy, I do have overflow on - but it's he generic, not -y.
I see the issue you mean on the left side. I'll add some padding.
Randy, check it out. I've moved the support percentage table into a line. More of the content fits now. I also made the panel a bit higher.
Ooops, I guess I wasn't auto-subscribed to the comments.
That looks better, but I would try something like changing these widths from fixed to relative:
#caniuse_catlistColumn width: 300px --> 30%
#caniuse_supportdisplay width: 700px --> 70%
The table squeezes way down horizontally, so maybe you could even go 35%/65%.
Also try giving them both height: 100% so each gets its own scrollbar, that way you can see the table even when you scroll down the category list.
- - - - -
I'm still having scrollbar problem on Win7. I can't see the bottom scroll arrow, and I have to drag thumb below window to scroll to bottom. Let me know if you want a screen shot. Maybe height:100% will fix it.
- - - - -
Bottom panel vertical resizing just got merged into master. You'll need to amek a couple small changes to your extensions to get it to work. Take a look at this pull request: https://github.com/adobe/br...
You'll need to add a couple classes to your containers, and also a little setup code similar to JSLintUtils.js and FindInFiles.js.
Randy, probably a dumb CSS mistake on my part, but when I make those first two changes, the layout breaks. The table gets displayed at the bottom of the left hand menu.
I missed your last part. (Ok, and ignored the Win7 part too. ;) I'm going to wait for the next sprint to be officially released. I've had issues running from GitHub before and frankly find it too much of a pain to deal with.