Changed background color, edited Pagination for Participant page to better match our look for app
This commit is contained in:
parent
edb56c84ef
commit
52e0fbb211
2
Gemfile
2
Gemfile
|
@ -30,6 +30,8 @@ gem 'devise'
|
|||
|
||||
gem 'webpacker'
|
||||
|
||||
gem 'kaminari'
|
||||
|
||||
# Use Redis adapter to run Action Cable in production
|
||||
# gem "redis", ">= 4.0.1"
|
||||
|
||||
|
|
13
Gemfile.lock
13
Gemfile.lock
|
@ -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
|
||||
|
|
5
Makefile
5
Makefile
|
@ -20,5 +20,10 @@ version:
|
|||
# bundle install
|
||||
# rails webpacker:install
|
||||
|
||||
# gem 'kaminari'
|
||||
# bundle install
|
||||
# rails g kaminari:views default
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -13,3 +13,10 @@
|
|||
*= require_tree .
|
||||
*= require_self
|
||||
*/
|
||||
|
||||
/* Add your custom styles here */
|
||||
.bg-light-grey {
|
||||
background-color: #e6e5e5da; /* Light grey color */
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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 -%>
|
|
@ -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>
|
|
@ -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' %>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue