v4: Navbar improvements #19890

Merged
merged 41 commits into from Oct 19, 2016

Projects

None yet

4 participants

@mdo
Member
mdo commented May 12, 2016 edited

WIP as I slog through #18467.


  • New Sass variables for various navbar components.
  • #17250: Improved (and highly flexible) responsive behaviors added.
  • #17532: Dropdown example for navbars.
  • #17539 , #18863, #18865: Navbar togglers don't respect color scheme.
  • 083271a: Update collapsible navbar docs to demonstrate color scheme functionality of navbar toggler.
  • #17990, #20392, #20749: Clear the floats within .navbar-toggleable-* to avoid broken animation on close.
  • #18049: Restore .navbar-text and add some docs examples.
  • #18855: Docs for examples of using images in navbar brand component.
  • #18599: Clarify usage of .active in navbar navs.
  • #20543: Improve color contrast of navbar nav links.
  • #20856: Navbar brand and image options (solved thanks to utilities).

Still to do:

  • #18053: Container adding extra padding
  • #18115: Revisit light/dark nomenclature
  • #18557: Make sure docs navbar is updated
  • #18751: Input group sizing in navbar
  • #18875: Flexbox navbar
  • Migration docs
mdo added some commits May 12, 2016
@mdo mdo Alternate fix to #18865: Change the .navbar-toggler color for light/d…
…ark navbars as we do with the .navbar-brand
8b7ce08
@mdo mdo Update collapsible navbar docs
- Add .text-muted for text color control over .bg-inverse in the examples
- Add a dark navbar collapse example
083271a
@mdo mdo added css v4 labels May 12, 2016
@mdo mdo added this to the v4.0.0-alpha.3 milestone May 12, 2016
mdo added some commits May 13, 2016
@mdo mdo clarify example with code comment 9c100a6
@mdo mdo add new variable for -toggle-font-size 3021c24
@mdo mdo new var for -toggle-border-radius 906357b
@mdo mdo correction, -toggler-*
745e37a
@mdo mdo more navbar variables c6c0522
@mdo mdo Add dropdown menu example to navbar docs
05bdecd
@mdo mdo add docs note to clear up #18599--active states for navbars can be on…
… anchors or parents
f98f9c9
@mdo mdo Merge branch 'v4-navbars' of https://github.com/twbs/bootstrap into v…
…4-navbars
9c0c5fd
mdo added some commits May 15, 2016
@mdo mdo Restore .navbar-text and add some basic examples to the docs /cc #18049 dfa2536
@mdo mdo improve docs examples for .navbar-text
d4457b3
@os1r1s110
os1r1s110 commented Jul 19, 2016 edited

Is there anything preventing this from being merged in dev branch? I might not really understand completely how it all works yet... sorry.

Is it waiting the "alpha.3" milestone reach? Or is it something else that I don't get?

@rafalp
rafalp commented Jul 19, 2016

@os1r1s110 as first words in PR's say, this is work in progress PR that aims to solve certain issues within BS4's navbars that are tracked here:

#18467

It'll likelly get merged when it's considered done by the author... unless @mdo decides to split the work in few PR's and merges what he has done so far.

@os1r1s110
os1r1s110 commented Jul 19, 2016 edited

@rafalp I did effectively read that this was WIP, but you know sometimes in big open source projects, some open PR get lost in the sea of PRs and other issues so I just wanted to know what was up with this one as there had been no update since a couple of weeks, that's it.... :|

As you can also see my comment on #18467, there has also been no update since a long time in this PR so I kind of just wanted to get an update on the status and verify if it was still at this state or not for the progress. Reading your answer I guess that it does...

@rafalp
rafalp commented Jul 19, 2016

@os1r1s110 It seems that @mdo has reduced his commitment to the project lately:

https://twitter.com/mdo/status/745652402687090688
https://twitter.com/mdo/status/745667785758388224
https://twitter.com/mdo/status/745734499586056192

