From 5badb5bdb5d2f54fb574c2f49039cb8341279d60 Mon Sep 17 00:00:00 2001 From: Mohsen Date: Thu, 11 Apr 2024 17:36:28 +0300 Subject: [PATCH] [#19178] fix: jump card responsive (#19600) --- .../components/jump_to_screen/view.cljs | 10 ++-- .../components/switcher_cards/style.cljs | 17 +++--- .../components/switcher_cards/view.cljs | 57 ++++++++++--------- 3 files changed, 43 insertions(+), 41 deletions(-) diff --git a/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs b/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs index 97f7bff559..1054922f55 100644 --- a/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs +++ b/src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs @@ -60,7 +60,7 @@ (def empty-cards (repeat 6 {:type shell.constants/empty-card})) (defn jump-to-list - [switcher-cards shell-margin] + [switcher-cards] (let [data (if (seq switcher-cards) switcher-cards empty-cards)] [:<> [rn/flat-list @@ -70,7 +70,7 @@ :header (jump-to-text) :ref #(reset! state/jump-to-list-ref %) :num-columns 2 - :column-wrapper-style {:margin-horizontal shell-margin + :column-wrapper-style {:margin-horizontal 20 :justify-content :space-between :margin-bottom 16} :style style/jump-to-list @@ -89,9 +89,7 @@ (defn view [] (let [switcher-cards (rf/sub [:shell/sorted-switcher-cards]) - width (rf/sub [:dimensions/window-width]) - top (safe-area/get-top) - shell-margin (/ (- width (* 2 shell.constants/switcher-card-size)) 3)] + top (safe-area/get-top)] [theme/provider {:theme :dark} [rn/view {:style {:top 0 @@ -100,7 +98,7 @@ :bottom -1 :position :absolute :background-color colors/neutral-100}} - [jump-to-list switcher-cards shell-margin] + [jump-to-list switcher-cards] [top-nav-blur-overlay top] [common.top-nav/view {:jump-to? true diff --git a/src/status_im/contexts/shell/jump_to/components/switcher_cards/style.cljs b/src/status_im/contexts/shell/jump_to/components/switcher_cards/style.cljs index f432077c03..7a5028c25f 100644 --- a/src/status_im/contexts/shell/jump_to/components/switcher_cards/style.cljs +++ b/src/status_im/contexts/shell/jump_to/components/switcher_cards/style.cljs @@ -12,22 +12,23 @@ :community-channel colors/white}) (defn base-container - [background-color] - {:width 160 - :height 160 + [background-color card-size] + {:width card-size + :height card-size :border-radius 16 :overflow :hidden :background-color (colors/alpha background-color 0.4)}) (defn empty-card - [] + [card-size] (merge - (base-container nil) + (base-container nil card-size) {:background-color colors/neutral-95})) -(def secondary-container - {:width 160 - :height 120 +(defn secondary-container + [card-size] + {:width card-size + :height (- card-size 40) :border-radius 16 :bottom 0 :position :absolute diff --git a/src/status_im/contexts/shell/jump_to/components/switcher_cards/view.cljs b/src/status_im/contexts/shell/jump_to/components/switcher_cards/view.cljs index 654d58a715..e9a916ccfe 100644 --- a/src/status_im/contexts/shell/jump_to/components/switcher_cards/view.cljs +++ b/src/status_im/contexts/shell/jump_to/components/switcher_cards/view.cljs @@ -220,7 +220,7 @@ [] (let [card-ref (atom nil)] (fn [{:keys [avatar-params title type customization-color - content banner id channel-id profile-customization-color]}] + content banner id channel-id profile-customization-color]} card-size] (let [color-50 (colors/custom-color customization-color 50)] [rn/touchable-opacity {:on-press #(calculate-card-position-and-open-screen @@ -230,13 +230,13 @@ channel-id) :ref #(reset! card-ref %) :active-opacity 1} - [rn/view {:style (style/base-container color-50)} + [rn/view {:style (style/base-container color-50 card-size)} (when banner [rn/image {:source banner :style {:width 160 :height 65}}]) - [rn/view {:style style/secondary-container} + [rn/view {:style (style/secondary-container card-size)} [quo/text {:size :paragraph-1 :weight :semi-bold @@ -284,8 +284,8 @@ [:<>]) (defn empty-card - [] - [rn/view {:style (style/empty-card)}]) + [card-size] + [rn/view {:style (style/empty-card card-size)}]) ;; Home Card (defn communities-discover @@ -294,32 +294,35 @@ (defn card [{:keys [type] :as data}] - (cond - (= type shell.constants/empty-card) ; Placeholder - [empty-card] + (let [screen-width (:width (rn/get-window)) + ;; 2 column, 20px horizontal margin, 15px gap + card-size (/ (- screen-width 55) 2)] + (cond + (= type shell.constants/empty-card) ; Placeholder + [empty-card card-size] - ;; Screens Card - (#{shell.constants/one-to-one-chat-card - shell.constants/private-group-chat-card - shell.constants/community-card - shell.constants/community-channel-card} - type) - [screens-card data] + ;; Screens Card + (#{shell.constants/one-to-one-chat-card + shell.constants/private-group-chat-card + shell.constants/community-card + shell.constants/community-channel-card} + type) + [screens-card data card-size] - (= type shell.constants/browser-card) ; Browser Card - [browser-card data] + (= type shell.constants/browser-card) ; Browser Card + [browser-card data] - (= type shell.constants/wallet-card) ; Wallet Card - [wallet-card data] + (= type shell.constants/wallet-card) ; Wallet Card + [wallet-card data] - (= type shell.constants/wallet-collectible) ; Wallet Card - [wallet-collectible data] + (= type shell.constants/wallet-collectible) ; Wallet Card + [wallet-collectible data] - (= type shell.constants/wallet-graph) ; Wallet Card - [wallet-graph data] + (= type shell.constants/wallet-graph) ; Wallet Card + [wallet-graph data] - (= type shell.constants/communities-discover) ; Home Card - [communities-discover data] + (= type shell.constants/communities-discover) ; Home Card + [communities-discover data] - :else - nil)) + :else + nil)))