Changed background color, edited Pagination for Participant page to better match our look for app

This commit is contained in:
Ben 2024-01-22 19:48:38 -06:00
parent edb56c84ef
commit 52e0fbb211
14 changed files with 139 additions and 4 deletions

View File

@ -30,6 +30,8 @@ gem 'devise'
gem 'webpacker'
gem 'kaminari'
# Use Redis adapter to run Action Cable in production
# gem "redis", ">= 4.0.1"

View File

@ -124,6 +124,18 @@ GEM
jbuilder (2.11.5)
actionview (>= 5.0.0)
activesupport (>= 5.0.0)
kaminari (1.2.2)
activesupport (>= 4.1.0)
kaminari-actionview (= 1.2.2)
kaminari-activerecord (= 1.2.2)
kaminari-core (= 1.2.2)
kaminari-actionview (1.2.2)
actionview
kaminari-core (= 1.2.2)
kaminari-activerecord (1.2.2)
activerecord
kaminari-core (= 1.2.2)
kaminari-core (1.2.2)
loofah (2.22.0)
crass (~> 1.0.2)
nokogiri (>= 1.12.0)
@ -283,6 +295,7 @@ DEPENDENCIES
devise
importmap-rails
jbuilder
kaminari
puma (>= 5.0)
rails (~> 7.1.2)
selenium-webdriver

View File

@ -20,5 +20,10 @@ version:
# bundle install
# rails webpacker:install
# gem 'kaminari'
# bundle install
# rails g kaminari:views default

View File

@ -13,3 +13,10 @@
*= require_tree .
*= require_self
*/
/* Add your custom styles here */
.bg-light-grey {
background-color: #e6e5e5da; /* Light grey color */
}

View File

@ -2,8 +2,9 @@ class ParticipantsController < ApplicationController
before_action :set_participant, only: [:show, :edit, :update, :destroy]
def index
@participants = Participant.all
@participants = Participant.order(:last_name).page(params[:page]).per(10) # Adjust the number per page as needed
end
def show
end

View File

@ -0,0 +1,11 @@
<%# Link to the "First" page
- available local variables
url: url to the first page
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
-%>
<span class="first">
<%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, remote: remote %>
</span>

View File

@ -0,0 +1,8 @@
<%# Non-link tag that stands for skipped pages...
- available local variables
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
-%>
<span class="page gap"><%= t('views.pagination.truncate').html_safe %></span>

View File

@ -0,0 +1,11 @@
<%# Link to the "Last" page
- available local variables
url: url to the last page
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
-%>
<span class="last">
<%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, remote: remote %>
</span>

View File

@ -0,0 +1,11 @@
<%# Link to the "Next" page
- available local variables
url: url to the next page
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
-%>
<span class="next">
<%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote %>
</span>

View File

@ -0,0 +1,12 @@
<%# Link showing page number
- available local variables
page: a page object for "this" page
url: url to this page
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
-%>
<span class="page<%= ' current' if page.current? %>">
<%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel} %>
</span>

View File

@ -0,0 +1,35 @@
<%# The container tag
- available local variables
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
paginator: the paginator that renders the pagination tags inside
-%>
<%= paginator.render do -%>
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item <%= 'disabled' if current_page.first? %>">
<%= link_to 'First', participants_path(page: 1), class: 'page-link' unless current_page.first? %>
</li>
<li class="page-item <%= 'disabled' if current_page.first? %>">
<%= link_to 'Previous', participants_path(page: current_page.number - 1), class: 'page-link' unless current_page.first? %>
</li>
<% each_page do |page| -%>
<% if page.display_tag? -%>
<li class="page-item <%= 'active' if page.number == current_page.number %>">
<%= link_to page.number, participants_path(page: page.number), class: 'page-link' %>
</li>
<% elsif !page.was_truncated? -%>
<li class="page-item disabled"><span class="page-link">…</span></li>
<% end -%>
<% end -%>
<li class="page-item <%= 'disabled' if current_page.last? %>">
<%= link_to 'Next', participants_path(page: current_page.number + 1), class: 'page-link' unless current_page.last? %>
</li>
<li class="page-item <%= 'disabled' if current_page.last? %>">
<%= link_to 'Last', participants_path(page: total_pages), class: 'page-link' unless current_page.last? %>
</li>
</ul>
</nav>
<% end -%>

View File

@ -0,0 +1,11 @@
<%# Link to the "Previous" page
- available local variables
url: url to the previous page
current_page: a page object for the currently displayed page
total_pages: total number of pages
per_page: number of items to fetch per page
remote: data-remote
-%>
<span class="prev">
<%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote %>
</span>

View File

@ -6,13 +6,14 @@
<title>Obdev</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'rails-ujs', 'data-turbolinks-track': 'reload' %>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body>
<body class="bg-light-grey">
<%= render 'layouts/navbar' %>

View File

@ -3,8 +3,12 @@
<div class="text-center mt-3">
<%= link_to 'New Participant', new_participant_path, class: 'btn btn-primary mb-3' %>
</div>
<%= paginate @participants %>
<table class="table table-striped table-hover">
<thead class="table-dark">
<tr>
@ -32,18 +36,21 @@
<td><%= participant.dob.strftime('%B %d, %Y') if participant.dob %></td>
<td>
<%= link_to participant, class: 'btn btn-sm btn-info' do %>
<%= link_to participant, class: 'btn btn-sm btn-secondary' do %>
<i class="bi bi-eye"></i><!-- Eyeball icon for 'Show' -->
<% end %>
</td>
<td>
<%= link_to edit_participant_path(participant), class: 'btn btn-sm btn-primary' do %>
<%= link_to edit_participant_path(participant), class: 'btn btn-sm btn-warning' do %>
<i class="bi bi-pencil-fill"></i> <!-- Pencil icon for 'Edit' -->
<% end %>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>