Question

У меня есть эта Navbar внутри моей LayoutTemplate

<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> 

И Ive проверил HTML класс {{> loginButtons}}, но когда я пытаюсь установить поплавок (даже с !important), ничего не происходит. Я могу использовать padding/margin, чтобы добраться до того места, которое мне нужно, но это противоречит быстроте реакции на веб-сайт.

Что мне здесь не хватает?

Answer 1

Вы считаете, что используете версию unstyled?

Это будет легче изменить.

РЕДАКТИРОВАТЬ: если вы хотите выкопать в модифицирующую неровность, проверьте repo. Есть два файла, которые вы хотите увидеть: 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: 'andy@admin.ca', 
     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() из формы, а затем передаете данные в учетные записи на простейшем уровне.