Question

我在我的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/

的链接

如果有人能够检查出来并引导我走上正确的道路，我们将非常感激。

Rails CSS样式中的Off Canvas侧栏

0 个答案: