Compare commits
5 Commits
d502b3f474
...
79dff9a3b5
| Author | SHA1 | Date |
|---|---|---|
 mrlan
|
79dff9a3b5 | |
Lan Hui
|
bd4fb6846b | |
|
Lan Hui
|
2e203699c0 | |
夏栢芝
|
6b3efad1dc | |
|
Kikky666
|
02f3c4fdfa |
|
|
@ -0,0 +1,37 @@
|
||||||
|
/* 按钮(上一篇，下一篇)样式 */
|
||||||
|
.pagination {
|
||||||
|
padding: 20px;
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
margin-right: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #007BFF; /* 按钮背景颜色 */
|
||||||
|
border: none;
|
||||||
|
color: #FFF; /* 按钮文字颜色 */
|
||||||
|
padding: 5px 12px;
|
||||||
|
font-size: 20px;
|
||||||
|
border-radius: 5px;
|
||||||
|
transition: background-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow i {
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow:hover {
|
||||||
|
background-color: #0056b3; /* 按钮悬停时的背景颜色 */
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow:focus {
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 为首页时按钮(Pre Article)的背景颜色 */
|
||||||
|
.gray-background {
|
||||||
|
background-color: #6c757d !important;
|
||||||
|
}
|
||||||
|
|
@ -6,6 +6,8 @@
|
||||||
content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes"/>
|
content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0, user-scalable=yes"/>
|
||||||
<meta name="format-detection" content="telephone=no"/>
|
<meta name="format-detection" content="telephone=no"/>
|
||||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="../static/css/button.css">
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
|
|
||||||
{{ yml['header'] | safe }}
|
{{ yml['header'] | safe }}
|
||||||
|
|
@ -41,17 +43,6 @@
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
|
||||||
padding: 0;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 21px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
@ -71,9 +62,14 @@
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
|
<div class="pagination">
|
||||||
<button class="arrow" id="load_next_article" onclick="load_next_article();Reader.stopRead()" title="下一篇 Next Article">⇨</button>
|
<button class="arrow" id="load_pre_article" onclick="load_pre_article();Reader.stopRead()" title="Previous Article">
|
||||||
<button class="arrow" id="load_pre_article" onclick="load_pre_article();Reader.stopRead()" style="display: none" title="上一篇 Previous Article">⇦</button>
|
<i class="fas fa-chevron-left"></i> 上一篇
|
||||||
|
</button>
|
||||||
|
<button class="arrow" id="load_next_article" onclick="load_next_article();Reader.stopRead()" title="Next Article">
|
||||||
|
下一篇 <i class="fas fa-chevron-right"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p><b>阅读文章并回答问题</b></p>
|
<p><b>阅读文章并回答问题</b></p>
|
||||||
<div id="text-content">
|
<div id="text-content">
|
||||||
|
|
@ -200,9 +196,9 @@
|
||||||
<!-- elements.selectedWordsInput.value = settings.selectedWords;-->
|
<!-- elements.selectedWordsInput.value = settings.selectedWords;-->
|
||||||
|
|
||||||
|
|
||||||
// 刷新页面或进入页面时判断，若不是首篇文章，则上一篇按钮可见
|
// 刷新页面或进入页面时判断，若是首篇文章，则颜色为灰色
|
||||||
if (sessionStorage.getItem('pre_page_button') !== 'display' && sessionStorage.getItem('pre_page_button')) {
|
if (sessionStorage.getItem('pre_page_button') === 'display' || !sessionStorage.getItem('pre_page_button')) {
|
||||||
$('#load_pre_article').show();
|
$('#load_pre_article').addClass('gray-background');
|
||||||
}
|
}
|
||||||
|
|
||||||
// 事件监听器
|
// 事件监听器
|
||||||
|
|
@ -224,7 +220,6 @@
|
||||||
|
|
||||||
|
|
||||||
function load_next_article() {
|
function load_next_article() {
|
||||||
$("#load_next_article").prop("disabled", true)
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: '/get_next_article/{{username}}',
|
url: '/get_next_article/{{username}}',
|
||||||
dataType: 'json',
|
dataType: 'json',
|
||||||
|
|
@ -274,13 +269,13 @@
|
||||||
document.querySelector('#user_level').classList.add('mark'); // do the same thing for user difficulty level
|
document.querySelector('#user_level').classList.add('mark'); // do the same thing for user difficulty level
|
||||||
setTimeout(() => {document.querySelector('#user_level').classList.remove('mark');}, 2000);
|
setTimeout(() => {document.querySelector('#user_level').classList.remove('mark');}, 2000);
|
||||||
}
|
}
|
||||||
<!-- 检查是否存在上一篇或下一篇，不存在则对应按钮隐藏-->
|
<!-- 检查是否存在上一篇或下一篇，不存在设上一篇按钮为灰色-->
|
||||||
function check_pre(visited_articles){
|
function check_pre(visited_articles){
|
||||||
if((visited_articles=='')||(visited_articles['index']<=0)){
|
if((visited_articles=='')||(visited_articles['index']<=0)){
|
||||||
$('#load_pre_article').hide();
|
$('#load_pre_article').addClass('gray-background'); // 设置为灰色
|
||||||
sessionStorage.setItem('pre_page_button', 'display')
|
sessionStorage.setItem('pre_page_button', 'display')
|
||||||
} else {
|
}else{
|
||||||
$('#load_pre_article').show();
|
$('#load_pre_article').removeClass('gray-background'); // 设置为正常蓝色
|
||||||
sessionStorage.setItem('pre_page_button', 'show')
|
sessionStorage.setItem('pre_page_button', 'show')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue