erobit / meteor-accounts-ui-bootstrap-dropdown

Meteor accounts-ui package updated to use twitter/bootstrap dropdown
37 stars 218 forks source link

Poor styling when collapsed and navbar-inverse #27

Open DiegoOlivierFernandezPons opened 10 years ago

DiegoOlivierFernandezPons commented 10 years ago

[Using the 'discover meteor' book code with reverse mode navbar]

Login buttons don't appear nicely when the sign-in is collapsed : the "Sign in" and "Create account" buttons appear on the side of the password textarea instead of aligned below. I edited the code of login_buttons_dropdown.html in accounts-ui-bootstrap-dropdown to add a div.

<div>
    <button class="btn btn-primary" id="login-buttons-password" type="button">
      {{#if inSignupFlow}}
      Create
      {{else}}
      Sign in
      {{/if}}
    </button>
    {{#if inLoginFlow}}
    {{#if showCreateAccountLink}}
    <button id="signup-link" class="btn" type="button">Create account</button>
    {{/if}}
</div>

Also, with an inverse navbar, the labels "email" and "password" cannot be read. I fixed that making them bright blue but there is probably a better solution

login-dropdown-list div.dropdown-menu label

{ color: blue; font-weight: bold; }

Last, when the sign-in button is expanded, there is an animation slow-down that is not visible on other sites using bootstrap (for instance bootstrap 2.3.2 documentation). The slowdown is due to the {{loginbuttons}} and disappears when the command is removed. But I haven't been able to identify precisely the culprit.