From 0335ef4ed658860e045eb6c9ea5640a7f75f672b Mon Sep 17 00:00:00 2001
From: songtianlun <tianlun.song@foxmail.com>
Date: Fri, 17 Jan 2025 15:22:13 +0800
Subject: [PATCH] refactor: replace list items with buttons in pagination

- Changed pagination elements from <li> to <button> for better accessibility.
- Updated the paginator structure to use a <div> instead of <ul>.
- Ensured that all pagination links are now buttons, improving the user experience.

These changes enhance the semantic structure of the pagination, making it more intuitive and accessible for users, especially those using assistive technologies.
---
 .../stylesheets/application.bootstrap.scss    |   3 -
 app/assets/stylesheets/custom.scss            | 201 ------------------
 app/views/kaminari/_first_page.html.erb       |   4 +-
 app/views/kaminari/_gap.html.erb              |   4 +-
 app/views/kaminari/_last_page.html.erb        |   4 +-
 app/views/kaminari/_next_page.html.erb        |   4 +-
 app/views/kaminari/_page.html.erb             |   8 +-
 app/views/kaminari/_paginator.html.erb        |   4 +-
 app/views/kaminari/_prev_page.html.erb        |   4 +-
 app/views/users/index.html.erb                |  13 +-
 10 files changed, 24 insertions(+), 225 deletions(-)
 delete mode 100644 app/assets/stylesheets/application.bootstrap.scss
 delete mode 100644 app/assets/stylesheets/custom.scss

diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
deleted file mode 100644
index f8a06ff..0000000
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'bootstrap/dist/css/bootstrap';
-@import 'bootstrap-icons/font/bootstrap-icons';
-//@import './custom';
\ No newline at end of file
diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
deleted file mode 100644
index c470d2f..0000000
--- a/app/assets/stylesheets/custom.scss
+++ /dev/null
@@ -1,201 +0,0 @@
-
-
-/* color */
-$light-gray: #777;
-$gray-lighter: #D3D3D3;
-
-/* universal */
-body {
-  padding-top: 60px;
-}
-section {
-  overflow: auto;
-}
-textarea {
-  resize: vertical;
-}
-.center {
-  text-align: center;
-  h1 {
-    margin-bottom: 10px;
-  }
-}
-
-/* typography */
-h1, h2, h3, h4, h5, h6 {
-  line-height: 1;
-}
-
-h1 {
-  font-size: 3em;
-  letter-spacing: -2px;
-  margin-bottom: 30px;
-  text-align: center;
-}
-
-h2 {
-  font-size: 1.2em;
-  letter-spacing: -1px;
-  margin-bottom: 30px;
-  text-align: center;
-  font-weight: normal;
-  color: $light-gray;
-}
-
-p {
-  font-size: 1.1em;
-  line-height: 1.7em;
-}
-
-/* header */
-#logo {
-  float: left;
-  margin-right: 10px;
-  font-size: 1.7em;
-  color: #fff;
-  text-transform: uppercase;
-  letter-spacing: -1px;
-  padding-top: 9px;
-  font-weight: bold;
-  &:hover {
-    color: $light-gray;
-    text-decoration: none;
-  }
-}
-
-//img {
-//  display: none;
-//}
-
-/* footer */
-footer {
-  margin-top: 45px;
-  padding-top: 5px;
-  border-top: 1px solid #eaeaea;
-  color: $light-gray;
-  a {
-    color: #555;
-    &hover {
-      color: #222;
-    }
-  }
-  small {
-    float: left;
-  }
-  ul {
-    float: right;
-    list-style: none;
-    li {
-      float: left;
-      margin-left: 15px;
-    }
-  }
-}
-
-/* mixins, variables, etc. */
-$gray-medium-light: #eaeaea;
-
-@mixin box_sizing {
-  -moz-box-sizing:    border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing:         border-box;
-}
-
-/* miscellaneous */
-.debug_dump {
-  clear: both;
-  float: left;
-  width: 100%;
-  margin-top: 45px;
-  @include box-sizing;
-}
-
-/* sidebar */
-aside {
-  section.user_info {
-    margin-top: 20px;
-  }
-  section {
-    padding: 10px 0;
-    margin-top: 20px;
-    &:first-child {
-      border: 0;
-      padding-top: 0;
-    }
-    span{
-      display: block;
-      margin-bottom: 3px;
-      line-height: 1;
-    }
-    h1 {
-      font-size: 1.4em;
-      text-align: left;
-      letter-spacing: -1px;
-      margin-bottom: 3px;
-      margin-top: 0;
-    }
-  }
-}
-
-.gravatar {
-  float: left;
-  margin-right: 10px;
-}
-
-.gravatar_edit {
-  margin-top: 15px;
-}
-
-/* forms */
-input, textarea, select, .uneditable-input {
-  border: 1px solid #bbb;
-  width: 100%;
-  margin-bottom: 15px;
-  @include box_sizing;
-}
-
-input {
-  height: auto !important;
-}
-
-/* forms */
-
-#error_explanation {
-  color: red;
-  ul {
-    color: red;
-    margin: 0 0 30px 0;
-  }
-}
-
-.field_with_errors {
-  //@extend .has-error;
-  .form-control {
-    //color: $state-danger-text;
-  }
-}
-
-.checkbox {
-  margin-top: -10px;
-  margin-bottom: 10px;
-  span {
-    margin-left: 20px;
-    font-weight: normal;
-  }
-}
-
-#session_remember_me {
-  width: auto;
-  margin-left: 0;
-}
-
-/* Users index */
-.users {
-  list-style: none;
-  margin: 0;
-  li {
-    overflow: auto;
-    padding: 10px 0;
-    border-bottom: 1px solid $gray-lighter;
-  }
-}
diff --git a/app/views/kaminari/_first_page.html.erb b/app/views/kaminari/_first_page.html.erb
index 2c5985b..e87f2ea 100644
--- a/app/views/kaminari/_first_page.html.erb
+++ b/app/views/kaminari/_first_page.html.erb
@@ -1,3 +1,3 @@
-<li>
+<button class="join-item btn">
   <%= link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote %>
