From d8bfa1dad53d8ad5c836481267994503175c7a62 Mon Sep 17 00:00:00 2001 From: charlie Date: Sun, 1 Nov 2020 00:20:10 +0800 Subject: [PATCH 01/11] add basic implementation . --- resources/static/css/common.css | 6 +++++ src/main/frontend/components/editor.cljs | 21 +++++++++-------- src/main/frontend/page.cljs | 1 + src/main/frontend/ui.cljs | 29 ++++++++++++++++++++++++ src/main/frontend/util.cljs | 4 ++++ 5 files changed, 51 insertions(+), 10 deletions(-) diff --git a/resources/static/css/common.css b/resources/static/css/common.css index 300584709..b190015e4 100644 --- a/resources/static/css/common.css +++ b/resources/static/css/common.css @@ -89,6 +89,12 @@ html { font-family: var(--ls-font-family), Inter, sans-serif, system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial ,"Noto Sans", serif, Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol!important; } +html.is-ios, html.is-ios > body { + -webkit-overflow-scrolling : touch; + overflow: auto !important; + height: 100% !important; +} + @supports (font-variation-settings: normal) { html { font-family: 'Inter var', sans-serif; diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs index 537f35bdf..2f1471ab9 100644 --- a/src/main/frontend/components/editor.cljs +++ b/src/main/frontend/components/editor.cljs @@ -217,16 +217,17 @@ (rum/defc mobile-bar < rum/reactive [parent-state parent-id] - [:div.bg-base-2 {:style {:position "fixed" - :bottom 0 - :width "100%" - :left 0 - :justify-content "center" - :height "2.5rem" - :display "flex" - :align-items "center" - ;; This element should be the upper-most in most situations - :z-index 99999999}} + [:div.bg-base-2.fix-ios-fixed-bottom + {:style {:position "fixed" + :bottom 0 + :width "100%" + :left 0 + :justify-content "center" + :height "2.5rem" + :display "flex" + :align-items "center" + ;; This element should be the upper-most in most situations + :z-index 99999999}} [:button.bottom-action {:style {:padding "5px"} :on-click #(editor-handler/adjust-block-level! parent-state :right)} diff --git a/src/main/frontend/page.cljs b/src/main/frontend/page.cljs index b6e3e813a..c1ab64015 100644 --- a/src/main/frontend/page.cljs +++ b/src/main/frontend/page.cljs @@ -12,6 +12,7 @@ (rum/defc current-page < rum/reactive {:did-mount (fn [state] (state/set-root-component! (:rum/react-component state)) + (ui/setup-patch-ios-fixed-bottom-position) state)} [] (when-let [route-match (state/sub :route-match)] diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index 167af3dd0..e8e541154 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -193,6 +193,35 @@ (defn get-scroll-top [] (.-scrollTop (main-node))) +(defn setup-patch-ios-fixed-bottom-position + "fix a common issue about ios webpage viewport + when soft keyboard setup" + [] + (if (and + (util/ios?) + (not (nil? js/window.visualViewport))) + (let [viewport js/visualViewport + style (js/document.createElement "style")] + (.add (.-classList js/document.documentElement) "is-ios") + (set! (.-id style) "dynamic-style-scope") + (.appendChild js/document.head style) + (let [sheet (.-sheet style) + type "resize" + handler + (fn [] + (let [vh (.-height viewport) + rule (.. sheet -rules (item 0)) + set-top #(set! (.. rule -style -top) (str % "px"))] + (set-top vh) + (prn "resize " vh (.. rule -style -top))))] + (.insertRule sheet ".fix-ios-fixed-bottom {bottom:unset !important; transform: translateY(-100%); top: 0px;}") + (.addEventListener viewport type handler false) + (handler) + (fn [] + (.removeEventListener viewport type handler) + (prn "teardown viewport " type))) + ))) + ;; FIXME: compute the right scroll position when scrolling back to the top (defn on-scroll [on-load on-top-reached] diff --git a/src/main/frontend/util.cljs b/src/main/frontend/util.cljs index 63332e2a4..24506947f 100644 --- a/src/main/frontend/util.cljs +++ b/src/main/frontend/util.cljs @@ -18,6 +18,10 @@ [clojure.pprint :refer [pprint]] [goog.userAgent])) +;; envs +(defn ios? [] + (not (nil? (re-find #"iPad|iPhone|iPod" (.-userAgent js/navigator))))) + (defn format [fmt & args] (apply gstring/format fmt args)) From 836225f60fe0812458d38df01a0858c1dfbd6ad5 Mon Sep 17 00:00:00 2001 From: charlie Date: Sun, 1 Nov 2020 22:30:23 +0800 Subject: [PATCH 02/11] add viewport offset case . --- src/main/frontend/ui.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index e8e541154..0ff062e49 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -209,7 +209,7 @@ type "resize" handler (fn [] - (let [vh (.-height viewport) + (let [vh (+ (.-offsetTop viewport) (.-height viewport)) rule (.. sheet -rules (item 0)) set-top #(set! (.. rule -style -top) (str % "px"))] (set-top vh) From e5da5a748e8eebf2c2febc3ae66d6f8dd0352fca Mon Sep 17 00:00:00 2001 From: charlie Date: Sun, 1 Nov 2020 00:20:10 +0800 Subject: [PATCH 03/11] add basic implementation . --- resources/css/common.css | 6 +++++ src/main/frontend/components/editor.cljs | 21 +++++++++-------- src/main/frontend/page.cljs | 1 + src/main/frontend/ui.cljs | 29 ++++++++++++++++++++++++ src/main/frontend/util.cljs | 4 ++++ 5 files changed, 51 insertions(+), 10 deletions(-) diff --git a/resources/css/common.css b/resources/css/common.css index 19446c665..1c1c13be8 100644 --- a/resources/css/common.css +++ b/resources/css/common.css @@ -89,6 +89,12 @@ html { font-family: var(--ls-font-family), Inter, sans-serif, system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial ,"Noto Sans", serif, Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol!important; } +html.is-ios, html.is-ios > body { + -webkit-overflow-scrolling : touch; + overflow: auto !important; + height: 100% !important; +} + @supports (font-variation-settings: normal) { html { font-family: 'Inter var', sans-serif; diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs index 537f35bdf..2f1471ab9 100644 --- a/src/main/frontend/components/editor.cljs +++ b/src/main/frontend/components/editor.cljs @@ -217,16 +217,17 @@ (rum/defc mobile-bar < rum/reactive [parent-state parent-id] - [:div.bg-base-2 {:style {:position "fixed" - :bottom 0 - :width "100%" - :left 0 - :justify-content "center" - :height "2.5rem" - :display "flex" - :align-items "center" - ;; This element should be the upper-most in most situations - :z-index 99999999}} + [:div.bg-base-2.fix-ios-fixed-bottom + {:style {:position "fixed" + :bottom 0 + :width "100%" + :left 0 + :justify-content "center" + :height "2.5rem" + :display "flex" + :align-items "center" + ;; This element should be the upper-most in most situations + :z-index 99999999}} [:button.bottom-action {:style {:padding "5px"} :on-click #(editor-handler/adjust-block-level! parent-state :right)} diff --git a/src/main/frontend/page.cljs b/src/main/frontend/page.cljs index b6e3e813a..c1ab64015 100644 --- a/src/main/frontend/page.cljs +++ b/src/main/frontend/page.cljs @@ -12,6 +12,7 @@ (rum/defc current-page < rum/reactive {:did-mount (fn [state] (state/set-root-component! (:rum/react-component state)) + (ui/setup-patch-ios-fixed-bottom-position) state)} [] (when-let [route-match (state/sub :route-match)] diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index 167af3dd0..e8e541154 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -193,6 +193,35 @@ (defn get-scroll-top [] (.-scrollTop (main-node))) +(defn setup-patch-ios-fixed-bottom-position + "fix a common issue about ios webpage viewport + when soft keyboard setup" + [] + (if (and + (util/ios?) + (not (nil? js/window.visualViewport))) + (let [viewport js/visualViewport + style (js/document.createElement "style")] + (.add (.-classList js/document.documentElement) "is-ios") + (set! (.-id style) "dynamic-style-scope") + (.appendChild js/document.head style) + (let [sheet (.-sheet style) + type "resize" + handler + (fn [] + (let [vh (.-height viewport) + rule (.. sheet -rules (item 0)) + set-top #(set! (.. rule -style -top) (str % "px"))] + (set-top vh) + (prn "resize " vh (.. rule -style -top))))] + (.insertRule sheet ".fix-ios-fixed-bottom {bottom:unset !important; transform: translateY(-100%); top: 0px;}") + (.addEventListener viewport type handler false) + (handler) + (fn [] + (.removeEventListener viewport type handler) + (prn "teardown viewport " type))) + ))) + ;; FIXME: compute the right scroll position when scrolling back to the top (defn on-scroll [on-load on-top-reached] diff --git a/src/main/frontend/util.cljs b/src/main/frontend/util.cljs index 63332e2a4..24506947f 100644 --- a/src/main/frontend/util.cljs +++ b/src/main/frontend/util.cljs @@ -18,6 +18,10 @@ [clojure.pprint :refer [pprint]] [goog.userAgent])) +;; envs +(defn ios? [] + (not (nil? (re-find #"iPad|iPhone|iPod" (.-userAgent js/navigator))))) + (defn format [fmt & args] (apply gstring/format fmt args)) From 7c8c7aa19df674dc561f884007981f9b16b0a83e Mon Sep 17 00:00:00 2001 From: charlie Date: Sun, 1 Nov 2020 22:30:23 +0800 Subject: [PATCH 04/11] add viewport offset case . --- src/main/frontend/ui.cljs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index e8e541154..0ff062e49 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -209,7 +209,7 @@ type "resize" handler (fn [] - (let [vh (.-height viewport) + (let [vh (+ (.-offsetTop viewport) (.-height viewport)) rule (.. sheet -rules (item 0)) set-top #(set! (.. rule -style -top) (str % "px"))] (set-top vh) From 8700bc868791722dfb06192687a771f5230811c7 Mon Sep 17 00:00:00 2001 From: charlie Date: Tue, 3 Nov 2020 18:01:56 +0800 Subject: [PATCH 05/11] refactor(ui): improve ui bootstrap life for fixed mobile bar . --- src/main/frontend/page.cljs | 14 +++++--- src/main/frontend/ui.cljs | 65 +++++++++++++++++++++++-------------- src/main/frontend/util.cljs | 11 +++++-- 3 files changed, 59 insertions(+), 31 deletions(-) diff --git a/src/main/frontend/page.cljs b/src/main/frontend/page.cljs index c1ab64015..36168c20a 100644 --- a/src/main/frontend/page.cljs +++ b/src/main/frontend/page.cljs @@ -10,10 +10,16 @@ (view route-match)) (rum/defc current-page < rum/reactive - {:did-mount (fn [state] - (state/set-root-component! (:rum/react-component state)) - (ui/setup-patch-ios-fixed-bottom-position) - state)} + {:did-mount (fn [state] + (state/set-root-component! (:rum/react-component state)) + (ui/inject-document-devices-envs!) + (ui/inject-dynamic-style-node!) + (let [teardown-fn (comp (ui/setup-patch-ios-fixed-bottom-position))] + (assoc state ::teardown teardown-fn))) + :will-unmount (fn [state] + (let [teardown (::teardown state)] + (when-not (nil? teardown) + (teardown))))} [] (when-let [route-match (state/sub :route-match)] (i18n/tongue-provider diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index 0ff062e49..82d174045 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -70,7 +70,7 @@ [:div {:style {:margin-right "8px"}} title] ;; [:div {:style {:position "absolute" :right "8px"}} ;; icon] - ]] +]] (rum/with-key (menu-link new-options child) (cljs.core/random-uuid))))]) @@ -104,27 +104,27 @@ [:svg.h-6.w-6.text-green-400 {:stroke "currentColor", :viewBox "0 0 24 24", :fill "none"} [:path - {:d "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z", - :stroke-width "2", - :stroke-linejoin "round", + {:d "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" + :stroke-width "2" + :stroke-linejoin "round" :stroke-linecap "round"}]]] :warning ["text-gray-900" [:svg.h-6.w-6.text-yellow-500 {:stroke "currentColor", :viewBox "0 0 24 24", :fill "none"} [:path - {:d "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z", - :stroke-width "2", - :stroke-linejoin "round", + {:d "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" + :stroke-width "2" + :stroke-linejoin "round" :stroke-linecap "round"}]]] ["text-red-500" [:svg.h-6.w-6.text-red-500 {:view-box "0 0 20 20", :fill "currentColor"} [:path - {:clip-rule "evenodd", + {:clip-rule "evenodd" :d - "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z", + "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" :fill-rule "evenodd"}]]])] [:div.inset-0.flex.items-end.justify-center.px-4.py-3.pointer-events-none.sm:px-6.sm:py-3.sm:items-start.sm:justify-end {:style {:z-index (if (or (= state "exiting") @@ -154,9 +154,9 @@ [:svg.h-5.w-5 {:fill "currentColor", :view-Box "0 0 20 20"} [:path - {:clip-rule "evenodd", + {:clip-rule "evenodd" :d - "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", + "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" :fill-rule "evenodd"}]]]]]]]]]))) (rum/defc notification < rum/reactive @@ -172,7 +172,7 @@ :key (name k)} (fn [state] (notification-content state (:content v) (:status v) k))))) - contents))))) + contents))))) (defn checkbox [option] @@ -193,18 +193,34 @@ (defn get-scroll-top [] (.-scrollTop (main-node))) +(defn get-dynamic-style-node + [] + (js/document.getElementById "dynamic-style-scope")) + +(defn inject-document-devices-envs! + [] + (let [cl (.-classList js/document.documentElement)] + (if (util/ios?) (.add cl "is-ios")) + (if (util/safari?) (.add cl "is-safari")))) + +(defn inject-dynamic-style-node! + [] + (let [style (get-dynamic-style-node)] + (if (nil? style) + (let [node (js/document.createElement "style")] + (set! (.-id node) "dynamic-style-scope") + (.appendChild js/document.head node)) + style))) + (defn setup-patch-ios-fixed-bottom-position "fix a common issue about ios webpage viewport when soft keyboard setup" [] (if (and - (util/ios?) - (not (nil? js/window.visualViewport))) + (util/ios?) + (not (nil? js/window.visualViewport))) (let [viewport js/visualViewport - style (js/document.createElement "style")] - (.add (.-classList js/document.documentElement) "is-ios") - (set! (.-id style) "dynamic-style-scope") - (.appendChild js/document.head style) + style (get-dynamic-style-node)] (let [sheet (.-sheet style) type "resize" handler @@ -219,8 +235,7 @@ (handler) (fn [] (.removeEventListener viewport type handler) - (prn "teardown viewport " type))) - ))) + (prn "TODO : teardown viewport" type)))))) ;; FIXME: compute the right scroll position when scrolling back to the top (defn on-scroll @@ -383,9 +398,9 @@ [:svg.h-6.w-6 {:stroke "currentColor", :view-box "0 0 24 24", :fill "none"} [:path - {:d "M6 18L18 6M6 6l12 12", - :stroke-width "2", - :stroke-linejoin "round", + {:d "M6 18L18 6M6 6l12 12" + :stroke-width "2" + :stroke-linejoin "round" :stroke-linecap "round"}]]]] (panel-content close-fn)]) @@ -491,8 +506,8 @@ (on-change value)))} (for [{:keys [label value selected]} options] [:option (cond-> - {:key label - :value (or value label)} + {:key label + :value (or value label)} selected (assoc :selected selected)) label])]) diff --git a/src/main/frontend/util.cljs b/src/main/frontend/util.cljs index 24506947f..c70888b54 100644 --- a/src/main/frontend/util.cljs +++ b/src/main/frontend/util.cljs @@ -19,8 +19,15 @@ [goog.userAgent])) ;; envs -(defn ios? [] - (not (nil? (re-find #"iPad|iPhone|iPod" (.-userAgent js/navigator))))) +(defn ios? + [] + (not (nil? (re-find #"iPad|iPhone|iPod" js/navigator.userAgent)))) + +(defn safari? + [] + (let [ua (string/lower-case js/navigator.userAgent)] + (and (string/includes? ua "webkit") + (not (string/includes? ua "chrome"))))) (defn format [fmt & args] From a7fe9f9eb83e0ecbe974a33560902232a3463988 Mon Sep 17 00:00:00 2001 From: charlie Date: Wed, 4 Nov 2020 18:11:04 +0800 Subject: [PATCH 06/11] feat(ui): improve UX of mobile editor toolbar. --- src/main/frontend/components/editor.cljs | 74 ++++++++++-------------- src/main/frontend/ui.cljs | 15 ++--- 2 files changed, 37 insertions(+), 52 deletions(-) diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs index 2f1471ab9..236c4bcdb 100644 --- a/src/main/frontend/components/editor.cljs +++ b/src/main/frontend/components/editor.cljs @@ -217,52 +217,35 @@ (rum/defc mobile-bar < rum/reactive [parent-state parent-id] - [:div.bg-base-2.fix-ios-fixed-bottom - {:style {:position "fixed" - :bottom 0 - :width "100%" - :left 0 - :justify-content "center" - :height "2.5rem" - :display "flex" - :align-items "center" - ;; This element should be the upper-most in most situations - :z-index 99999999}} + [:div#mobile-editor-toolbar.bg-base-2.fix-ios-fixed-bottom [:button.bottom-action - {:style {:padding "5px"} - :on-click #(editor-handler/adjust-block-level! parent-state :right)} + {:on-click #(editor-handler/adjust-block-level! parent-state :right)} svg/indent-block] [:button.bottom-action - {:style {:padding "5px"} - :on-click #(editor-handler/adjust-block-level! parent-state :left)} + {:on-click #(editor-handler/adjust-block-level! parent-state :left)} svg/outdent-block] [:button.bottom-action - {:style {:padding "5px"} - :on-click #(editor-handler/move-up-down parent-state % true)} + {:on-click #(editor-handler/move-up-down parent-state % true)} svg/move-up-block] [:button.bottom-action - {:style {:padding "5px"} - :on-click #(editor-handler/move-up-down parent-state % false)} + {:on-click #(editor-handler/move-up-down parent-state % false)} svg/move-down-block] [:button.bottom-action - {:style {:padding "5px"} - :on-click (fn [e] + {:on-click (fn [e] (let [old-content (state/sub [:editor/content parent-id]) new-content (str old-content "\n")] (state/set-state! :editor/content {parent-id new-content})) (.stopPropagation e))} svg/multi-line-input] [:button.font-extrabold.bottom-action.-mt-1 - {:style {:padding "5px"} - :on-click (fn [e] + {:on-click (fn [e] (let [old-content (state/sub [:editor/content parent-id]) new-content (str old-content "[[]]")] (state/set-state! :editor/content {parent-id new-content})) (.stopPropagation e))} "[[]]"] [:button.font-extrabold.bottom-action.-mt-1 - {:style {:padding "5px"} - :on-click (fn [e] + {:on-click (fn [e] (let [old-content (state/sub [:editor/content parent-id]) new-content (str old-content "(())")] (state/set-state! :editor/content {parent-id new-content})) @@ -311,21 +294,21 @@ [:input.form-input.block.w-full.pl-2.sm:text-sm.sm:leading-5 (merge (cond-> - {:key (str "modal-input-" (name id)) - :id (str "modal-input-" (name id)) - :type (or type "text") - :on-change (fn [e] - (swap! input-value assoc id (util/evalue e))) - :auto-complete (if (util/chrome?) "chrome-off" "off")} + {:key (str "modal-input-" (name id)) + :id (str "modal-input-" (name id)) + :type (or type "text") + :on-change (fn [e] + (swap! input-value assoc id (util/evalue e))) + :auto-complete (if (util/chrome?) "chrome-off" "off")} placeholder (assoc :placeholder placeholder)) (dissoc input-item :id))]]) (ui/button - "Submit" - :on-click - (fn [e] - (util/stop e) - (on-submit command @input-value pos)))]))))) + "Submit" + :on-click + (fn [e] + (util/stop e) + (on-submit command @input-value pos)))]))))) (rum/defc absolute-modal < rum/static [cp set-default-width? {:keys [top left]}] @@ -645,16 +628,17 @@ :on-hide (fn [state e event] (let [target (.-target e)] - (when-not (d/has-class? target "bottom-action") + (if (d/has-class? target "bottom-action") ;; FIXME: not particular case + (.preventDefault e) (let [{:keys [on-hide format value block id repo dummy?]} (get-state state)] - (when on-hide - (on-hide value event)) - (when - (or (= event :esc) - (= event :visibilitychange) - (and (= event :click) - (not (editor-handler/in-auto-complete? (gdom/getElement id))))) - (state/clear-edit!)))))) + (when on-hide + (on-hide value event)) + (when + (or (= event :esc) + (= event :visibilitychange) + (and (= event :click) + (not (editor-handler/in-auto-complete? (gdom/getElement id))))) + (state/clear-edit!)))))) :node (gdom/getElement id) :visibilitychange? true)) 100) diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index 82d174045..3058b40b0 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -225,17 +225,18 @@ type "resize" handler (fn [] - (let [vh (+ (.-offsetTop viewport) (.-height viewport)) - rule (.. sheet -rules (item 0)) - set-top #(set! (.. rule -style -top) (str % "px"))] - (set-top vh) - (prn "resize " vh (.. rule -style -top))))] + (let [f (fn [] + (let [vh (+ (.-offsetTop viewport) (.-height viewport)) + rule (.. sheet -rules (item 0)) + set-top #(set! (.. rule -style -top) (str % "px"))] + (set-top vh)))] + (js/setTimeout f 200))) + timer (js/setInterval handler 1000)] (.insertRule sheet ".fix-ios-fixed-bottom {bottom:unset !important; transform: translateY(-100%); top: 0px;}") (.addEventListener viewport type handler false) - (handler) (fn [] (.removeEventListener viewport type handler) - (prn "TODO : teardown viewport" type)))))) + (js/clearInterval timer)))))) ;; FIXME: compute the right scroll position when scrolling back to the top (defn on-scroll From bb91e1988c317dc907bff35655bc5b79915b435c Mon Sep 17 00:00:00 2001 From: charlie Date: Wed, 4 Nov 2020 18:15:16 +0800 Subject: [PATCH 07/11] refactor(ui): format common.css with 2 spaces indent and separate mobile bar css as an ID module. --- resources/css/common.css | 1416 +++++++++++++++++++++----------------- 1 file changed, 772 insertions(+), 644 deletions(-) diff --git a/resources/css/common.css b/resources/css/common.css index 1c1c13be8..e14f8ba21 100644 --- a/resources/css/common.css +++ b/resources/css/common.css @@ -1,295 +1,289 @@ :root { - --ls-tag-text-opacity: 0.6; - --ls-tag-text-hover-opacity: 0.8; - --ls-page-text-size: 1em; - --ls-page-title-size: 36px; - --ls-font-family: 'Inter'; + --ls-tag-text-opacity: 0.6; + --ls-tag-text-hover-opacity: 0.8; + --ls-page-text-size: 1em; + --ls-page-title-size: 36px; + --ls-font-family: 'Inter'; } .dark-theme { - --ls-primary-background-color: #002b36; - --ls-secondary-background-color: #073642; - --ls-tertiary-background-color: var(--ls-secondary-background-color); - --ls-block-properties-background-color: #02222a; - --ls-search-background-color: var(--ls-primary-background-color); - --ls-border-color: #0e5263; - --ls-menu-hover-color: var(--ls-secondary-background-color); + --ls-primary-background-color: #002b36; + --ls-secondary-background-color: #073642; + --ls-tertiary-background-color: var(--ls-secondary-background-color); + --ls-block-properties-background-color: #02222a; + --ls-search-background-color: var(--ls-primary-background-color); + --ls-border-color: #0e5263; + --ls-menu-hover-color: var(--ls-secondary-background-color); - --ls-primary-text-color: #a4b5b6; - --ls-secondary-text-color: #dfdfdf; - --ls-title-text-color: #93a1a1; - --ls-link-text-color: #8abbbb; - --ls-link-text-hover-color: #d0e8e8; - --ls-link-ref-text-color: var(--ls-link-text-color); - --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color); - --ls-tag-text-color: var(--ls-link-text-color); - --ls-tag-text-hover-color: var(--ls-link-text-hover-color); + --ls-primary-text-color: #a4b5b6; + --ls-secondary-text-color: #dfdfdf; + --ls-title-text-color: #93a1a1; + --ls-link-text-color: #8abbbb; + --ls-link-text-hover-color: #d0e8e8; + --ls-link-ref-text-color: var(--ls-link-text-color); + --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color); + --ls-tag-text-color: var(--ls-link-text-color); + --ls-tag-text-hover-color: var(--ls-link-text-hover-color); - --ls-block-bullet-border-color: #0f4958; - --ls-block-bullet-color: #608e91; - --ls-block-highlight-color: #074758; + --ls-block-bullet-border-color: #0f4958; + --ls-block-bullet-color: #608e91; + --ls-block-highlight-color: #074758; - --ls-page-checkbox-color: #6093a0; - --ls-page-checkbox-border-color: var(--ls-primary-background-color); - --ls-page-blockquote-color: var(--ls-primary-text-color); - --ls-page-blockquote-bg-color: var(--ls-tertiary-background-color); - --ls-page-blockquote-border-color: var(--ls-secondary-text-color); - --ls-page-inline-code-color: var(--ls-primary-text-color); - --ls-page-inline-code-bg-color: #01222a; + --ls-page-checkbox-color: #6093a0; + --ls-page-checkbox-border-color: var(--ls-primary-background-color); + --ls-page-blockquote-color: var(--ls-primary-text-color); + --ls-page-blockquote-bg-color: var(--ls-tertiary-background-color); + --ls-page-blockquote-border-color: var(--ls-secondary-text-color); + --ls-page-inline-code-color: var(--ls-primary-text-color); + --ls-page-inline-code-bg-color: #01222a; - --ls-scrollbar-color: #001F27; - --ls-scrollbar-thumb-hover-color: #b4b4b466; + --ls-scrollbar-color: #001F27; + --ls-scrollbar-thumb-hover-color: #b4b4b466; - --ls-head-text-color: var(--ls-link-text-color); - --ls-icon-color: var(--ls-link-text-color); - --ls-search-icon-color: var(--ls-link-text-color); - --ls-a-chosen-bg: var(--ls-secondary-background-color); - --ls-right-sidebar-code-bg-color: #04303c; + --ls-head-text-color: var(--ls-link-text-color); + --ls-icon-color: var(--ls-link-text-color); + --ls-search-icon-color: var(--ls-link-text-color); + --ls-a-chosen-bg: var(--ls-secondary-background-color); + --ls-right-sidebar-code-bg-color: #04303c; } .white-theme { - --ls-primary-background-color: white; - --ls-secondary-background-color: #D8E1E8; - --ls-tertiary-background-color: #f0f8ff; - --ls-block-properties-background-color: var(--ls-tertiary-background-color); - --ls-search-background-color: var(--ls-primary-background-color); - --ls-border-color: #ccc; - --ls-menu-hover-color: var(--ls-secondary-background-color); + --ls-primary-background-color: white; + --ls-secondary-background-color: #D8E1E8; + --ls-tertiary-background-color: #f0f8ff; + --ls-block-properties-background-color: var(--ls-tertiary-background-color); + --ls-search-background-color: var(--ls-primary-background-color); + --ls-border-color: #ccc; + --ls-menu-hover-color: var(--ls-secondary-background-color); - --ls-primary-text-color: #24292e; - --ls-secondary-text-color: #161e2e; - --ls-title-text-color: #222; - --ls-link-text-color: #045591; - --ls-link-text-hover-color: #000; - --ls-link-ref-text-color: var(--ls-link-text-color); - --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color); - --ls-tag-text-color: var(--ls-link-text-color); - --ls-tag-text-hover-color: var(--ls-link-text-hover-color); + --ls-primary-text-color: #24292e; + --ls-secondary-text-color: #161e2e; + --ls-title-text-color: #222; + --ls-link-text-color: #045591; + --ls-link-text-hover-color: #000; + --ls-link-ref-text-color: var(--ls-link-text-color); + --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color); + --ls-tag-text-color: var(--ls-link-text-color); + --ls-tag-text-hover-color: var(--ls-link-text-hover-color); - --ls-block-bullet-border-color: #ced9e0; - --ls-block-bullet-color: #394b59; - --ls-block-highlight-color: #7cccff; + --ls-block-bullet-border-color: #ced9e0; + --ls-block-bullet-color: #394b59; + --ls-block-highlight-color: #7cccff; - --ls-page-checkbox-color: none; - --ls-page-checkbox-border-color: #808080; - --ls-page-blockquote-color: var(--ls-primary-text-color); - --ls-page-blockquote-bg-color: var(--ls-tertiary-background-color); - --ls-page-blockquote-border-color: var(--ls-secondary-text-color); - --ls-page-inline-code-color: var(--ls-primary-text-color); - --ls-page-inline-code-bg-color: #eeeeee; + --ls-page-checkbox-color: none; + --ls-page-checkbox-border-color: #808080; + --ls-page-blockquote-color: var(--ls-primary-text-color); + --ls-page-blockquote-bg-color: var(--ls-tertiary-background-color); + --ls-page-blockquote-border-color: var(--ls-secondary-text-color); + --ls-page-inline-code-color: var(--ls-primary-text-color); + --ls-page-inline-code-bg-color: #eeeeee; - --ls-head-text-color: var(--ls-link-text-color); - --ls-icon-color: #6b7280; - --ls-search-icon-color: var(--ls-icon-color); - --ls-a-chosen-bg: #f4f5f7; - --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color); + --ls-head-text-color: var(--ls-link-text-color); + --ls-icon-color: #6b7280; + --ls-search-icon-color: var(--ls-icon-color); + --ls-a-chosen-bg: #f4f5f7; + --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color); } html { - font-family: var(--ls-font-family), Inter, sans-serif, system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI", Roboto, "Helvetica Neue", Arial ,"Noto Sans", serif, Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol!important; -} - -html.is-ios, html.is-ios > body { - -webkit-overflow-scrolling : touch; - overflow: auto !important; - height: 100% !important; + font-family: var(--ls-font-family), Inter, sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important; } @supports (font-variation-settings: normal) { - html { - font-family: 'Inter var', sans-serif; - } + html { + font-family: 'Inter var', sans-serif; + } } a svg { - color: var(--ls-icon-color); + color: var(--ls-icon-color); } html, body, #root, #draw { - height: 100%; + height: 100%; } html, body { - background-color: #002b36; + background-color: #002b36; } body { - color: #24292e; - line-height: 1.5; + color: #24292e; + line-height: 1.5; } -.form-checkbox{ - -webkit-appearance:none; - -moz-appearance:none; - appearance:none +.form-checkbox { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none } .ls-center { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } .-mr-14 { - margin-right: -3.5rem; + margin-right: -3.5rem; } textarea { - overflow: hidden; - padding: 8px; - border: 1px solid rgba(39,41,43,.15); - border-radius: 4px; - font-size: 1rem; - line-height: 1.5; - width: 100%; - resize: none; - outline: none; + overflow: hidden; + padding: 8px; + border: 1px solid rgba(39, 41, 43, .15); + border-radius: 4px; + font-size: 1rem; + line-height: 1.5; + width: 100%; + resize: none; + outline: none; } ul { - list-style: circle; - margin-left: 1.2em; + list-style: circle; + margin-left: 1.2em; } ol { - list-style: decimal; - margin-left: 1.2em; + list-style: decimal; + margin-left: 1.2em; } .content p, .content div { - word-break: break-word; + word-break: break-word; } #journals .journal { - border-top: 1px solid ; - border-top-color: #738694; - border-top-color: var(--ls-border-color); - padding: 48px 0; - margin: 24px 0 128px 0; + border-top: 1px solid; + border-top-color: #738694; + border-top-color: var(--ls-border-color); + padding: 48px 0; + margin: 24px 0 128px 0; } #journals .journal:first-child { - border-top: none; - padding: 0; - min-height: 500px; + border-top: none; + padding: 0; + min-height: 500px; } #sidebar-nav-wrapper { - margin-top: 0px; - border-right: 24px; - position: sticky; - top: 0; - transition: all 200ms ease-in 0s; - -webkit-transition: all 200ms ease-in 0s; + margin-top: 0px; + border-right: 24px; + position: sticky; + top: 0; + transition: all 200ms ease-in 0s; + -webkit-transition: all 200ms ease-in 0s; } -#sidebar-nav-wrapper.enter{ - opacity: 1; - left: 0; +#sidebar-nav-wrapper.enter { + opacity: 1; + left: 0; } #journals { - margin-bottom: 70vh; + margin-bottom: 70vh; } .page { - margin-top: 24px; + margin-top: 24px; } p { - line-height: 1.5; - margin: 0.5rem 0; + line-height: 1.5; + margin: 0.5rem 0; } li p:first-child, .block-body p:first-child { - margin-top: 0; + margin-top: 0; } li p:last-child, .block-body p:last-child { - margin-bottom: 0; + margin-bottom: 0; } li { - margin: 0.25rem 0; + margin: 0.25rem 0; } #search p { - margin: 0; + margin: 0; } .pre-white-space { - white-space: pre; + white-space: pre; } .pre-wrap-white-space { - white-space: pre-wrap; + white-space: pre-wrap; } .pre-line-white-space { - white-space: pre-line; + white-space: pre-line; } .editor textarea { - border: none; - border-radius: 0; - background: transparent; - padding: 0; + border: none; + border-radius: 0; + background: transparent; + padding: 0; } .non-block-editor textarea, pre { - display: block; - padding: 0.5rem; - box-shadow: 0 0 0 1px rgba(0,0,0,.02); - border-radius: 4px; + display: block; + padding: 0.5rem; + box-shadow: 0 0 0 1px rgba(0, 0, 0, .02); + border-radius: 4px; } .non-block-editor textarea { - background: #F6F8FA; - background: var(--ls-secondary-background-color); + background: #F6F8FA; + background: var(--ls-secondary-background-color); } pre { - background: #F6F8FA; - background: var(--ls-secondary-background-color); + background: #F6F8FA; + background: var(--ls-secondary-background-color); } #journals textarea { - word-break: break-word; - overflow: hidden; + word-break: break-word; + overflow: hidden; } textarea { - text-size-adjust: 100%; + text-size-adjust: 100%; } .cursor-pointer, .cursor { - cursor: pointer; + cursor: pointer; } #left-bar a { - color: var(--ls-icon-color); + color: var(--ls-icon-color); } a { - cursor: pointer; - color:#045591; - color: var(--ls-link-text-color); - text-decoration:none; + cursor: pointer; + color: #045591; + color: var(--ls-link-text-color); + text-decoration: none; } a:hover { - color: #000; - color: var(--ls-link-text-hover-color); + color: #000; + color: var(--ls-link-text-hover-color); } /* Is this required? */ -.content p a:hover{ - text-decoration:none; - border-bottom: 1px solid; - border-bottom-color: black; - border-bottom-color: var(--ls-link-text-hover-color); +.content p a:hover { + text-decoration: none; + border-bottom: 1px solid; + border-bottom-color: black; + border-bottom-color: var(--ls-link-text-hover-color); } /* .content a[href^="http"]:after { */ @@ -302,787 +296,836 @@ a:hover { /* } */ .content a.initial-color, .content a.initial-color:hover { - color:initial; - text-decoration:none; + color: initial; + text-decoration: none; } a.block-control, a.block-control:hover { - text-decoration: none; - cursor: pointer; - font-size: 14px; - min-width: 10px; - color: initial; + text-decoration: none; + cursor: pointer; + font-size: 14px; + min-width: 10px; + color: initial; } .dropdown-caret { - display: inline-block; - width: 0; - height: 0; - vertical-align: middle; - content: ""; - border-top-style: solid; - border-top-width: 4px; - border-right: 4px solid transparent; - border-bottom: 0 solid transparent; - border-left: 4px solid transparent; + display: inline-block; + width: 0; + height: 0; + vertical-align: middle; + content: ""; + border-top-style: solid; + border-top-width: 4px; + border-right: 4px solid transparent; + border-bottom: 0 solid transparent; + border-left: 4px solid transparent; } h1.title { - margin-bottom: 1.5rem; - color: #222; - color: var(--ls-title-text-color); - font-size: 36px; - font-size: var(--ls-page-title-size); + margin-bottom: 1.5rem; + color: #222; + color: var(--ls-title-text-color); + font-size: 36px; + font-size: var(--ls-page-title-size); } .page-references h2 { - color: var(--ls-title-text-color); + color: var(--ls-title-text-color); } a.page-ref { - color: var(--ls-link-ref-text-color) + color: var(--ls-link-ref-text-color) } a.page-ref:hover { - color: var(--ls-link-ref-text-hover-color) + color: var(--ls-link-ref-text-hover-color) } .ls-block { - min-height: 24px; + min-height: 24px; } .block-highlight, .content .selected { - background-color: #7cccff; - background-color: var(--ls-block-highlight-color); + background-color: #7cccff; + background-color: var(--ls-block-highlight-color); } span.timestamp { - margin: 0 0.25rem; + margin: 0 0.25rem; } span.priority { - color: #6b7280; + color: #6b7280; } /* page transition */ .fade-enter { - opacity: 0; + opacity: 0; } .fade-enter.fade-enter-active { - opacity: 1; - transition: opacity 500ms ease-in; + opacity: 1; + transition: opacity 500ms ease-in; } .fade-exit { - opacity: 1; + opacity: 1; } .fade-exit.fade-exit-active { - opacity: 0; - transition: opacity 300ms ease-in; + opacity: 0; + transition: opacity 300ms ease-in; } svg { - pointer-events: none; + pointer-events: none; } -.noscroll { position: fixed; overflow-y:scroll } +.noscroll { + position: fixed; + overflow-y: scroll +} #left-sidebar { - width: 240px; - height: 100%; - top: 0; - left: -240px; - position: absolute; - z-index: 11; - opacity: 0; - transition: all 0.25s; - -webkit-transition: all 0.25s; - background-color: #002b36; + width: 240px; + height: 100%; + top: 0; + left: -240px; + position: absolute; + z-index: 11; + opacity: 0; + transition: all 0.25s; + -webkit-transition: all 0.25s; + background-color: #002b36; } -#left-sidebar.enter{ - opacity: 1; - left: 0; +#left-sidebar.enter { + opacity: 1; + left: 0; } #right-sidebar { - position: sticky; - top: 0; - transition: all 200ms ease-in 0s; - -webkit-transition: all 200ms ease-in 0s; - background-color: #D8E1E8; - background-color: var(--ls-secondary-background-color); - padding-bottom: 48px; + position: sticky; + top: 0; + transition: all 200ms ease-in 0s; + -webkit-transition: all 200ms ease-in 0s; + background-color: #D8E1E8; + background-color: var(--ls-secondary-background-color); + padding-bottom: 48px; } -#right-sidebar.enter{ - opacity: 1; - right: 0; +#right-sidebar.enter { + opacity: 1; + right: 0; } #right-sidebar .page { - margin-top: 0; + margin-top: 0; } .lds-dual-ring { - display: inline-block; + display: inline-block; } + .lds-dual-ring:after { - content: " "; - display: block; - width: 20px; - height: 20px; - margin: 3px; - border-radius: 50%; - border: 2px solid; - border: 2px solid; - border-color: #24292E transparent; - border-color: var(--ls-primary-text-color) transparent; - animation: lds-dual-ring 1.2s linear infinite; + content: " "; + display: block; + width: 20px; + height: 20px; + margin: 3px; + border-radius: 50%; + border: 2px solid; + border: 2px solid; + border-color: #24292E transparent; + border-color: var(--ls-primary-text-color) transparent; + animation: lds-dual-ring 1.2s linear infinite; } @keyframes lds-dual-ring { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } } .canceled { - text-decoration: line-through; + text-decoration: line-through; } /* Drawing */ #draw { - -webkit-app-region: no-drag; - overflow: hidden; + -webkit-app-region: no-drag; + overflow: hidden; } #draw iframe { - width: 100%; - height: 100%; - border: none; + width: 100%; + height: 100%; + border: none; } .form-checkbox:not(:checked):focus { - box-shadow: none; + box-shadow: none; } .form-checkbox:checked:focus { - box-shadow: none; + box-shadow: none; } a.nav-item:hover, a.star-page:hover { - background-color: #00242d; + background-color: #00242d; } .blocks__properties { - background-color: #f0f8ff; - background-color: var(--ls-block-properties-background-color); + background-color: #f0f8ff; + background-color: var(--ls-block-properties-background-color); } /* block dropdown top, auto-complete, sync dropdown */ .bg-base-3 { - background-color: #FFF; - background-color: var(--ls-primary-background-color); + background-color: #FFF; + background-color: var(--ls-primary-background-color); } /* primary bg */ .h-screen { - background-color: #FFF; - background-color: var(--ls-primary-background-color); + background-color: #FFF; + background-color: var(--ls-primary-background-color); } #head { - background-color: #FFF; - background-color: var(--ls-primary-background-color); + background-color: #FFF; + background-color: var(--ls-primary-background-color); } -#search_field{ - background-color: #FFF; - background-color: var(--ls-search-background-color); - color: #161e2e; - color: var(--ls-secondary-text-color); +#search_field { + background-color: #FFF; + background-color: var(--ls-search-background-color); + color: #161e2e; + color: var(--ls-secondary-text-color); } .bg-base-2 { - background-color: #f0f8ff; - background-color: var(--ls-tertiary-background-color); + background-color: #f0f8ff; + background-color: var(--ls-tertiary-background-color); } a.menu-link:hover, button.pull:hover, button.menu:focus { - background-color: #f4f5f7; - background-color: var(--ls-menu-hover-color); + background-color: #f4f5f7; + background-color: var(--ls-menu-hover-color); } a.menu-link { - background-color: #ffffff; - background-color: var(--ls-primary-background-color); + background-color: #ffffff; + background-color: var(--ls-primary-background-color); } .white-theme #head a { - color: var(--ls-link-text-hover-color); + color: var(--ls-link-text-hover-color); } button.menu { - border-right: 1px solid; - border-right-color: #f0f8ff; - border-right-color: var(--ls-secondary-background-color); - color: #24292e; - color: var(--ls-link-text-color); + border-right: 1px solid; + border-right-color: #f0f8ff; + border-right-color: var(--ls-secondary-background-color); + color: #24292e; + color: var(--ls-link-text-color); } #root > div { - color: #24292e; - color: var(--ls-primary-text-color); + color: #24292e; + color: var(--ls-primary-text-color); } #main-content-container { - font-size: 1em; - font-size: var(--ls-page-text-size); + font-size: 1em; + font-size: var(--ls-page-text-size); } .form-checkbox { - color: #137cbd; - color: var(--ls-page-checkbox-color); - background-color: none; - background-color: var(--ls-page-checkbox-color); - border: 1px solid; - border-color: #808080; - border-color: var(--ls-page-checkbox-border-color) + color: #137cbd; + color: var(--ls-page-checkbox-color); + background-color: none; + background-color: var(--ls-page-checkbox-color); + border: 1px solid; + border-color: #808080; + border-color: var(--ls-page-checkbox-border-color) } input { - color: var(--ls-primary-text-color); - background: transparent; + color: var(--ls-primary-text-color); + background: transparent; } /* ever used? */ .focus\:shadow-outline:focus { - box-shadow: 0 0 0 3px #839496; + box-shadow: 0 0 0 3px #839496; } + /* .form-input { */ /* background-color: #FDF6E3; */ /* } */ .form-select { - background-color: none; - background-color: var(--ls-primary-background-color); - background-repeat: no-repeat; - background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"); + background-color: none; + background-color: var(--ls-primary-background-color); + background-repeat: no-repeat; + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'%3e%3cpath d='M7 7l3-3 3 3m0 6l-3 3-3-3' stroke='%239fa6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e"); } .before-block p { - margin-bottom: 0; + margin-bottom: 0; } #right-sidebar .sidebar-item { - border-top: 1px solid; - border-top-color: #ccc; - border-top-color: var(--ls-border-color); - margin-bottom: 24px; - padding-top: 24px; + border-top: 1px solid; + border-top-color: #ccc; + border-top-color: var(--ls-border-color); + margin-bottom: 24px; + padding-top: 24px; } #right-sidebar .sidebar-item:first-child { - border-top: none; + border-top: none; } #global-graph, #page-graph { - min-height: 100% !important; - height: 100%; - width: 100%; - overflow: hidden; - position: relative; - z-index: 4; + min-height: 100% !important; + height: 100%; + width: 100%; + overflow: hidden; + position: relative; + z-index: 4; } .opacity-70 { - opacity: .7; + opacity: .7; } .opacity-80 { - opacity: .8; + opacity: .8; } -*:not(pre)>code{ - font-style:normal!important; - letter-spacing:0; - padding:.1em .4em; - word-spacing:-.15em; - background-color:#eee; - -webkit-border-radius:4px; - border-radius:4px; - line-height:1.45; - text-rendering:optimizeSpeed +*:not(pre) > code { + font-style: normal !important; + letter-spacing: 0; + padding: .1em .4em; + word-spacing: -.15em; + background-color: #eee; + -webkit-border-radius: 4px; + border-radius: 4px; + line-height: 1.45; + text-rendering: optimizeSpeed } hr { - margin: 2rem 0; - border-color: #ccc; - border-color: var(--ls-border-color); + margin: 2rem 0; + border-color: #ccc; + border-color: var(--ls-border-color); } #search-wrapper svg { - color: #9fa6b2; - color: var(--ls-search-icon-color); - /* margin-left: 6px; */ + color: #9fa6b2; + color: var(--ls-search-icon-color); + /* margin-left: 6px; */ } #search-wrapper:focus-within svg { - color: #4b5563; - color: var(--ls-link-text-hover-color); + color: #4b5563; + color: var(--ls-link-text-hover-color); } .file textarea, .file pre { - margin: 0; + margin: 0; } a.button { - -webkit-appearance: button; - -moz-appearance: button; - appearance: button; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; - text-decoration: none; - color: #FFF; - display: inline; + text-decoration: none; + color: #FFF; + display: inline; } /* ever used? */ a.button:hover, .content a.button { - color: #FFF; + color: #FFF; } a.menu-link { - color: var(--ls-link-text-color); + color: var(--ls-link-text-color); } .white-theme a.menu-link { - color: var(--ls-primary-text-color); + color: var(--ls-primary-text-color); } a.menu-link:hover { - color: var(--ls-link-text-hover-color); + color: var(--ls-link-text-hover-color); } a.chosen { - background: var(--ls-a-chosen-bg); + background: var(--ls-a-chosen-bg); } .done, .canceled { - opacity: 0.7; + opacity: 0.7; } .sync-content p { - margin: 0.25rem 0; + margin: 0.25rem 0; } code { - font-size: 85%; + font-size: 85%; } pre.code { - background: #282A36; - background: var(--ls-secondary-background-color); - color: #f8f8f2; - color: var(--ls-primary-text-color); + background: #282A36; + background: var(--ls-secondary-background-color); + color: #f8f8f2; + color: var(--ls-primary-text-color); } /* Are these reachable? */ #right-sidebar .non-block-editor textarea, #right-sidebar pre, #right-sidebar pre.code { - background: var(--ls-right-sidebar-code-bg-color); + background: var(--ls-right-sidebar-code-bg-color); } #right-sidebar pre.CodeMirror-line { - background: #FFFFFF; + background: #FFFFFF; } -:not(pre)>code { - color: var(--ls-page-inline-code-color); - background: #eeeeee; - background: var(--ls-page-inline-code-bg-color); +:not(pre) > code { + color: var(--ls-page-inline-code-color); + background: #eeeeee; + background: var(--ls-page-inline-code-bg-color); } mark { - background: #FEF3AC; - color: #262626; - padding: 0 1px; + background: #FEF3AC; + color: #262626; + padding: 0 1px; } dl { - margin: 1rem 0; + margin: 1rem 0; } dt { - margin-bottom: 0.25rem; - font-weight: bold; + margin-bottom: 0.25rem; + font-weight: bold; } -:root{ - scrollbar-color: #0079D3 #2E3645 !important; - scrollbar-width: thin !important; +:root { + scrollbar-color: #0079D3 #2E3645 !important; + scrollbar-width: thin !important; } * { - scrollbar-width: thin !important; + scrollbar-width: thin !important; } blockquote { - display: block; - text-indent: 0em; - padding: 10px 20px; - border-left: 3px solid; - border-left-color: #d3d3d3; - border-left-color: var(--ls-page-blockquote-border-color); - background-color: #f7f7f7; - background-color: var(--ls-page-blockquote-bg-color); - margin: 1rem 0; - color: #24292e; - color: var(--ls-page-blockquote-color); + display: block; + text-indent: 0em; + padding: 10px 20px; + border-left: 3px solid; + border-left-color: #d3d3d3; + border-left-color: var(--ls-page-blockquote-border-color); + background-color: #f7f7f7; + background-color: var(--ls-page-blockquote-bg-color); + margin: 1rem 0; + color: #24292e; + color: var(--ls-page-blockquote-color); } .dark-theme ::-webkit-scrollbar, .dark-theme ::-webkit-scrollbar-track-piece { - background-color: var(--ls-scrollbar-color); - border: 4px solid; - border-color: var(--ls-scrollbar-color); + background-color: var(--ls-scrollbar-color); + border: 4px solid; + border-color: var(--ls-scrollbar-color); } .dark-theme ::-webkit-scrollbar-thumb { - background-color: var(--ls-secondary-background-color); - background-clip: padding-box; - min-height: 28px; + background-color: var(--ls-secondary-background-color); + background-clip: padding-box; + min-height: 28px; } .dark-theme ::-webkit-scrollbar-thumb:hover { - background-color: var(--ls-scrollbar-thumb-hover-color); + background-color: var(--ls-scrollbar-thumb-hover-color); } .svg-shadow { - -webkit-filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, .7)); - filter: drop-shadow( 1px 1px 2px rgba(0, 0, 0, .5)); + -webkit-filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .7)); + filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, .5)); } .tip-shadow { - -webkit-filter: drop-shadow( 1px 1px 2px rgba(155,155,0,.8)); - filter: drop-shadow( 1px 1px 2px rgba(155,155,0,.8)); + -webkit-filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, .8)); + filter: drop-shadow(1px 1px 2px rgba(155, 155, 0, .8)); } svg.note { - color: #19407c; - color: var(--ls-primary-text-color); + color: #19407c; + color: var(--ls-primary-text-color); } .white-theme svg.tip { - color: #111; + color: #111; } .dark-theme svg.tip { - color: #b0c8af; + color: #b0c8af; } .admonition-icon { - border-right: 1px solid; - border-right-color: #ccc; - border-right-color: var(--ls-border-color); + border-right: 1px solid; + border-right-color: #ccc; + border-right-color: var(--ls-border-color); } /* make keyframes that tell the start state and the end state of our object */ -@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } -@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } -@keyframes fadeIn { from { opacity:0; } to { opacity:1; } } +@-webkit-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@-moz-keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} .fade-in { - opacity:0; /* make things invisible upon start */ - -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ - -moz-animation:fadeIn ease-in 1; - animation:fadeIn ease-in 1; + opacity: 0; /* make things invisible upon start */ + -webkit-animation: fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ + -moz-animation: fadeIn ease-in 1; + animation: fadeIn ease-in 1; - -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ - -moz-animation-fill-mode:forwards; - animation-fill-mode:forwards; + -webkit-animation-fill-mode: forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ + -moz-animation-fill-mode: forwards; + animation-fill-mode: forwards; - -webkit-animation-duration:2s; - -moz-animation-duration:2s; - animation-duration:2s; + -webkit-animation-duration: 2s; + -moz-animation-duration: 2s; + animation-duration: 2s; } .fade-in.one { - -webkit-animation-delay: 0.5s; - -moz-animation-delay: 0.5s; - animation-delay: 0.5s; + -webkit-animation-delay: 0.5s; + -moz-animation-delay: 0.5s; + animation-delay: 0.5s; } .fade-in.two { - -webkit-animation-delay: 1s; - -moz-animation-delay: 1s; - animation-delay: 1s; + -webkit-animation-delay: 1s; + -moz-animation-delay: 1s; + animation-delay: 1s; } .fade-in.three { - -webkit-animation-delay: 1.5s; - -moz-animation-delay: 1.5s; - animation-delay: 1.5s; + -webkit-animation-delay: 1.5s; + -moz-animation-delay: 1.5s; + animation-delay: 1.5s; } .fade-in.four { - -webkit-animation-delay: 2s; - -moz-animation-delay: 2s; - animation-delay: 2s; + -webkit-animation-delay: 2s; + -moz-animation-delay: 2s; + animation-delay: 2s; } .block-children { - border-left: 1px solid; - border-left-color: #ddd; - border-left-color: var(--ls-border-color); + border-left: 1px solid; + border-left-color: #ddd; + border-left-color: var(--ls-border-color); } .dnd-separator { - border-bottom: 3px solid transparent; + border-bottom: 3px solid transparent; } .dnd-separator-cur { - border-bottom: 3px solid #999; + border-bottom: 3px solid #999; } iframe { - /* width: 100%; */ - margin: 1rem 0; + /* width: 100%; */ + margin: 1rem 0; } /* copied from https://github.com/drdogbot7/tailwindcss-responsive-embed */ .embed-responsive { - position: relative; - display: block; - height: 0; - padding: 0; - overflow: hidden; + position: relative; + display: block; + height: 0; + padding: 0; + overflow: hidden; + +.embed-responsive-item, +iframe, +embed, +object, +video { + position: absolute; + top: 0; + left: 0; + bottom: 0; + height: 100%; + width: 100%; + border: 0; +} - .embed-responsive-item, - iframe, - embed, - object, - video { - position: absolute; - top: 0; - left: 0; - bottom: 0; - height: 100%; - width: 100%; - border: 0; - } } .aspect-ratio-square { - padding-top: 100%; + padding-top: 100%; } + .aspect-ratio-16\/9 { - padding-top: 56.25%; + padding-top: 56.25%; } + .aspect-ratio-4\/3 { - padding-top: 75%; + padding-top: 75%; } + .aspect-ratio-21\/9 { - padding-top: 42.86%; + padding-top: 42.86%; } .footdef { - margin: 1rem 0; + margin: 1rem 0; } .slide .reveal section img { - margin: 1rem auto; + margin: 1rem auto; } .reveal .progress span { - display: block; - height: 100%; - width: 100%; - background-color: currentColor; - transition: transform .8s cubic-bezier(.26,.86,.44,.985); - transform-origin: 0 0; - transform: scaleX(0); + display: block; + height: 100%; + width: 100%; + background-color: currentColor; + transition: transform .8s cubic-bezier(.26, .86, .44, .985); + transform-origin: 0 0; + transform: scaleX(0); } pre { - margin: 1rem 0; + margin: 1rem 0; } span.bullet-container { - display: flex; - height: 13px; - width: 13px; - border-radius: 50%; - justify-content: center; - align-items: center; + display: flex; + height: 13px; + width: 13px; + border-radius: 50%; + justify-content: center; + align-items: center; } .bullet-container .bullet { - border-radius: 50%; - width: 5px; - height: 5px; - background-color: #394b59; - background-color: var(--ls-block-bullet-color); + border-radius: 50%; + width: 5px; + height: 5px; + background-color: #394b59; + background-color: var(--ls-block-bullet-color); } .bullet-closed { - background-color: #ced9e0; - background-color: var(--ls-block-bullet-border-color); + background-color: #ced9e0; + background-color: var(--ls-block-bullet-border-color); } /* use case? */ .doc-mode .block-children { - border-left: none; + border-left: none; } .doc-mode .hide-inner-bullet .bullet { - display: none; + display: none; } .doc-mode { - margin-left: -16px; + margin-left: -16px; } .admonitionblock { - margin: 2rem 0; + margin: 2rem 0; } li:first-child { - margin-top: 0; + margin-top: 0; } .abstract { - margin: 2rem 0; - width: 80%; - font-style: italic; + margin: 2rem 0; + width: 80%; + font-style: italic; } .abstract p:last-of-type:before { - content: " "; - white-space: pre; + content: " "; + white-space: pre; } a.warning, span.warning { - background: #F56565; - padding: .1em .4em; - border-radius: 4px; - color: #fff; + background: #F56565; + padding: .1em .4em; + border-radius: 4px; + color: #fff; } /* use case? */ .content a.warning { - color: #fff; + color: #fff; } .draw { - display: flex; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; + display: flex; + position: fixed; + top: 0; + bottom: 0; + left: 0; + right: 0; } .excalidraw-embed .draw { - position: relative; + position: relative; } button.context-menu-option { - font-size: 14px; + font-size: 14px; } .popover .context-menu li { - margin: 0; + margin: 0; } ::selection { - background: #338FFF; + background: #338FFF; } ::-moz-selection { - background: #338FFF; + background: #338FFF; } .dropdown-overflow-auto { - max-height: 400px; - overflow-y: auto; + max-height: 400px; + overflow-y: auto; } .notification-area { - background-color: #FFF; + background-color: #FFF; } .content img { - margin-top: 1rem; - margin-bottom: 1rem; + margin-top: 1rem; + margin-bottom: 1rem; } a.login { - color: #444; - color: var(--ls-link-text-color); + color: #444; + color: var(--ls-link-text-color); } a.login:hover { - color: #000; - color: var(--ls-link-text-hover-color); + color: #000; + color: var(--ls-link-text-hover-color); } .marker-switch { - display: inline; - font-size: 85%; - margin-right: 6px; - margin-left: 2px; - border-radius: 3px; - font-weight: 500; - display: inline-block; - width: 16px; - height: 18px; - opacity: 0.5; - padding: 0 2px 0 2px; - border: 1px solid; + display: inline; + font-size: 85%; + margin-right: 6px; + margin-left: 2px; + border-radius: 3px; + font-weight: 500; + display: inline-block; + width: 16px; + height: 18px; + opacity: 0.5; + padding: 0 2px 0 2px; + border: 1px solid; } a.marker-switch:hover { - opacity: 1; + opacity: 1; } a.tooltip-priority { - display: contents; - position: absolute; - left: 0; + display: contents; + position: absolute; + left: 0; } a.tooltip-priority::after { - content: attr(priority); - margin-right: 10px; + content: attr(priority); + margin-right: 10px; } .page-drop-options { - width: 18em; + width: 18em; } .help table thead tr th { - width: 80%; + width: 80%; } pre { - line-height: 1.45em; - overflow: auto; + line-height: 1.45em; + overflow: auto; } -#intro p { margin: 15px 0; } -#intro h1, #intro h2 { margin: 2.5em 0 0.5em; } -#intro h2 { font-size: 1.4em; } -#intro img { margin: 5em 0; } -#intro h3 { font-size: 1.275em; - margin: 1.5em 0 0.5em;} -#intro h4 { font-size: 1.175em; - margin: 1em 0 0.5em;} +#intro p { + margin: 15px 0; +} + +#intro h1, #intro h2 { + margin: 2.5em 0 0.5em; +} + +#intro h2 { + font-size: 1.4em; +} + +#intro img { + margin: 5em 0; +} + +#intro h3 { + font-size: 1.275em; + margin: 1.5em 0 0.5em; +} + +#intro h4 { + font-size: 1.175em; + margin: 1em 0 0.5em; +} /* .page .content *, #intro .content *, .page .title { */ @@ -1095,16 +1138,16 @@ pre { /* } */ #intro .content { - flex-direction: column; - align-items: center; + flex-direction: column; + align-items: center; } #intro .content :not(img), .foldable-title { - max-width: 665px; + max-width: 665px; } .fixed-width { - max-width: 665px; + max-width: 665px; } /* .editor-wrapper { */ @@ -1112,213 +1155,298 @@ pre { /* } */ .ls-block, .editor-wrapper { - margin: 0 auto; + margin: 0 auto; } .center, .foldable-title { - margin: 0 auto; + margin: 0 auto; } img, video { - margin-left: auto; - margin-right: auto; + margin-left: auto; + margin-right: auto; } #intro .intro-docs, img, video, .intro .ls-block { - max-width: 653px; + max-width: 653px; } .ls-block img { - box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04); } #intro img { - max-width: 100%; + max-width: 100%; } -.w10 { max-width: 10%; } -.w20 { max-width: 20%; } -.w30 { max-width: 30%; } -.w40 { max-width: 40%; } -.w50 { max-width: 50%; } -.w60 { max-width: 60%; } -.w70 { max-width: 70%; } -.w80 { max-width: 80%; } -.w90 { max-width: 90%; } -.w100 { max-width: 100%; } +.w10 { + max-width: 10%; +} -summary{ - outline:none; +.w20 { + max-width: 20%; +} + +.w30 { + max-width: 30%; +} + +.w40 { + max-width: 40%; +} + +.w50 { + max-width: 50%; +} + +.w60 { + max-width: 60%; +} + +.w70 { + max-width: 70%; +} + +.w80 { + max-width: 80%; +} + +.w90 { + max-width: 90%; +} + +.w100 { + max-width: 100%; +} + +summary { + outline: none; } .dropdown-wrapper { - background-color: #FFFFFF; - background-color: var(--ls-primary-background-color); - min-width: 12rem; + background-color: #FFFFFF; + background-color: var(--ls-primary-background-color); + min-width: 12rem; } #right-sidebar .references { - margin-left: 12px; + margin-left: 12px; } img.small { - display: inline; - width: 20px; - height: 20px; - margin-top: 0; - margin-bottom: 0; + display: inline; + width: 20px; + height: 20px; + margin-top: 0; + margin-bottom: 0; } a.tag { - opacity: 0.6; - opacity: var(--ls-tag-text-opacity); - color: #045591; - color: var(--ls-tag-text-color); + opacity: 0.6; + opacity: var(--ls-tag-text-opacity); + color: #045591; + color: var(--ls-tag-text-color); } a.tag:hover { - opacity: 0.8; - opacity: var(--ls-tag-text-hover-opacity); - color: #045591; - color: var(--ls-tag-text-hover-color); + opacity: 0.8; + opacity: var(--ls-tag-text-hover-opacity); + color: #045591; + color: var(--ls-tag-text-hover-color); } #diffs-body textarea { - color: #a4b5b6; - color: var(--ls-primary-text-color); + color: #a4b5b6; + color: var(--ls-primary-text-color); } .notifications { - position: absolute; - z-index: 99; - width: 100%; - top: 3.2em; + position: absolute; + z-index: 99; + width: 100%; + top: 3.2em; } -.ls-block h1 { font-size: 2em; margin: .67em 0 } -.ls-block h2 { font-size: 1.5em; margin: .75em 0 } -.ls-block h3 { font-size: 1.17em; margin: .83em 0} -.ls-block h4 { margin: 1.12em 0 } -.ls-block h5 { font-size: .83em; margin: 1.5em 0 } -.ls-block h6 { font-size: .75em; margin: 1.67em 0 } -.ls-block h1, .ls-block h2, .ls-block h3, .ls-block h4, .ls-block h5, .ls-block h6 { font-weight: 600 } +.ls-block h1 { + font-size: 2em; + margin: .67em 0 +} + +.ls-block h2 { + font-size: 1.5em; + margin: .75em 0 +} + +.ls-block h3 { + font-size: 1.17em; + margin: .83em 0 +} + +.ls-block h4 { + margin: 1.12em 0 +} + +.ls-block h5 { + font-size: .83em; + margin: 1.5em 0 +} + +.ls-block h6 { + font-size: .75em; + margin: 1.67em 0 +} + +.ls-block h1, .ls-block h2, .ls-block h3, .ls-block h4, .ls-block h5, .ls-block h6 { + font-weight: 600 +} .bullet-container .bullet-heading { - background-color: #8fbc8f; - background-color: var(--ls-block-bullet-color); + background-color: #8fbc8f; + background-color: var(--ls-block-bullet-color); } .heading-bg { - border-radius: 50%; - width: 12px; - height: 12px; + border-radius: 50%; + width: 12px; + height: 12px; } .videoWrapper { - position: relative; - padding-bottom: 56.25%; /* 16:9 */ - height: 0; + position: relative; + padding-bottom: 56.25%; /* 16:9 */ + height: 0; } + .videoWrapper iframe { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } /* TODO: add all tailwind supported bg colors */ -.bg-pink-100 { - background-color: #fff5f7; +.bg-pink-100 { + background-color: #fff5f7; } -.bg-pink-200 { - background-color: #fed7e2; + +.bg-pink-200 { + background-color: #fed7e2; } -.bg-pink-300 { - background-color: #fbb6ce; + +.bg-pink-300 { + background-color: #fbb6ce; } -.bg-pink-400 { - background-color: #f687b3; + +.bg-pink-400 { + background-color: #f687b3; } -.bg-pink-500 { - background-color: #ed64a6; + +.bg-pink-500 { + background-color: #ed64a6; } -.bg-pink-600 { - background-color: #d53f8c; + +.bg-pink-600 { + background-color: #d53f8c; } -.bg-pink-700 { - background-color: #b83280; + +.bg-pink-700 { + background-color: #b83280; } -.bg-pink-800 { - background-color: #97266d; + +.bg-pink-800 { + background-color: #97266d; } -.bg-pink-900 { - background-color: #702459; + +.bg-pink-900 { + background-color: #702459; } .block-body blockquote:first-child, .block-body pre:first-child { - margin-top: 8px; - margin-bottom: 8px; + margin-top: 8px; + margin-bottom: 8px; } .CodeMirror { - height: auto; - margin: 6px 0; - font-family: Fira Code, Monaco, Menlo, Consolas, 'COURIER NEW', monospace; + height: auto; + margin: 6px 0; + font-family: Fira Code, Monaco, Menlo, Consolas, 'COURIER NEW', monospace; } .add-button-link:hover .addButton > .circle { - opacity: 1; + opacity: 1; } .addButton > .circle { - opacity: 0; + opacity: 0; } .addButton { - display: block; - margin-left: 12px; - margin-top: 6.5px; - width: 20px; - height: 20px; - opacity: 0.5; + display: block; + margin-left: 12px; + margin-top: 6.5px; + width: 20px; + height: 20px; + opacity: 0.5; } /* FIXME: */ .dark-theme input { - color: var(--ls-secondary-text-color); + color: var(--ls-secondary-text-color); } .dark-theme input.form-input { - background: none; + background: none; } .dark-theme .form-checkbox { - color: #6093a0; - color: var(--ls-page-checkbox-color); - background-color: #6093a0; - background-color: var(--ls-page-checkbox-color); - border-color: #6093a0; - border-color: var(--ls-page-checkbox-border-color); + color: #6093a0; + color: var(--ls-page-checkbox-color); + background-color: #6093a0; + background-color: var(--ls-page-checkbox-color); + border-color: #6093a0; + border-color: var(--ls-page-checkbox-border-color); } .dark-theme #right-sidebar .bg-base-2 { - background-color: #0f4552; + background-color: #0f4552; } .white-theme a.right-sidebar-button { - color: var(--ls-primary-text-color); + color: var(--ls-primary-text-color); } + .white-theme a.right-sidebar-button:hover { - color: var(--ls-link-text-hover-color); + color: var(--ls-link-text-hover-color); } .absolute-modal { - background: var(--ls-primary-background-color); + background: var(--ls-primary-background-color); } /* FIXME: not sure why this is not working for ui/toggle */ .translate-x-5 { - --transform-translate-x: 1.25rem; + --transform-translate-x: 1.25rem; } + +/* region App global modules */ +#mobile-editor-toolbar { + position: fixed; + bottom: 0; + width: 100%; + left: 0; + justify-content: center; + height: 2.5rem; + display: flex; + align-items: center; + z-index: 9999; + + transition: top .3s; +} + +#mobile-editor-toolbar > button { + padding: 5px; +} + +/* endregion */ From 6a00cb208c75decb96365ce0bfa70e4d78163e3e Mon Sep 17 00:00:00 2001 From: charlie Date: Wed, 4 Nov 2020 20:51:53 +0800 Subject: [PATCH 08/11] fix: typo . --- src/main/frontend/page.cljs | 1 + 1 file changed, 1 insertion(+) diff --git a/src/main/frontend/page.cljs b/src/main/frontend/page.cljs index 2b289a087..111f1d55b 100644 --- a/src/main/frontend/page.cljs +++ b/src/main/frontend/page.cljs @@ -1,6 +1,7 @@ (ns frontend.page (:require [rum.core :as rum] [frontend.state :as state] + [frontend.ui :as ui] [frontend.components.sidebar :as sidebar] [frontend.context.i18n :as i18n])) From 683ce49e2e8553c93ff1d6622705d07acbf88ad7 Mon Sep 17 00:00:00 2001 From: charlie Date: Thu, 5 Nov 2020 13:41:54 +0800 Subject: [PATCH 09/11] feat(ui): keep the caret position when insert chars by mobile bar --- src/main/frontend/components/editor.cljs | 20 +++----------- src/main/frontend/page.cljs | 2 +- src/main/frontend/ui.cljs | 35 ++++++++++++------------ 3 files changed, 22 insertions(+), 35 deletions(-) diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs index e98fe360b..dd8486604 100644 --- a/src/main/frontend/components/editor.cljs +++ b/src/main/frontend/components/editor.cljs @@ -223,25 +223,13 @@ {:on-click #(editor-handler/move-up-down parent-state % false)} svg/move-down-block] [:button.bottom-action - {:on-click (fn [e] - (let [old-content (state/sub [:editor/content parent-id]) - new-content (str old-content "\n")] - (state/set-state! :editor/content {parent-id new-content})) - (.stopPropagation e))} + {:on-click #(commands/simple-insert! parent-id "\n" {})} svg/multi-line-input] [:button.font-extrabold.bottom-action.-mt-1 - {:on-click (fn [e] - (let [old-content (state/sub [:editor/content parent-id]) - new-content (str old-content "[[]]")] - (state/set-state! :editor/content {parent-id new-content})) - (.stopPropagation e))} + {:on-click #(commands/simple-insert! parent-id "[[]]" {:backward-pos 2})} "[[]]"] [:button.font-extrabold.bottom-action.-mt-1 - {:on-click (fn [e] - (let [old-content (state/sub [:editor/content parent-id]) - new-content (str old-content "(())")] - (state/set-state! :editor/content {parent-id new-content})) - (.stopPropagation e))} + {:on-click #(commands/simple-insert! parent-id "(())" {:backward-pos 2})} "(())"]]) (rum/defcs input < rum/reactive @@ -633,7 +621,7 @@ (state/clear-edit!)))))) :node (gdom/getElement id) ;; :visibilitychange? true - )) +)) 100) (when-let [element (gdom/getElement id)] diff --git a/src/main/frontend/page.cljs b/src/main/frontend/page.cljs index 111f1d55b..5643be816 100644 --- a/src/main/frontend/page.cljs +++ b/src/main/frontend/page.cljs @@ -14,7 +14,7 @@ (state/set-root-component! (:rum/react-component state)) (ui/inject-document-devices-envs!) (ui/inject-dynamic-style-node!) - (let [teardown-fn (comp (ui/setup-patch-ios-fixed-bottom-position))] + (let [teardown-fn (comp (ui/setup-patch-ios-fixed-bottom-position!))] (assoc state ::teardown teardown-fn))) :will-unmount (fn [state] (let [teardown (::teardown state)] diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index 3058b40b0..3cb64b643 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -212,7 +212,7 @@ (.appendChild js/document.head node)) style))) -(defn setup-patch-ios-fixed-bottom-position +(defn setup-patch-ios-fixed-bottom-position! "fix a common issue about ios webpage viewport when soft keyboard setup" [] @@ -220,23 +220,22 @@ (util/ios?) (not (nil? js/window.visualViewport))) (let [viewport js/visualViewport - style (get-dynamic-style-node)] - (let [sheet (.-sheet style) - type "resize" - handler - (fn [] - (let [f (fn [] - (let [vh (+ (.-offsetTop viewport) (.-height viewport)) - rule (.. sheet -rules (item 0)) - set-top #(set! (.. rule -style -top) (str % "px"))] - (set-top vh)))] - (js/setTimeout f 200))) - timer (js/setInterval handler 1000)] - (.insertRule sheet ".fix-ios-fixed-bottom {bottom:unset !important; transform: translateY(-100%); top: 0px;}") - (.addEventListener viewport type handler false) - (fn [] - (.removeEventListener viewport type handler) - (js/clearInterval timer)))))) + style (get-dynamic-style-node) + sheet (.-sheet style) + type "resize" + handler (fn [] + (let [f (fn [] + (let [vh (+ (.-offsetTop viewport) (.-height viewport)) + rule (.. sheet -rules (item 0)) + set-top #(set! (.. rule -style -top) (str % "px"))] + (set-top vh)))] + (js/setTimeout f 200))) + timer (js/setInterval handler 1000)] + (.insertRule sheet ".fix-ios-fixed-bottom {bottom:unset !important; transform: translateY(-100%); top: 0px;}") + (.addEventListener viewport type handler false) + (fn [] + (.removeEventListener viewport type handler) + (js/clearInterval timer))))) ;; FIXME: compute the right scroll position when scrolling back to the top (defn on-scroll From bf502b4b71591ebf7acb0b9dd56c4df074c6dfe1 Mon Sep 17 00:00:00 2001 From: charlie Date: Mon, 9 Nov 2020 17:31:13 +0800 Subject: [PATCH 10/11] refactor(ui): use visual viewport `scroll` event as observer --- src/main/frontend/ui.cljs | 29 +++++++++++++++++------------ 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/src/main/frontend/ui.cljs b/src/main/frontend/ui.cljs index 3637b40c7..f521fa8cd 100644 --- a/src/main/frontend/ui.cljs +++ b/src/main/frontend/ui.cljs @@ -222,20 +222,25 @@ (let [viewport js/visualViewport style (get-dynamic-style-node) sheet (.-sheet style) - type "resize" - handler (fn [] - (let [f (fn [] - (let [vh (+ (.-offsetTop viewport) (.-height viewport)) - rule (.. sheet -rules (item 0)) - set-top #(set! (.. rule -style -top) (str % "px"))] - (set-top vh)))] - (js/setTimeout f 200))) - timer (js/setInterval handler 1000)] + raf-pending? (atom false) + set-raf-pending! #(reset! raf-pending? %) + handler + (fn [] + (if-not @raf-pending? + (let [f (fn [] + (set-raf-pending! false) + (let [vh (+ (.-offsetTop viewport) (.-height viewport)) + rule (.. sheet -rules (item 0)) + set-top #(set! (.. rule -style -top) (str % "px"))] + (set-top vh)))] + (set-raf-pending! true) + (js/window.requestAnimationFrame f))))] (.insertRule sheet ".fix-ios-fixed-bottom {bottom:unset !important; transform: translateY(-100%); top: 0px;}") - (.addEventListener viewport type handler false) + (.addEventListener viewport "resize" handler) + (.addEventListener viewport "scroll" handler) (fn [] - (.removeEventListener viewport type handler) - (js/clearInterval timer))))) + (.removeEventListener viewport "resize" handler) + (.removeEventListener viewport "scroll" handler))))) ;; FIXME: compute the right scroll position when scrolling back to the top (defn on-scroll From e63b20e5cbd18897cc4210249e38dab4b70cfbb8 Mon Sep 17 00:00:00 2001 From: charlie Date: Mon, 9 Nov 2020 18:59:40 +0800 Subject: [PATCH 11/11] fix: correct args --- src/main/frontend/components/editor.cljs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs index 839f1fc42..4a614c6c5 100644 --- a/src/main/frontend/components/editor.cljs +++ b/src/main/frontend/components/editor.cljs @@ -217,10 +217,10 @@ {:on-click #(editor-handler/adjust-block-level! parent-state :left)} svg/outdent-block] [:button.bottom-action - {:on-click #(editor-handler/move-up-down parent-state % true)} + {:on-click #(editor-handler/move-up-down % true)} svg/move-up-block] [:button.bottom-action - {:on-click #(editor-handler/move-up-down parent-state % false)} + {:on-click #(editor-handler/move-up-down % false)} svg/move-down-block] [:button.bottom-action {:on-click #(commands/simple-insert! parent-id "\n" {})}