Added property name to metadata - refs #66

[joecritch]

This adds the property name in a <code /> element, next to the detect title. This gives the benefit of not having to look up or guess the property when writing CSS or JS.

Refs #66

[patrickkettner]

could you screenshot it real quick?

[joecritch]

Sure, here you go.

[patrickkettner]

do you think its clear without a label explaining what that means?

On Thu, Dec 17, 2015 at 3:00 AM, Joe Critchley [email protected]
wrote:

Sure, here you go.

[image: pull-67-modernizr-neue]
https://cloud.githubusercontent.com/assets/24449/11868086/4a1ae978-a4ad-11e5-9df7-646864751c8c.png

—
Reply to this email directly or view it on GitHub
#67 (comment)
.

patrick

[ryanseddon]

Maybe we could have Modernizr.<name> and .<name>

[stucox]

Or even something like

Usage:

if (Modernizr.history) {
  // supported
}
else {
  // not supported
}

Which would allow us to call out async detects as:

Modernizr.on('webp', function (result) {
  if (result) {
    // supported
  }
  else {
    // not supported
  }
});

[joecritch]

I think we should separate the concern of what the alias is vs. how to use it. Perhaps a progressive "?" help icon next to it that, when clicked, opens up usage examples with that alias in context?

Edit: Maybe not a "?" icon, but a "Usage" link?

[patrickkettner]

@stucox I think the usage is a great idea, but not for this specific issue. It means the user looses a lot of the scan ability
@joecritch 👍

still not sure about how to show this the right way :/

[stucox]

Lateral thought:

Maybe the property name (history) should replace the title ("History API"), then the description could immediately follow (no need for a "Description" title) — and we make sure the first sentence of each description makes it very clear exactly what the detect does; preferably followed by a paragraph break.

[patrickkettner]

would we change what shows on the main list?

[joecritch]

— Made the property name into its own "Usage" box in the right-hand bar
— Added some basical modal functionality when you click "View examples"
— When async is true, it'll show a different JS example

Edit syntax highlighting would be nice? might require a heavy library though

[patrickkettner]

looks great!

re syntax hihglighting, it shoulnd't need any kind of library at all. its all static content that is the same across all examples (as far as structure goes). We just need to pick a color scheme and add the proper classes to each element on the examples, right?

[joecritch]

Good idea!

• Added syntax highlighting
• Improved code indent on async examples
• Moved all CSS to stylesheets

[patrickkettner]

Looks awesome! Do it to it

On Jan 28, 2016, at 5:48 AM, Joe Critchley [email protected] wrote:

Good idea!

Added syntax highlighting
Improved code indent on async examples
Moved all CSS to stylesheets

—
Reply to this email directly or view it on GitHub.

[joecritch]

@patrickkettner merged to master, but it doesn't seem to have been deployed. might be related to #72

[patrickkettner]

There is an issue with detects with multiple properties