Enhance ui for login

4 years ago · 2f692fd922
3 changed files with 11 additions and 4 deletions
--- a/app/javascript/src/application.scss
+++ b/app/javascript/src/application.scss
@ -1,5 +1,6 @@
@import "~bootstrap/scss/bootstrap";
@import "./application/sidenav";
+@import "./application/sessions";

 .tableFixHead { 
    overflow: auto;
--- a/app/javascript/src/application/sessions.scss
+++ b/app/javascript/src/application/sessions.scss
@ -0,0 +1,6 @@
+.login-body-box .content-body {
+    padding: 26px;
+    background: #949494ba;
+    box-shadow: 10px 5px 5px #e8e8e8;
+    border-radius: 4px;
+}
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -11,17 +11,17 @@
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

-  <body class="container-fluid h-100 w-100">
+  <body class="container-fluid h-100 w-100 p-0">

-    <div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0' : 'row h-100 justify-content-center align-items-center' %>">
+    <div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0 ms-0' : 'row h-100 justify-content-center align-items-center' %>">
      <% if current_user.present? %>
        <div class="col-auto col-md-3 col-xl-2 px-sm-2 px-0 bg-secondary min-vh-100" style="padding: 0 !important;">
          <%= render(SidenavComponent.new(current_user: current_user))%>
        </div>
      <% end %>

-      <div class="<%= current_user.present? ? 'col py-3' : 'col-sm-3' %>">
-        <div >
+      <div class="<%= current_user.present? ? 'col py-3' : 'col-sm-3 login-body-box' %>">
+        <div class="content-body">
          <%= yield %>
        </div>
      </div>