In this video, we're going to work on all our button changes.

The first one is to update the buttons on the employee homepage so they look good on a mobile screen. Essentially, we want the button text to be spread across multiple lines, so everything is visible on a small screen.

To do this, I did some research, and found that a good implementation would be to override the button class.

Open application.css , and create a new class called .btn-employee-home .

/* app/assets/stylesheets/application.css.scss */

.btn-employee-home {
  white-space:normal !important;
}

Next, open _pending_audit_confirmations.html.erb and use this class.

<!-- app/views/static/_pending_audit_confirmations.html.erb -->

<% pending_audit_confirmations.each do |pending_audit_confirmation| %>
    <%= link_to "I confirm that I did not perform any overtime for the week of: #{pending_audit_confirmation.start_date} through #{pending_audit_confirmation.start_date + 6.days}", confirm_audit_log_path(pending_audit_confirmation), class: 'btn btn-primary btn-block btn-lg btn-employee-home', id: "confirm_#{pending_audit_confirmation.id}", data: { confirm: 'Are you sure you want to confirm that you did not perform any overtime?' } %>
<% end %>

Let's go to rails console and create an audit log for the last employee. Test it in the browser, and this should look like this:

I think it needs more work. Let's remove the max-width style from our .btn-employee-home, and see how this looks.

That's exactly what we want.

Next, we want the buttons to be displayed based on the start date. By default, rails displays the last updated record on top, and we want to change this order.

Open static_controller.rb and use the order method. We're passing two parameters - the first one is the variable based on which the list should be sorted and the second is the order.

# app/controllers/static_controller.rb

class StaticController < ApplicationController
  def homepage
    if admin_types.include?(current_user.type)
      @pending_approvals = Post.submitted
      @recent_audit_items = AuditLog.last(10)
    else
      @pending_audit_confirmations = current_user.audit_logs.pending.order('start_date DESC')
    end
  end
end

To test, I'm quickly going to create an audit log for the last employee along with a start date. If we check on the browser, its' working.

Now, I don't like this order method here. So, open audit_log.rb and create a custom scope and call it by_start_date

# app/models/audit_log.rb

scope :by_start_date, -> { order('start_date DESC') }

Now, use this scope instead of order method in static_controller.rb, like this:

# app/controllers/static_controller.rb

@pending_audit_confirmations = current_user.audit_logs.pending.by_start_date

That's working too!

Resources

• Code at this stage