huangjihao
/
EnglishPal
forked from mrlan/EnglishPal
1
0
Fork 0
Code Pull Requests Activity

Fix bug 576-XiaBaizhi

Bug576-XiaBaizhi
Kikky666 2024-07-04 11:35:59 +08:00
parent be7ae9e296
commit 02f3c4fdfa
2 changed files with 53 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
app/static/css/button.css Normal file
View File

@ -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;
}

36
app/templates/userpage_get.html
View File

@ -6,6 +6,8 @@
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"/>
<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>
{{ yml['header'] | safe }}
@ -41,17 +43,6 @@
white-space: pre-wrap;
}
.arrow {
padding: 0;
font-size: 20px;
line-height: 21px;
display: inline-block;
}
.arrow:hover {
cursor: pointer;
}
</style>
</head>
<body>
@ -71,9 +62,14 @@
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
<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()" style="display: none" title="上一篇 Previous Article">⇦</button>
<div class="pagination">
<button class="arrow" id="load_pre_article" onclick="load_pre_article();Reader.stopRead()" title="Previous Article">
<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>
<div id="text-content">
@ -200,9 +196,9 @@
elements.rangeValueDisplay.textContent = `${settings.rangeValue}x`;
elements.selectedWordsInput.value = settings.selectedWords;
// 刷新页面或进入页面时判断，若不是首篇文章，则上一篇按钮可见
if (sessionStorage.getItem('pre_page_button') !== 'display' && sessionStorage.getItem('pre_page_button')) {
$('#load_pre_article').show();
// 刷新页面或进入页面时判断，若是首篇文章，则颜色为灰色
if (sessionStorage.getItem('pre_page_button') === 'display' || !sessionStorage.getItem('pre_page_button')) {
$('#load_pre_article').addClass('gray-background');
}
// 事件监听器
@ -264,13 +260,13 @@
document.querySelector('#user_level').classList.add('mark'); // do the same thing for user difficulty level
setTimeout(() => {document.querySelector('#user_level').classList.remove('mark');}, 2000);
}
<!-- 检查是否存在上一篇或下一篇，不存在则对应按钮隐藏-->
<!-- 检查是否存在上一篇或下一篇，不存在设上一篇按钮为灰色-->
function check_pre(visited_articles){
if((visited_articles=='')||(visited_articles['index']<=0)){
$('#load_pre_article').hide();
$('#load_pre_article').addClass('gray-background'); // 设置为灰色
sessionStorage.setItem('pre_page_button', 'display')
}else{
$('#load_pre_article').show();
$('#load_pre_article').removeClass('gray-background'); // 设置为正常蓝色
sessionStorage.setItem('pre_page_button', 'show')
}
}