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

Merge pull request 'Bug576-XiaBaizhi' (#162) from Bug576-XiaBaizhi into Alpha-snapshot20240618 

Reviewed-on: mrlan/EnglishPal#162
Bug577-JiangXueQin
mrlan 2024-08-27 07:21:05 +08:00
parent d502b3f474 bd4fb6846b
commit 79dff9a3b5
2 changed files with 54 additions and 22 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;
}

39
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"/> 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')
} }
} }