2016-06-27 39 views
1

某些用戶(包括我)根本沒有看到註冊表格 - 尤其是在Chrome中。流星:註冊表格有時無法正確呈現

請在Firefox中先看看: http://openstrategynetwork.com/joinus

在Chrome中會發生什麼:

enter image description here

的按鈕和輸入框纔開始出現,當你將鼠標懸停在該地區:

enter image description here enter image description here

或者在瀏覽器窗口大小調整時顯示所有內容。

最奇怪的 - 還有一點點怪異 - 事情是,當我向後滾動,我看到在後臺登記表格:

enter image description here

我使用的useraccounts包。

注意:這裏是all source

我的配置文件(配置/ at_config.js):

// Options 
AccountsTemplates.configure({ 
    // preSignUpHook: function (error, state) { 
    // console.log("love"); 
    // }, 
    // defaultLayout: 'emptyLayout', 
    focusFirstInput: false, 
    showForgotPasswordLink: true, 
    overrideLoginErrors: true, 
    enablePasswordChange: true, 

    sendVerificationEmail: true, 
    // enforceEmailVerification: true, 
    //confirmPassword: true, 
    //continuousValidation: false, 
    showLabels: false, 
    //forbidClientAccountCreation: true, 
    //formValidationFeedback: true, 
    homeRoutePath: '/', 
    redirectTimeout: 2000, 
    //showAddRemoveServices: false, 
    showPlaceholders: true, 

    negativeValidation: true, 
    positiveValidation: true, 
    negativeFeedback: true, 
    positiveFeedback: true, 

    // Privacy Policy and Terms of Use 
    //privacyUrl: 'privacy', 
    //termsUrl: 'terms-of-use', 
    texts: { 
    sep: "OR REGISTER with your social account:", 
    title: { 
     signUp: "REGISTER by creating a new account:" 
    }, 
    button: { 
     signUp: "REGISTER" 
    }, 
    socialSignUp: "", 
    socialWith: "" 
    } 
}); 

var submitFunction = function(error, state){ 
    // if (!error) { 
    // if (state === "signIn") { 
    //  // Successfully logged in 
    //  console.log("hook logged in"); 
    // } 
    // if (state === "signUp") { 
    //  // Successfully registered 
    //  console.log("hook singup"); 
    // } 
    // } 
}; 


// remove fields and add them back in the right order 
AccountsTemplates.removeField('email'); 
AccountsTemplates.removeField('password'); 


//all register fields 
AccountsTemplates.addFields([ 
    { 
     _id: 'firstName', 
     type: 'text', 
     placeholder: "First Name*", 
     required: true, 
     re: /^[^\d]{2,}$/i, 
     errStr: "Please enter your first name.", 
    }, 
    { 
     _id: 'lastName', 
     type: 'text', 
     placeholder: "Last Name*", 
     required: true, 
     re: /^[^\d]{2,}$/i, 
     errStr: "Please enter your last name.", 
    }, 
    { 
     _id: 'email', 
     type: 'email', 
     placeholder: "Email Address*", 
     required: true, 
     displayName: "email", 
     re: /[email protected](.+){2,}\.(.+){2,}/, 
     errStr: 'Invalid email', 
    }, 
    { 
     _id: 'institution', 
     type: 'text', 
     placeholder: "Institution/Company*", 
     required: true, 
     // re: /^[^\d]{2,}$/i, 
     minLength: 2, 
     errStr: "Please enter the institution or company you work for.", 
    }, 
    { 
     _id: 'interests', 
     type: 'text', 
     placeholder: "Interests regarding Open Strategy*", 
     required: true, 
     re: /^[^\d]{2,}$/i, 
     errStr: "Please enter the your interests in the institution/company.", 
     template: 'interests' 
    }, 
    { 
     _id: 'position', 
     type: 'text', 
     placeholder: "Position", 
     re: /^[^\d]{2,}$/i, 
     errStr: "Please enter the your position in the institution/company.", 
    }, 
    { 
     _id: 'uploadProfile', 
     type: 'text', 
     template: 'uploadInput' 
    }, 
    { 
     _id: 'password', 
     type: 'password', 
     placeholder: "Password*", 
     required: true, 
     minLength: 6, 
     errStr: 'Password must be at least six characters long', 
    }, 
    { 
     _id: 'password_again', 
     type: 'password', 
     placeholder: "Confirm Password*", 
     required: true, 
     minLength: 6, 
     errStr: 'Password must be at least six characters long', 
    } 
]); 

