From 1ac987463d389d06f52ce9fd00b3ead1a352cea2 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Thu, 29 Dec 2022 11:50:06 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/6928

---
 app/src/assets/scss/_dialog.scss |  2 +-
 app/src/card/openCard.ts         | 28 ++++++++++++++++++++--------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/app/src/assets/scss/_dialog.scss b/app/src/assets/scss/_dialog.scss
index 794e3255b..164055fd7 100644
--- a/app/src/assets/scss/_dialog.scss
+++ b/app/src/assets/scss/_dialog.scss
@@ -130,7 +130,7 @@
       box-shadow: none;
     }
 
-    &--show span[data-type~=mark] {
+    &--hide span[data-type~=mark] {
       transition: var(--b3-transition);
       color: var(--b3-protyle-inline-mark-background) !important;
     }
diff --git a/app/src/card/openCard.ts b/app/src/card/openCard.ts
index 3ef39cc4b..f82b953b1 100644
--- a/app/src/card/openCard.ts
+++ b/app/src/card/openCard.ts
@@ -36,11 +36,14 @@ export const openCard = () => {
         <div style="margin-left: 8px" class="ft__on-surface ft__smaller fn__flex-center${blocks.length === 0 ? " fn__none" : ""}" data-type="count">${countHTML}</div>
     </div>
     <div class="fn__hr--b"><input style="opacity: 0;height: 1px;box-sizing: border-box"></div>
-    <div class="b3-dialog__cardblock b3-dialog__cardblock--show fn__flex-1${blocks.length === 0 ? " fn__none" : ""}" data-type="render"></div>
+    <div class="b3-dialog__cardblock b3-dialog__cardblock--hide fn__flex-1${blocks.length === 0 ? " fn__none" : ""}" data-type="render"></div>
     <div class="b3-dialog__cardempty${blocks.length === 0 ? "" : " fn__none"}" data-type="empty">${window.siyuan.languages.noDueCard}</div>
-    <div class="fn__flex b3-dialog__cardaction${blocks.length === 0 ? " fn__none" : ""}" style="flex-wrap: wrap" data-type="action">
+    <div class="fn__flex b3-dialog__cardaction${blocks.length === 0 ? " fn__none" : ""}" data-type="action">
+        <span class="fn__flex-1"></span>
         <button data-type="-1" class="b3-button">Show (S)</button>
-        <span class="${isMobile() ? "fn__space" : "fn__flex-1"}"></span>
+        <span class="fn__flex-1"></span>
+    </div>
+    <div class="fn__flex b3-dialog__cardaction fn__none" data-type="action">
         <button data-type="0" class="b3-button b3-button--error">Again (A)</button>
         <span class="${isMobile() ? "fn__space" : "fn__flex-1"}"></span>
         <button data-type="1" class="b3-button b3-button--warning">Hard (H)</button>
@@ -77,18 +80,20 @@ export const openCard = () => {
             (dialog.element.firstElementChild as HTMLElement).style.zIndex = "200";
             dialog.element.setAttribute("data-key", window.siyuan.config.keymap.general.riffCard.custom);
             const countElement = dialog.element.querySelector('[data-type="count"]');
-            const actionElement = dialog.element.querySelector('[data-type="action"]');
+            const actionElements = dialog.element.querySelectorAll('[data-type="action"]');
             const selectElement = dialog.element.querySelector("select");
             selectElement.addEventListener("change", () => {
                 fetchPost("/api/riff/getRiffDueCards", {deckID: selectElement.value}, (cardsChangeResponse) => {
                     blocks = cardsChangeResponse.data;
                     index = 0;
+                    editor.protyle.element.classList.add("b3-dialog__cardblock--hide");
                     if (blocks.length > 0) {
                         countElement.innerHTML = `<span>1</span>/${blocks.length}`;
                         countElement.classList.remove("fn__none");
                         editor.protyle.element.classList.remove("fn__none");
                         editor.protyle.element.nextElementSibling.classList.add("fn__none");
-                        actionElement.classList.remove("fn__none");
+                        actionElements[0].classList.remove("fn__none");
+                        actionElements[1].classList.add("fn__none");
                         fetchPost("/api/filetree/getDoc", {
                             id: blocks[index].blockID,
                             mode: 0,
@@ -100,7 +105,8 @@ export const openCard = () => {
                         countElement.classList.add("fn__none");
                         editor.protyle.element.classList.add("fn__none");
                         editor.protyle.element.nextElementSibling.classList.remove("fn__none");
-                        actionElement.classList.add("fn__none");
+                        actionElements[0].classList.add("fn__none");
+                        actionElements[1].classList.add("fn__none");
                     }
                 });
             });
@@ -131,7 +137,9 @@ export const openCard = () => {
                 event.preventDefault();
                 event.stopPropagation();
                 if (type === "-1") {
-                    editor.protyle.element.classList.toggle("b3-dialog__cardblock--show");
+                    editor.protyle.element.classList.remove("b3-dialog__cardblock--hide");
+                    actionElements[0].classList.add("fn__none");
+                    actionElements[1].classList.remove("fn__none");
                     return;
                 }
                 if (["0", "1", "2", "3"].includes(type)) {
@@ -141,13 +149,17 @@ export const openCard = () => {
                         rating: parseInt(type)
                     }, () => {
                         index++;
+                        editor.protyle.element.classList.remove("b3-dialog__cardblock--hide");
                         if (index > blocks.length - 1) {
                             countElement.classList.add("fn__none");
                             editor.protyle.element.classList.add("fn__none");
                             editor.protyle.element.nextElementSibling.classList.remove("fn__none");
-                            actionElement.classList.add("fn__none");
+                            actionElements[0].classList.add("fn__none");
+                            actionElements[1].classList.add("fn__none");
                             return;
                         }
+                        actionElements[0].classList.remove("fn__none");
+                        actionElements[1].classList.add("fn__none");
                         countElement.firstElementChild.innerHTML = (index + 1).toString();
                         fetchPost("/api/filetree/getDoc", {
                             id: blocks[index].blockID,