-</li>
+</button>
diff --git a/app/views/kaminari/_gap.html.erb b/app/views/kaminari/_gap.html.erb
index 6d3a149..046d83c 100644
--- a/app/views/kaminari/_gap.html.erb
+++ b/app/views/kaminari/_gap.html.erb
@@ -1,3 +1,3 @@
-<li class='disabled'>
+<button class="join-item btn btn-disabled">
   <%= content_tag :a, raw(t 'views.pagination.truncate') %>
-</li>
+</button>
diff --git a/app/views/kaminari/_last_page.html.erb b/app/views/kaminari/_last_page.html.erb
index aee2524..75c8d9e 100644
--- a/app/views/kaminari/_last_page.html.erb
+++ b/app/views/kaminari/_last_page.html.erb
@@ -1,3 +1,3 @@
-<li>
+<button class="join-item btn">
   <%= link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, { remote: remote } %>
-</li>
+</button>
diff --git a/app/views/kaminari/_next_page.html.erb b/app/views/kaminari/_next_page.html.erb
index 8e9a10e..f0a63b2 100644
--- a/app/views/kaminari/_next_page.html.erb
+++ b/app/views/kaminari/_next_page.html.erb
@@ -1,3 +1,3 @@
-<li>
+<button class="join-item btn">
   <%= link_to_unless current_page.last?, raw(t 'views.pagination.next'), url, rel: 'next', remote: remote %>
-</li>
+</button>
diff --git a/app/views/kaminari/_page.html.erb b/app/views/kaminari/_page.html.erb
index 47ea75d..dcd17fa 100644
--- a/app/views/kaminari/_page.html.erb
+++ b/app/views/kaminari/_page.html.erb
@@ -1,9 +1,9 @@
 <% if page.current? %>
-  <li class='active'>
+  <button class='join-item btn btn-active'>
     <%= content_tag :a, page, data: { remote: remote }, rel: page.rel %>
-  </li>
+  </button>
 <% else %>
-  <li>
+  <button class="join-item btn">
     <%= link_to page, url, remote: remote, rel: page.rel %>
-  </li>
+  </button>
 <% end %>
diff --git a/app/views/kaminari/_paginator.html.erb b/app/views/kaminari/_paginator.html.erb
index 2c8757b..6d38687 100644
--- a/app/views/kaminari/_paginator.html.erb
+++ b/app/views/kaminari/_paginator.html.erb
@@ -1,5 +1,5 @@
 <%= paginator.render do -%>
-  <ul class="pagination">
+  <div class="join">
     <%= first_page_tag unless current_page.first? %>
     <%= prev_page_tag unless current_page.first? %>
     <% each_page do |page| -%>
@@ -11,5 +11,5 @@
     <% end -%>
     <%= next_page_tag unless current_page.last? %>
     <%= last_page_tag unless current_page.last? %>
-  </ul>
+  </div>
 <% end -%>
diff --git a/app/views/kaminari/_prev_page.html.erb b/app/views/kaminari/_prev_page.html.erb
index f16f6b4..b279195 100644
--- a/app/views/kaminari/_prev_page.html.erb
+++ b/app/views/kaminari/_prev_page.html.erb
@@ -1,3 +1,3 @@
-<li>
+<button class="join-item btn">
   <%= link_to_unless current_page.first?, raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote %>
-</li>
+</button>
diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb
index 53d7014..96c82d9 100644
--- a/app/views/users/index.html.erb
+++ b/app/views/users/index.html.erb
@@ -3,13 +3,16 @@
 <div class="container mx-auto px-4 py-8">
   <h1 class="text-3xl font-bold text-center mb-8">All Users</h1>
 
-  <!-- 分页 -->
-  <div class="flex justify-center mb-6">
-    <%= paginate @users %>
-  </div>
-
   <!-- 用户列表 -->
   <div class="grid gap-4 max-w-3xl mx-auto">
     <%= render @users %>
   </div>
+
+  <!-- 分页 -->
+  <div class="flex justify-center mb-6 mt-6">
+    <div class="join">
+      <%= paginate @users %>
+    </div>
+  </div>
+
 </div>
\ No newline at end of file