我的助手文件(客戶端/模板/帳戶模板/ joinus.js):

Template.joinUs.onRendered(function() { 
    // if scrolling is necessary $("html, body").animate({ scrollTop: 0 }); 
    window.scrollTo(0, 0); 
    // SCRIPT 
    setInterval(function(){ 
     if(window.location.href.split('/').pop()=='joinus'){ 
      var pswVal = $("[name='at-field-password']")[0].value; 
      var pswValL = pswVal.length; 
      var pswAVal = $("[name='at-field-password_again']")[0].value; 
      var pswAValL = pswAVal.length; 
      if(pswVal==pswAVal && pswValL>5 && pswAValL>5){ 
       $('.form-group:eq(15) .glyphicon.glyphicon-remove.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok').css("color","green"); 
       $('.form-group:eq(15) .help-block').addClass('hide'); 
       $("[name='at-field-password_again']").css({"border-style":"solid", "border-color":"green"}) 
      }else{ 
       $("[name='at-field-password_again']").css({"border-style":"", "border-color":""}); 
       $('.form-group:eq(15) .glyphicon.glyphicon-remove.form-control-feedback').removeClass('glyphicon-ok').css("color",""); 
       $('.form-group:eq(15) .help-block').removeClass('hide'); 
      } 
     } 
    }, 10); 
}); 

Template.joinUs.events({ 
    'click .js-scrollToForm': function (evt, tpl) { 
    evt.preventDefault(); 
    $('html, body').animate({ 
     scrollTop: $('#js-scrollStop').offset().top - 35 
    }, 2000); 
    } 
}); 

我的HTML文件(客戶端/模板/帳戶模板/ joinus.html):

<template name="joinUs"> 

    <!-- Stage --> 
    <header> 
    <div class="header-content"> 
     <!-- Breadcrumb --> 
     <ol class="breadcrumb text-left"> 
      <li><a class="breadcrumb-link" href="{{pathFor route = 'home'}}">Home</a></li> 
      <li class="active">Join us</li> 
     </ol><!-- End of Breadcrumb --> 
     <div class="header-content-inner"> 
      <h1>YOUR BENEFITS</h1> 
      <hr> 
      <h2>As a member of OSN you will become part of a thriving network of scholars interested in open strategy. There are many advantages of joining the OSN. Registration is free.</h2> 
      <button type="button" href="#joinus" class="btn btn-primary btn-xl page-scroll js-scrollToForm">JOIN US</button> 
     </div> 
    </div> 
    </header> <!-- ./Stage --> 

    <!-- Services Section --> 
    <section id="services"> 
    <div class="container"> 
     <div class="row text-center extra-spacing-top extra-spacing-bottom joinus-icons"> 
      <div class="col-sm-4"> 
       <span class="fa-stack fa-4x"> 
        <!-- <i class="fa fa-circle fa-stack-2x"></i> --> 
        <i class="fa fa-bullhorn fa-stack-1x fa-inverse"></i> 
       </span> 
       <h4 class="service-heading">News</h4> 
       <p class="text-muted">As a member you can submit news to the whole Open Strategy community and disseminate related research findings.</p> 
      </div> 
      <div class="col-sm-4"> 
       <span class="fa-stack fa-4x"> 
        <!-- <i class="fa fa-circle fa-stack-2x text-primary"></i> --> 
        <i class="fa fa-comments-o fa-stack-1x fa-inverse joinus-icons"></i> 
       </span> 
       <h4 class="service-heading">Collaborations</h4> 
       <p class="text-muted">Collaborate internationally by searching for data on OSN members.</p> 
      </div> 
      <div class="col-sm-4"> 
       <span class="fa-stack fa-4x"> 
        <!-- <i class="fa fa-circle fa-stack-2x text-primary"></i> --> 
        <i class="fa fa-newspaper-o fa-stack-1x fa-inverse"></i> 
       </span> 
       <h4 class="service-heading">Literature</h4> 
       <p class="text-muted">Search for Open Strategy literature on specific topics within the Bibliography</p> 
      </div> 
     </div> 
    </div> 
    </section> 

    <!-- <div id="js-scrollStop"></div> --> 

    <!--  Registration Form --> 
    <section class="bg-light-gray extra-spacing-top" id="js-scrollStop"> 
    <div class="container"> 
     <form> 
      {{> atForm state='signUp'}} 
     </form> 
    </div> 
    </section> 
