Skip to content

Added responsive styles (redux)#25

Closed
martinbean wants to merge 6 commits intofacebook:masterfrom
martinbean:master
Closed

Added responsive styles (redux)#25
martinbean wants to merge 6 commits intofacebook:masterfrom
martinbean:master

Conversation

@martinbean
Copy link
Copy Markdown

Added responsive styles, such as making the menu collapsible and content columns fluid and collapsible at small widths.

@zpao
Copy link
Copy Markdown
Member

zpao commented May 30, 2013

Thanks Martin! I'll take a look at this soon, we've just been following up with some other issues today. Not forgotten though :)

Comment thread docs/_css/react.scss Outdated
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the only behavior that's bugging me. Since this nav is important for getting around the docs, hiding it is a bummer. Can you do something else with it instead? (Maybe unfloat, and compact it a bit?)

@martinbean
Copy link
Copy Markdown
Author

Hi Paul, I’ll get on these two issues now.

Comment thread docs/js/menu.js
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is actually a pretty naive implementation (eg. if the element had class="reallyopen" it would not work right).

var classes = ' ' + element.className + ' ';
var hasClass = classes.indexOf(' ' + className + ' ') > -1
// then add/remove, trim, set

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see 😞

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you're attached to RegExps, you might be able to just use '\b' + tclass + '\b' when constructing so it matches word boundaries.

The other thing we should do is actually set up listeners instead of hijacking window.onload. We do this in our transform script so we should do that: https://github.com/facebook/react/blob/master/vendor/browser-transforms.js#L106-L110

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I’m not particularly attached to RegExp; in fact JavaScript isn’t my main proficiency as you may see above! That class toggle function was just something I cobbled together without the comfort of jQuery.

I’ve pushed the style changes mentioned, and will look at improving the JavaScript for the responsive menu.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can't use word boundaries (\b) for this since hyphens are valid in class names. You need something like new RegExp('(?:^|\\s)' + tclass + '(?:\\s|$)').

@zpao
Copy link
Copy Markdown
Member

zpao commented Jul 17, 2013

Hey @martinbean, I'm sorry we haven't made this work. We're actually working a on sizable redesign and I think it's going to be response from the start there (yea @jordwalke?), so I'm going to close this out and let it just happen there. I really appreciate you taking the time to give this a go though!

@zpao zpao closed this Jul 17, 2013
matthewjohnston4 added a commit that referenced this pull request Mar 3, 2015
vjeux added a commit that referenced this pull request Mar 4, 2015
matthewjohnston4 added a commit that referenced this pull request Mar 4, 2015
josephsavona pushed a commit to josephsavona/react that referenced this pull request Mar 20, 2026
Ported PruneUnusedLabelsHIR (facebook#25) from TypeScript — removes unused label
terminals whose body block immediately breaks to fallthrough, merging the
blocks. Zero regressions.
dilberx pushed a commit to dilberx/react that referenced this pull request Apr 15, 2026
hanzili added a commit to hanzili/hanzi-browse that referenced this pull request Apr 17, 2026
Smoke run against prod caught my original "Prevent bubbling" substring
was hallucinated — the actual title of facebook/react#25 (a PR, not an
issue) is "Added responsive styles (redux)". Updated to a substring
match that reflects reality.

This is exactly what the harness exists to catch. Run that produced
the evidence: task 28bb80cc-4db0-4a0e-8de4-18a06cb9ac7a, 6 steps,
completed 2026-04-17.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants