Merge pull request #41 from lexintegritastech/feature-enhancement-ui

Enhance ui for sessions
4 years ago · a0010760c4
9 changed files with 39 additions and 11 deletions
--- a/app/javascript/images/.keep
+++ b/app/javascript/images/.keep
--- a/app/javascript/images/application/cdao-bg.png
+++ b/app/javascript/images/application/cdao-bg.png
--- a/app/javascript/images/application/cdasiaonline_logo.png
+++ b/app/javascript/images/application/cdasiaonline_logo.png
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@ -27,6 +27,9 @@ Rails.start()
 Turbolinks.start()
 ActiveStorage.start()

+const images = require.context('../images', true)
+const imagePath = (name) => images(name, true)
+
 $(document).on("ready turbolinks:load", function () {
  $('#toggleSideNav').on('click', function () {
    $('#sidenav').toggleClass('active');
--- a/app/javascript/src/application.scss
+++ b/app/javascript/src/application.scss
@ -102,4 +102,12 @@
  margin-bottom: 10px;
  padding-left: 5px;
  background: #efefef;
+}
+
+.sessions-body-bg {
+  background-image: url('../../javascript/images/application/cdao-bg.png');
+  background-repeat: no-repeat;
+  background-size: cover;
+  overflow-x: hidden;
+  box-shadow: inset 0 0 0 2000px rgb(154 107 107 / 30%);
 }
--- a/app/javascript/src/application/sessions.scss
+++ b/app/javascript/src/application/sessions.scss
@ -1,6 +1,19 @@
 .login-body-box .content-body {
    padding: 26px;
-    background: #949494ba;
-    box-shadow: 10px 5px 5px #e8e8e8;
+    background: #9494946b;
+    box-shadow: 10px 5px 5px #7a6346;
    border-radius: 4px;
-}
+    width: 350px;
+    margin-top: -100px;
+}
+
+.login-logo {
+    height: 100%;
+}
+
+.login-logo {
+    .app-logo {
+        width: 370px;
+        margin-top: 30px;
+    }
+}
--- a/app/views/devise/passwords/new.html.erb
+++ b/app/views/devise/passwords/new.html.erb
@ -1,4 +1,4 @@
-<h3 class="text-center mb-3">Forgot your password?</h3>
+<h3 class="text-center mb-3 text-white">Forgot your password?</h3>

 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>
@ -9,7 +9,7 @@
  </div>

  <div class="d-grid gap-2 mb-3">
-    <%= f.submit "Send me reset password instructions", class: "btn btn-primary" %>
+    <%= f.submit "Send me reset password instructions", class: "btn btn-danger" %>
  </div>
 <% end %>

--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@ -1,4 +1,4 @@
-<h2 class="text-center">Log in</h2>
+<h2 class="text-center text-white">Log in</h2>

 <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>

@ -22,7 +22,7 @@
  <% end %>

  <div class="d-grid gap-2 mb-3">
-    <%= f.submit "Log in", class: "btn btn-primary" %>
+    <%= f.submit "Log in", class: "btn btn-danger" %>
  </div>
 <% end %>

--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@ -11,16 +11,20 @@
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

-  <body class="container-fluid h-100 w-100 p-0" data-controller="selectize">
-
-    <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' %>">
+  <body class="<%= current_user.present? ? 'container-fluid h-100 w-100 p-0' : 'container-fluid h-100 w-100 p-0 sessions-body-bg' %> " data-controller="selectize">
+    
+    <div class="<%= current_user.present? ? 'row flex-nowrap h-100 w-100 p-0 ms-0' : 'row h-100 justify-content-end 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, opts: { is_sidenav: true }))%>
        </div>
      <% end %>

-      <div class="<%= current_user.present? ? 'col py-3 main-content-body' : 'col-sm-3 login-body-box' %>">
+      <div class="<%= current_user.present? ? 'd-none' : 'col-sm-8 login-logo' %>">
+      <%= image_pack_tag 'application/cdasiaonline_logo.png', class:"app-logo" %>
+      </div>
+      <div class="<%= current_user.present? ? 'col py-3 main-content-body' : 'col-sm-4 login-body-box' %>">
        <div class="content-body">
          <%= yield %>
        </div>