enhance: polish cards

resources/css/common.css

@@ -1172,6 +1172,10 @@ html[data-theme='dark'] .keyboard-shortcut > code {
   box-shadow: inset 0 -1px 0 var(--ls-primary-background-color), 0 0 1px 1px rgba(255, 255, 255,.2);
 }
 
+html[data-theme='dark'] .shadow-xl {
+    box-shadow: 0 10px 10px -5px #044656;
+}
+
 .ui__modal-panel {
   border-radius: 8px;
 }

resources/css/srs_cards.css

@@ -1,109 +1,25 @@
 /******************************************************************************/
 /** Review widget *************************************************************/
 /******************************************************************************/
-
 .cards-review {
-  margin-left: -28px;
+  padding: 12px;
 }
 
 .cards-title {
-  border: 1px solid var(--color-level-3);
-  border-radius: 8px 8px 0 0;
-  color: #999;
   background: var(--color-level-1);
-  font-weight: 500;
-  padding-left: 4px;
-}
-
-.cards-title .tippy-hover {
-  display: none;
-}
-
-.ls-card {
-  border: 1px solid var(--color-level-3);
-  border-top: none;
-  padding: 8px 12px 0 12px;
-  margin-top: -8px;
-  border-radius: 0 0 8px 8px;
+  padding: 4px 6px;
 }
 
-.ls-card div[data-refs-self*='"card"'] > .flex.flex-row.pr-2 .block-control {
-  display: none;
-}
-
-div[data-refs-self*='"card"'] {
-  padding-left: 8px;
+.cp__right-sidebar .cards-title, .ui__modal .cards-title {
+  background: var(--color-level-2);
 }
 
 /******************************************************************************/
 /** Card blocks ***************************************************************/
 /******************************************************************************/
-
-div[data-refs-self*='"card"'] > .flex.flex-row.pr-2 > .block-content-wrapper,
-div[data-refs-self*='"card"'] > .flex.flex-row.pr-2 > .editor-wrapper {
-  font-weight: bold;
-  margin-left: -5px;
-}
-
-div[data-refs-self*='"card"'] > .flex.flex-row.pr-2 {
-  margin-left: 0;
-}
-
-div[data-refs-self*='"card"'] > .flex.flex-row.pr-2 .bullet-container {
-  opacity: 0.5;
-  display: none;
-}
-
-div[data-refs-self*='"card"'] > .flex.flex-row.pr-2 .block-control {
-  margin-left: 12px;
-}
-
-div[data-refs-self*='"card"'] > .flex.flex-row.pr-2 .control-hide {
-  display: block;
-}
-
 div[data-refs-self*='"card"'] {
   margin-bottom: 8px;
-  background: var(--color-level-1);
   padding-top: 12px;
   padding-bottom: 12px;
   border-radius: 4px;
-  margin-left: 12px;
-  border: 1px solid var(--color-level-3);
-}
-
-html[data-theme='light'] #right-sidebar div[data-refs-self*='"card"'] {
-  background-color: rgba(255, 254, 253) !important;
-}
-
-html[data-theme='dark'] #right-sidebar div[data-refs-self*='"card"'] {
-  background-color: var(--color-level-2);
-}
-
-div[data-refs-self*='"card"'] > * {
-  margin-left: -9px;
-}
-
-div[data-refs-self*='"card"'] .block-children .bullet-container {
-  opacity: 0.3;
-  display: none;
-}
-
-div[data-refs-self*='"card"'] .block-children {
-  padding-bottom: 0;
-  margin-bottom: 0;
-}
-
-div[data-refs-self*='"card"'] .block-children > * {
-  margin-left: 0;
-  margin-left: -18px;
-  margin-left: -12px;
-}
-
-div[data-refs-self*='"card"'] .block-properties,
-div[data-refs-self*='"card"'] .block-properties .page-property-key {
-  border: none;
-  color: #999;
-  padding: 0;
-  margin: 0;
 }

src/main/frontend/components/block.cljs

@@ -1962,8 +1962,7 @@
                             (interpose (breadcrumb-separator)))]
         [:div.block-parents.flex-row.flex-1
          {:class (when (seq breadcrumb)
-                   (str (util/hiccup->class ".opacity-70.hover:opacity-100")
-                        (when-not (:search? config)
+                   (str (when-not (:search? config)
                           " my-2")
                         (when indent?
                           " ml-4")))}
@@ -2126,7 +2125,9 @@
         data-refs (build-refs-data-value children-refs)
         data-refs-self (build-refs-data-value refs)
         edit-input-id (str "edit-block-" blocks-container-id "-" uuid)
-        edit? (state/sub [:editor/editing? edit-input-id])]
+        edit? (state/sub [:editor/editing? edit-input-id])
+        card? (string/includes? data-refs-self "\"card\"")
+        review-cards? (:review-cards? config)]
     [:div.ls-block
      (cond->
       {:id block-id
@@ -2134,7 +2135,8 @@
        :data-refs-self data-refs-self
        :class (str uuid
                    (when (and collapsed? has-child?) " collapsed")
-                   (when pre-block? " pre-block"))
+                   (when pre-block? " pre-block")
+                   (when (and card? (not review-cards?)) " shadow-xl"))
        :blockid (str uuid)}
 
        level
@@ -2792,7 +2794,8 @@
     (when (seq blocks)
       [:div.blocks-container.flex-1
        {:class (when doc-mode? "document-mode")
-        :style {:margin-left (if sidebar? 0 -10)}}
+        ;; :style {:margin-left (if sidebar? 0 -10)}
+        }
        (lazy-blocks config blocks)])))
 
 ;; headers to hiccup

