status-im/status-mobile
2
0
Fork 0
mirror of https://github.com/status-im/status-mobile.git synced 2025-03-04 02:00:43 +00:00
Code Issues Projects Releases Wiki Activity

[#19178] fix: jump card responsive (#19600)

Browse Source
This commit is contained in:
Mohsen 2024-04-11 17:36:28 +03:00 committed by GitHub
parent 292fd78ff8
commit 5badb5bdb5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 43 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/status_im/contexts/shell/jump_to/components/jump_to_screen/view.cljs
View File

@ -60,7 +60,7 @@
(def empty-cards (repeat 6 {:type shell.constants/empty-card})) (def empty-cards (repeat 6 {:type shell.constants/empty-card}))
(defn jump-to-list (defn jump-to-list
[switcher-cards shell-margin] [switcher-cards]
(let [data (if (seq switcher-cards) switcher-cards empty-cards)] (let [data (if (seq switcher-cards) switcher-cards empty-cards)]
[:<> [:<>
[rn/flat-list [rn/flat-list
@ -70,7 +70,7 @@
:header (jump-to-text) :header (jump-to-text)
:ref #(reset! state/jump-to-list-ref %) :ref #(reset! state/jump-to-list-ref %)
:num-columns 2 :num-columns 2
:column-wrapper-style {:margin-horizontal shell-margin :column-wrapper-style {:margin-horizontal 20
:justify-content :space-between :justify-content :space-between
:margin-bottom 16} :margin-bottom 16}
:style style/jump-to-list :style style/jump-to-list
@ -89,9 +89,7 @@
(defn view (defn view
[] []
(let [switcher-cards (rf/sub [:shell/sorted-switcher-cards]) (let [switcher-cards (rf/sub [:shell/sorted-switcher-cards])
width (rf/sub [:dimensions/window-width]) top (safe-area/get-top)]
top (safe-area/get-top)
shell-margin (/ (- width (* 2 shell.constants/switcher-card-size)) 3)]
[theme/provider {:theme :dark} [theme/provider {:theme :dark}
[rn/view [rn/view
{:style {:top 0 {:style {:top 0
@ -100,7 +98,7 @@
:bottom -1 :bottom -1
:position :absolute :position :absolute
:background-color colors/neutral-100}} :background-color colors/neutral-100}}
[jump-to-list switcher-cards shell-margin] [jump-to-list switcher-cards]
[top-nav-blur-overlay top] [top-nav-blur-overlay top]
[common.top-nav/view [common.top-nav/view
{:jump-to? true {:jump-to? true

17
src/status_im/contexts/shell/jump_to/components/switcher_cards/style.cljs
View File

@ -12,22 +12,23 @@
:community-channel colors/white}) :community-channel colors/white})
(defn base-container (defn base-container
[background-color] [background-color card-size]
{:width 160 {:width card-size
:height 160 :height card-size
:border-radius 16 :border-radius 16
:overflow :hidden :overflow :hidden
:background-color (colors/alpha background-color 0.4)}) :background-color (colors/alpha background-color 0.4)})
(defn empty-card (defn empty-card
[] [card-size]
(merge (merge
(base-container nil) (base-container nil card-size)
{:background-color colors/neutral-95})) {:background-color colors/neutral-95}))
(def secondary-container (defn secondary-container
{:width 160 [card-size]
:height 120 {:width card-size
:height (- card-size 40)
:border-radius 16 :border-radius 16
:bottom 0 :bottom 0
:position :absolute :position :absolute

57
src/status_im/contexts/shell/jump_to/components/switcher_cards/view.cljs
View File

@ -220,7 +220,7 @@
[] []
(let [card-ref (atom nil)] (let [card-ref (atom nil)]
(fn [{:keys [avatar-params title type customization-color (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)] (let [color-50 (colors/custom-color customization-color 50)]
[rn/touchable-opacity [rn/touchable-opacity
{:on-press #(calculate-card-position-and-open-screen {:on-press #(calculate-card-position-and-open-screen
@ -230,13 +230,13 @@
channel-id) channel-id)
:ref #(reset! card-ref %) :ref #(reset! card-ref %)
:active-opacity 1} :active-opacity 1}
[rn/view {:style (style/base-container color-50)} [rn/view {:style (style/base-container color-50 card-size)}
(when banner (when banner
[rn/image [rn/image
{:source banner {:source banner
:style {:width 160 :style {:width 160
:height 65}}]) :height 65}}])
[rn/view {:style style/secondary-container} [rn/view {:style (style/secondary-container card-size)}
[quo/text [quo/text
{:size :paragraph-1 {:size :paragraph-1
:weight :semi-bold :weight :semi-bold
@ -284,8 +284,8 @@
[:<>]) [:<>])
(defn empty-card (defn empty-card
[] [card-size]
[rn/view {:style (style/empty-card)}]) [rn/view {:style (style/empty-card card-size)}])
;; Home Card ;; Home Card
(defn communities-discover (defn communities-discover
@ -294,32 +294,35 @@
(defn card (defn card
[{:keys [type] :as data}] [{:keys [type] :as data}]
(cond (let [screen-width (:width (rn/get-window))
(= type shell.constants/empty-card) ; Placeholder ;; 2 column, 20px horizontal margin, 15px gap
[empty-card] card-size (/ (- screen-width 55) 2)]
(cond
(= type shell.constants/empty-card) ; Placeholder
[empty-card card-size]
;; Screens Card ;; Screens Card
(#{shell.constants/one-to-one-chat-card (#{shell.constants/one-to-one-chat-card
shell.constants/private-group-chat-card shell.constants/private-group-chat-card
shell.constants/community-card shell.constants/community-card
shell.constants/community-channel-card} shell.constants/community-channel-card}
type) type)
[screens-card data] [screens-card data card-size]
(= type shell.constants/browser-card) ; Browser Card (= type shell.constants/browser-card) ; Browser Card
[browser-card data] [browser-card data]
(= type shell.constants/wallet-card) ; Wallet Card (= type shell.constants/wallet-card) ; Wallet Card
[wallet-card data] [wallet-card data]
(= type shell.constants/wallet-collectible) ; Wallet Card (= type shell.constants/wallet-collectible) ; Wallet Card
[wallet-collectible data] [wallet-collectible data]
(= type shell.constants/wallet-graph) ; Wallet Card (= type shell.constants/wallet-graph) ; Wallet Card
[wallet-graph data] [wallet-graph data]
(= type shell.constants/communities-discover) ; Home Card (= type shell.constants/communities-discover) ; Home Card
[communities-discover data] [communities-discover data]
:else :else
nil)) nil)))