0

我在我的 Rails 应用程序中添加了一个画布外设计登录侧边栏。

通过从各种教程中获取点点滴滴并将其与我自己的代码混合，我已经设法使其几乎正常工作。

在我views/layouts/application.html.erb的渲染中，包含设计登录表单<%= render 'login' %>的部分被隐藏left: -300px;，直到用户单击菜单中的登录按钮，<a href="#" class="toggle-nav">Log in</a>然后它从左侧轻轻滑动到视口。这一切都非常顺利，但调整“登录侧边栏”的高度是一个问题。

_login.html.erb 的代码是

    <div id="site-canvas">

        <div id="site-menu">
        <%= form_for(:user, :url => session_path(:user)) do |f| %>
          <div class="form-group red">
            <%= f.label :email %>
            <%= f.text_field :email, class: 'form-control' %><br>
            <br>
            <%= f.label :password %>
            <%= f.password_field :password, class: 'form-control'  %><br>
            <br>
            <%= f.check_box :remember_me %>
            <%= f.label :remember_me %><br>
            <p><%= f.submit 'Sign in' %></p><br>
            <br>
            <%= link_to "Forgot your password?", new_password_path(:user) %>
          </div>    
        <% end %>
        </div>


    </div><!-- #site-canvas -->
  </div><!-- #site-wrapper> -->

登录表单运行良好，但样式似乎是个问题，至少我还没有设法正确设置它的样式，所以loggin部分跨越了视口的整个高度，我几乎花了一整天的时间来做这件事。（我用谷歌搜索，查看了各种教程，进行了自己的更改，搜索了堆栈溢出等。）

这是部分的“css”。

#site-wrapper {
position: relative;
height:100%;
width: 100%;


}

#site-canvas {
  width: 100%;
  height: 100%;
  position: relative;

  -webkit-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition: .3s ease all;
  transition: .3s ease all;


}

#site-menu {
  margin-top: 57px;
  width: 300px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -300px;
  background: rgba(255, 255, 255, .7);
  padding-top: 100px;
  padding-left: 20px;
}

#site-wrapper.show-nav #site-canvas {
  -webkit-transform: translateX(280px);
  transform: translateX(280px);
}

.red{

  background: rgba(255, 255, 255, .7);
  padding: 50px 20px 220px 20px;
}

这.red class是我在多次尝试使登录表单背景跨越视口的整个高度时所做的一个类。我很确定这不是正确的方法。

此代码application.js控制切换

$(function() {
  $('.toggle-nav').click(function() {
    // Calling a function in case you want to expand upon this.
    toggleNav();
  });
});



function toggleNav() {
if ($('#site-wrapper').hasClass('show-nav')) {
  // Do things on Nav Close
  $('#site-wrapper').removeClass('show-nav');
} else {
  // Do things on Nav Open
  $('#site-wrapper').addClass('show-nav');
}

//$('#site-wrapper').toggleClass('show-nav');
}

** 编辑**

这是heroku的链接https://hlinreykdal.herokuapp.com/

如果有人可以检查一下并引导我走上正确的道路，将不胜感激。

4

0 回答 0