src/main/frontend/components/block.css

@@ -509,10 +509,6 @@ a[data-ref="card"], .page-reference[data-ref="card"] {
     display: none;
 }
 
-.cards-title {
-    padding: 4px 0;
-}
-
 span.cloze {
     color: var(--ls-cloze-text-color);
 }
@@ -529,7 +525,6 @@ span.cloze-revealed {
 
 .block-parents a {
   color: var(--ls-primary-text-color);
-  opacity: 0.8;
 }
 
 .block-parents a:hover {

src/main/frontend/components/page.cljs

@@ -71,7 +71,7 @@
   {:did-mount open-first-block!
    :did-update open-first-block!}
   [page-name page-blocks hiccup sidebar? preview?]
-  [:div.page-blocks-inner
+  [:div.page-blocks-inner {:style {:margin-left (if sidebar? 0 -20)}}
    (rum/with-key
      (content/content page-name
                       {:hiccup   hiccup

src/main/frontend/components/page.css

@@ -264,7 +264,6 @@
 
 .add-button-link {
   opacity: 0;
-  margin-left: 10px;
   color: var(--ls-primary-text-color);
   transform: scale(.8);
 
@@ -286,3 +285,7 @@
     }
   }
 }
+
+.cp__right-sidebar .add-button-link {
+    margin-left: 21px;
+}

src/main/frontend/components/sidebar.css

@@ -370,10 +370,6 @@
       }
     }
   }
-
-  .add-button-link {
-    transform: translateX(10px) scale(.8);
-  }
 }
 
 .cp__sidebar-main-content[data-is-full-width='true'] {

src/main/frontend/components/theme.css

@@ -66,12 +66,6 @@ html[data-theme='light'] {
     a {
       color: var(--ls-primary-text-color);
     }
-
-    .block-parents {
-      a {
-        color: var(--ls-link-ref-text-color);
-      }
-    }
   }
 
   a.right-sidebar-button {
@@ -100,4 +94,4 @@ html.is-resizing-buf {
   #right-sidebar {
     transition: none;
   }
-}
+}

src/main/frontend/extensions/srs.cljs

@@ -444,13 +444,14 @@
          {:class (when (or preview? modal?)
                    (util/hiccup->class ".flex.flex-col.resize.overflow-y-auto"))}
          (let [repo (state/get-current-repo)]
-           [:div.my-2.opacity-70.hover:opacity-100
+           [:div {:style {:margin-top 20}}
             (component-block/block-parents {} repo root-block-id {})])
          (component-block/blocks-container
           blocks
           (merge (show-cycle-config card @phase)
                  {:id (str root-block-id)
-                  :editor-box editor/box}))
+                  :editor-box editor/box
+                  :review-cards? true}))
          (if (or preview? modal?)
            [:div.flex.my-4.justify-between
             [:div.flex-1
@@ -578,9 +579,12 @@
             card-query-block (db/entity [:block/uuid (:block/uuid config)])
             filtered-total (count result)
             modal? (:modal? config)]
-        [:div.flex-1.cards-review {:style (when modal? {:height "100%"})}
+        [:div.flex-1.cards-review {:style (when modal? {:height "100%"})
+                                   :class (if (:global? config) "" "shadow-xl")}
          [:div.flex.flex-row.items-center.justify-between.cards-title
-          [:code.text-sm.opacity-50 query-string]
+          [:div.flex.flex-row.items-center
+           (ui/icon "infinity" {:style {:font-size 20}})
+           [:div.ml-1.text-sm.font-medium query-string]]
 
           [:div.flex.flex-row.items-center
 
@@ -600,7 +604,7 @@
              :class "tippy-hover"
              :interactive true
              :disabled false}
-            [:a.opacity-60.hover:opacity-100.svg-small.inline.mr-3.font-bold
+            [:a.opacity-60.hover:opacity-100.svg-small.inline.font-bold
              {:id "preview-all-cards"
               :on-click (fn [_]
                           (let [blocks query-result]
@@ -611,17 +615,18 @@
                                                   card-index)))))}
              "A"])]]
          (if (seq review-cards)
-           [:div (when-not modal?
-                   {:on-click (fn []
-                                (state/set-modal! #(view-modal
-                                                    review-cards
-                                                    {:modal? true
-                                                     :callback
-                                                     (fn [review-records]
-                                                       (operation-card-info-summary!
-                                                        review-records review-cards card-query-block)
-                                                       (persist-var/persist-save of-matrix))}
-                                                    card-index)))})
+           [:div.px-1
+            (when-not modal?
+              {:on-click (fn []
+                           (state/set-modal! #(view-modal
+                                               review-cards
+                                               {:modal? true
+                                                :callback
+                                                (fn [review-records]
+                                                  (operation-card-info-summary!
+                                                   review-records review-cards card-query-block)
+                                                  (persist-var/persist-save of-matrix))}
+                                               card-index)))})
             (let [view-fn (if modal? view-modal view)]
               (view-fn review-cards
                        (merge config