It may suck if you are waiting for Mark to wrap up his PR's, but that's how it is with open source. Give it time, I'm wholly expecting @mdo to come from nowhere one day and push boatload of work into BS4 ;)

@os1r1s110

Ahah yeah, I couldn't say it sucks to wait for him to close up the navbar PRs because I can't complete them myself so I can't complain.

I'm pretty new to frontend development so I'm trying to build my own version of navbar and just cut it from the bootstrap alpha 2 build to avoid compatibility issues.

@mdo mdo Fixes #17990: clear the floats within .navbar-toggleable-* to avoid f…
…unky animation on close
15f522f
@mdo mdo modified the milestone: v4.0.0-alpha.3, v4.0.0-alpha.4 Jul 25, 2016
@sixteenstudio

@mdo - do dropdowns need adding to navbars - or are they abstracted from the navbar docs now?

mdo added some commits Sep 15, 2016
@mdo mdo Merge branch 'v4-dev' into v4-navbars 64dcb8b
@mdo mdo Fixes #20543: Significantly darken the links in default navbars
39a10e4
@mdo
Member
mdo commented Sep 15, 2016

Added #20543 to this PR to address color contrast a bit.

mdo added some commits Sep 15, 2016
@mdo mdo fix that navbar toggler example in docs
d11c933
@mdo mdo Merge branch 'v4-dev' into v4-navbars 1db3586
@mdo mdo Merge branch 'v4-dev' into v4-navbars
7dee556
@mdo mdo fix bad merge
750a9d7
@mdo mdo remove those files from the diff
9159ad3
@mdo mdo Merge branch 'v4-dev' into v4-navbars b4cdccb
@mdo mdo Merge branch 'v4-navbars' of github.com:twbs/bootstrap into v4-navbars 247ad23
@mdo mdo drop data-target so the dropdown link works 19d6092
@mdo mdo Iterate over breakpoints to generate .navbar-toggleable classes
- Moves .navbar-brand margin and float to media queries
- Replaces the static media queries with an each loop to generate all the needed classes
6e8ce0c
@mdo mdo Fix sass map navbar-toggleable
Follow up to 6e8ce0c. Uses the breakpoint-next mixin to snag the next breakpoint in the media query for proper styling.
b35e77d
@mdo mdo set the border color on the toggler e24f406
@mdo mdo add navbar-brand and navbar-nav styles to the toggleable 484a8e3
@mdo mdo document new navbar classes and styles, update responsive variation, …
…fix broken float classes
25e63a7
@mdo mdo docs copy
8768983
@mdo mdo lint
8be341e
@mdo mdo html linting
9bc5dba
@mdo mdo more html linting
b8cc944
@mdo
Member
mdo commented Oct 18, 2016

Pushed a few major changes to this the last few days. The toggler has been updated, toggleable classes are now generated from the breakpoint Sass map, and docs updated. Overall I think this is in a solid enough place to build on just a tad more in Alpha 6. Definitely want folks to try using it more.

@mdo
Member
mdo commented Oct 19, 2016

Updated opening comment with clearer list of issues this all fixes, and the remaining todos.

mdo added some commits Oct 19, 2016
@mdo mdo Merge branch 'v4-dev' into v4-navbars 271f10f
@mdo mdo Tweak that navbar brand image alignment with new vertical align utils
036bb85
@mdo mdo More navbar example content with forms
4ee28fe
@mdo mdo alt attributes
f8e4a53
@mdo
Member
mdo commented Oct 19, 2016

Punting on some of this for Alpha 6. Trying to wrangle all this ahead of dropping Alpha 5 tomorrow, so apologies for the potentially half baked ship here. 😬

@mdo mdo merged commit 028dd6b into v4-dev Oct 19, 2016

3 of 4 checks passed

savage Savage has initiated its special separate Travis CI build
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details
hound No violations found. Woof!
@mdo mdo deleted the v4-navbars branch Oct 19, 2016
@mdo
Member
mdo commented Oct 19, 2016

Going to track remaining work for Alpha 6 in #20937.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment