如何在流星登录按钮上设置浮动

Question

我的布局模板中有这个导航栏

<template name='layoutTemplate'>
    <div class="container-fluid layout_container">
        <div class="navbar layout_navbar">
            <h3 class='layout_header'>maglens</h3>
            <a class='button-text btn' id='home_button' href="{{pathFor 'home'}}">HOME</a>
            {{> loginButtons}}
            <a class='button-text btn' id='about_button' href="{{pathFor 'about'}}">ABOUT</a>
        </div>
    </div>
    {{> yield}}
</template>

我检查了{{> loginButtons}}的html类，但是当我尝试设置float（即使使用!important）时，没有任何反应。 我可以使用填充/边距到达我需要的地方，但这会扰乱网站的响应能力。

我在这里错过了什么？

Answer 1

您是否考虑过使用无样式版本？

修改起来会更容易。

编辑：如果您想深入研究修改无样式，请查看存储库。您特别希望查看两个文件：accounts-ui.js 和 login_buttons.html（分别是事件和标记）。

就个人而言，我一直在编写自己的登录表单，因为帐户实际上是核心API的一部分，适合我使用的任何前端框架。

您可以通过查阅文档并检查标题为"帐户"的部分轻松推出自己的文档。这是我的一些代码：

//create a moderator for a blank app
Meteor.startup(function () {
  if (Meteor.users.find().count() === 0) {
    var andy = {
      email: '[e-mail]',
      password: 'samplepw',
      profile: {
        role: "moderator",
        name: "Andy"
      }
    }
...
Accounts.createUser(andy);

这就是您可以利用帐户来施展魔法的方式。

// an entire template login modal (semantic ui)
<template name="login">
  {{#if currentUser}}
  <a href="#" class="item">{{currentUserEmail}}</a>
  <a data-logout class="item">
    Logout
  </a>
  {{else}}
  <a data-open-login-modal class="borderless item">  Login
  </a>
  <div id="loginModal" class="ui modal">
    <i class="close icon"></i>
    <div class="header">
      Sign in
    </div>
    <div class="content">
      <form id="loginForm" class="ui form">
        <label>Email</label>
        <input name="email" type="text">
        <label>Password</label>
        <input name="password" type="password">
      </form>
    </div>
    <div style="background-color: #F7F7F7" class="ui green bottom attached segment">
      <div data-register class="ui blue button">Register</div>
      <div data-login class="ui green button float-right">Login</div>
      <div data-forgot-password class="ui yellow button float-right">Forgot password?</div>
    </div>  
  </div> 
  <div id="registerModal" class="ui modal">
    <i class="close icon"></i>
    <div class="header">
      Register a New Account
    </div>
    <div class="content">
      <form id="registerForm" class="ui form">
        <label>Email</label>
        <input name="email" type="text">
        <label>Password</label>
        <input name="password" type="password">
        <label>Confirm Password</label>
        <input name="confirm" type="password">
      </form>
    </div>
    <div style="background-color: #F7F7F7" class="ui green bottom attached segment">
      <div data-create-account class="ui green button float-right">Create Account</div>
    </div>  
  </div>
  {{/if}}
</template>

以上是标记...以下是事件：

Template.login.events({
  'click [data-open-login-modal]': function(e, tpl){
    var login = $('#loginModal').modal('toggle');
    var registeration = $('#registerModal');
    login.on('click', '[data-login]', function(){
      var email = $('#loginForm > [name="email"]').val();
      var password = $('#loginForm > [name="password"]').val();
      // this.keypress(function(event){
      //   console.log(event); 
      //   if (event.keyCode === 13) {
      //     loginUser();
      //   }
      // });
    if (email.length > 0 && password.length > 0) {
      Meteor.loginWithPassword(email, password, function(e){
        if(e) {
          console.log(e) 
        } else {
          console.log('user should be getting logged in...' + email); 
        }
        $('#loginModal').modal('toggle');
      })
    }
    });
    login.on('click', '[data-register]', function(){
      registeration.modal('toggle').on('click', '[data-create-account]', function(tpl){
        var email = $('#registerForm > [name="email"]').val();
        var password = $('#registerForm > [name="password"]').val();
        var confirmation = $('#registerForm > [name="confirm"]').val();
        // check that email/password aren't empty and that
        // email/confirmation are the same
        if (email.length > 0 && password.length > 0 && password === confirmation) {
          var user = {
            "email": email,
            "password": password,
            "profile": {
              'roles': ['basic'],
              'rep': 1
            }
          };
          Meteor.call('registerUser', user, function(err, res){
            if (!err) {
              Meteor.loginWithPassword(res.email, res.password, function(){
                registeration.modal('toggle');
              })  
            } else {
              console.log(err); 
            }
          })
        } else {
          console.log('Fields are missing'); 
        }
      });
    });
    login.on('click', '[data-forgot-password]', function(){
      console.log('clicked forgot-password'); 
    });         
},
'click [data-logout]': function() {
  Meteor.logout(function(){
    console.log('logged out'); 
  })
}
});
Template.login.onRendered = function() {
  $('#authenticateForm').modal();
  $('#registerForm').modal();
}

它还没有完全完成，您可以看到忘记密码没有逻辑，但注册/登录是完全有效的。

实际上，您只是从表单中获取.val()，然后在最简单的级别将数据传递到帐户。