Боковая панель Off Canvas в CSS стиле Rails

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');
}

** РЕДАКТИРОВАТЬ**

вот ссылка на геройку https://hlinreykdal.herokuapp.com/

Было бы очень признательно, если бы кто-то мог проверить это и направить меня на правильный путь.