Browse Source

enhance(ux): auto width for absolute modal. That's friendly for widen screen.

charlie 3 years ago
parent
commit
96381a9919
1 changed files with 8 additions and 4 deletions
  1. 8 4
      src/main/frontend/components/editor.cljs

+ 8 - 4
src/main/frontend/components/editor.cljs

@@ -191,7 +191,7 @@
                            content (:block/content block)]
                        (when-not (string/blank? content)
                          [:.py-2 (search/block-search-result-item repo uuid format content q :block)])))
-      :class       "black"})))
+      :class       "ac-block-search"})))
 
 (rum/defcs block-search < rum/reactive
   {:will-unmount (fn [state]
@@ -339,10 +339,14 @@
 
 (rum/defc absolute-modal < rum/static
   [cp modal-name set-default-width? {:keys [top left rect]}]
-  (let [max-height 370
-        max-width 300
-        offset-top 24
+  (let [vw-width js/window.innerWidth
         vw-height js/window.innerHeight
+        vw-max-width (- vw-width (:left rect))
+        vw-max-height (- vw-height (:top rect))
+        sm? (< vw-width 415)
+        max-height (min (- vw-max-height 20) 800)
+        max-width (if sm? 300 (min (max 400 (/ vw-max-width 2)) 600))
+        offset-top 24
         to-max-height (if (and (seq rect) (> vw-height max-height))
                         (let [delta-height (- vw-height (+ (:top rect) top offset-top))]
                           (if (< delta-height max-height)