</template> 

編輯:

由於@Jeremy Iglehart錯誤可能會歸結到這個文件:

客戶端/模板/帳戶模板/ at_form_mod.html:

<template name="myAtForm"> 
    {{#unless hide}} 
    <div class="at-form"> 
     <!-- {{#if showTitle}} 
     {{> atTitle}} 
     {{/if}} --> 
     {{#if showError}} 
     {{> atError}} 
     {{/if}} 
     {{#if showResult}} 
     {{> atResult}} 
     {{/if}} 
     {{#if showPwdForm}} 
     {{> atPwdForm}} 
     {{/if}} 
     {{#if showTermsLink}} 
     {{> atTermsLink}} 
     {{/if}} 
     {{#if showSignUpLink}} 
     {{> atSignupLink}} 
     {{/if}} 
     <!-- {{#if showServicesSeparator}} 
     {{> atSep}} 
     {{/if}} --> 
     {{#if showOauthServices}} 
     {{> atOauth}} 
     {{/if}} 
     <!-- {{#if showSignInLink}} 
     {{> atSigninLink}} 
     {{/if}} --> 
    </div> <!-- end main div --> 
    {{/unless}} 
</template> 

的.LESS文件可以在這裏找到(太長時間粘貼在這裏): client/templates/styles/styles.less

+1

埃米爾,首先 - 偉大的設計...保持它,你會到達那裏。這對我來說就像一個流氓CSS問題沒有?有些東西被設置爲隱藏或某物。你有沒有可能會這樣做的CSS? –

+1

它在我看來像https://github.com/OpenStratNet/OSN/blob/master/client/templates/account-templates/at_form_mod.html是你的問題可能的地方 - '{{#unless hide}}和在那裏你有{{#if'showOauthServices}}'你在哪裏定義'hide'和'showOauthServices'? –

+1

@JeremyIglehart:謝謝你的激勵話語。非常友善:)雖然我想在這個項目後停止編程:(不幸的是,我不知道這是在哪裏定義的,它在useraccounts包中,但它已經是一個很好的提示了。 PS:我只是想知道爲什麼Chrome有問題 –

回答

1

埃米爾,我不知道爲什麼Chrome是一個給你的問題。

如果我是你,我會編輯這個。除非你真的需要這個「隱藏」,否則我會把所有這些陳述都拿出來。它看起來像你的設計想要那個頁面一直在運行。

從模板級別拿出你不想要的,看看你得到了什麼。

這是一個黑客攻擊,但它可能會讓你感動。

例如:

<template name="myAtForm"> 
    <div class="at-form"> 
     {{> atTitle}} 
     {{#if showError}} 
     {{> atError}} 
     {{/if}} 
     {{#if showResult}} 
     {{> atResult}} 
     {{/if}} 

     {{> atPwdForm}} 

     {{#if showTermsLink}} 
     {{> atTermsLink}} 
     {{/if}} 
     {{#if showSignUpLink}} 
     {{> atSignupLink}} 
     {{/if}} 
     <!-- {{#if showServicesSeparator}} 
     {{> atSep}} 
     {{/if}} --> 
     {{> atOauth}} 
     <!-- {{#if showSignInLink}} 
     {{> atSigninLink}} 
     {{/if}} --> 
    </div> <!-- end main div --> 
</template> 

只要拿出你不需要有什麼。

+1

嘗試過 - 但沒有奏效。感謝您的時間:) –

+1

對不起,它沒有工作,不要放棄!你會找到它。我認爲對你來說最好的辦法是學習[這個meteorchef鏈接](https://themeteorchef.com/recipes/roll-your-own-authentication/)和「滾動你自己」。我敢打賭,如果你閱讀[整篇文章](https://themeteorchef.com/recipes/roll-your-own-authentication/),你會發現你需要做什麼。 –

+1

不要後悔。感謝您的熱情話語。 –