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.
This commit is contained in:
parent
8c598ce3dc
commit
0335ef4ed6
@ -1,3 +0,0 @@
|
||||
@import 'bootstrap/dist/css/bootstrap';
|
||||
@import 'bootstrap-icons/font/bootstrap-icons';
|
||||
//@import './custom';
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
<li class='disabled'>
|
||||
<button class="join-item btn btn-disabled">
|
||||
<%= content_tag :a, raw(t 'views.pagination.truncate') %>
|
||||
</li>
|
||||
</button>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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 %>
|
||||
|
||||
@ -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 -%>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user