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

Reviewed-on: #162
userpaget_get.html: Do not disable the 'Next Article' button
2024-08-27 07:21:05 +08:00 · 2024-08-27 07:20:20 +08:00 · 2024-08-27 07:15:22 +08:00 · 2024-07-04 15:05:36 +08:00 · 2024-07-04 11:35:59 +08:00
2 changed files with 54 additions and 22 deletions
--- a/app/static/css/button.css
+++ b/app/static/css/button.css
@ -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;
+}
--- a/app/templates/userpage_get.html
+++ b/app/templates/userpage_get.html
@ -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.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');
        }

        // 事件监听器
@ -224,7 +220,6 @@


    function load_next_article() {
-        $("#load_next_article").prop("disabled", true)
        $.ajax({
            url: '/get_next_article/{{username}}',
            dataType: 'json',
@ -274,13 +269,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();
+        }else{
+            $('#load_pre_article').removeClass('gray-background'); // 设置为正常蓝色
            sessionStorage.setItem('pre_page_button', 'show')
        }
    }
Author	SHA1	Message	Date
mrlan	79dff9a3b5	Merge pull request 'Bug576-XiaBaizhi' (#162 ) from Bug576-XiaBaizhi into Alpha-snapshot20240618 Reviewed-on: #162	2024-08-27 07:21:05 +08:00
Lan Hui	bd4fb6846b	userpaget_get.html: Do not disable the 'Next Article' button	2024-08-27 07:20:20 +08:00
Lan Hui	2e203699c0	userpaget_get.html: Resolve merge conflicts	2024-08-27 07:15:22 +08:00
夏栢芝	6b3efad1dc	Merge branch 'Alpha-snapshot20240618' of http://118.25.96.118:3000/mrlan/EnglishPal into Bug576-XiaBaizhi	2024-07-04 15:05:36 +08:00
Kikky666	02f3c4fdfa	Fix bug 576-XiaBaizhi	2024-07-04 11:35:59 +08:00