fix(ios): button overlap (#18620)
This commit is contained in:
parent
8f3385fc9f
commit
eda9464b6c
|
@ -4,6 +4,7 @@
|
||||||
[quo.core :as quo]
|
[quo.core :as quo]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
[react-native.reanimated :as reanimated]
|
[react-native.reanimated :as reanimated]
|
||||||
|
[react-native.safe-area :as safe-area]
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im.common.scroll-page.style :as style]
|
[status-im.common.scroll-page.style :as style]
|
||||||
[utils.re-frame :as rf]))
|
[utils.re-frame :as rf]))
|
||||||
|
@ -59,7 +60,7 @@
|
||||||
[rn/view {:style {:margin-top 0}}
|
[rn/view {:style {:margin-top 0}}
|
||||||
top-nav]
|
top-nav]
|
||||||
[quo/page-nav
|
[quo/page-nav
|
||||||
(cond-> {:margin-top 44
|
(cond-> {:margin-top (safe-area/get-top)
|
||||||
:type :no-title
|
:type :no-title
|
||||||
:background (if (= 1 (reanimated/get-shared-value opacity-animation))
|
:background (if (= 1 (reanimated/get-shared-value opacity-animation))
|
||||||
:blur
|
:blur
|
||||||
|
|
|
@ -1,13 +1,16 @@
|
||||||
(ns status-im.contexts.communities.discover.style
|
(ns status-im.contexts.communities.discover.style
|
||||||
(:require
|
(:require
|
||||||
[react-native.platform :as platform]
|
|
||||||
[status-im.contexts.shell.jump-to.constants :as jump-to.constants]))
|
[status-im.contexts.shell.jump-to.constants :as jump-to.constants]))
|
||||||
|
|
||||||
(def screen-title-container
|
(def header-height 56)
|
||||||
{:height 56
|
|
||||||
|
(defn screen-title-container
|
||||||
|
[safe-area-top]
|
||||||
|
{:height header-height
|
||||||
:padding-vertical 12
|
:padding-vertical 12
|
||||||
:justify-content :center
|
:justify-content :center
|
||||||
:margin-horizontal 20})
|
:margin-horizontal 20
|
||||||
|
:margin-top (+ header-height safe-area-top)})
|
||||||
|
|
||||||
(def featured-communities-header
|
(def featured-communities-header
|
||||||
{:flex-direction :row
|
{:flex-direction :row
|
||||||
|
@ -40,7 +43,7 @@
|
||||||
[fixed?]
|
[fixed?]
|
||||||
(merge
|
(merge
|
||||||
{:padding-vertical 12
|
{:padding-vertical 12
|
||||||
:height 56
|
:height header-height
|
||||||
:background-color :transparent}
|
:background-color :transparent}
|
||||||
(when-not fixed?
|
(when-not fixed?
|
||||||
{:margin-top 12
|
{:margin-top 12
|
||||||
|
@ -60,15 +63,12 @@
|
||||||
{:align-items :center
|
{:align-items :center
|
||||||
:justify-content :center})
|
:justify-content :center})
|
||||||
|
|
||||||
(def render-communities-container
|
|
||||||
{:margin-top (if platform/ios? 57 104)})
|
|
||||||
|
|
||||||
(defn blur-tabs-header
|
(defn blur-tabs-header
|
||||||
[]
|
[safe-area-top]
|
||||||
{:padding-horizontal 20
|
{:padding-horizontal 20
|
||||||
:position :absolute
|
:position :absolute
|
||||||
:top (if platform/ios? 100 104)
|
:top (+ header-height safe-area-top)
|
||||||
:height 56
|
:height header-height
|
||||||
:right 0
|
:right 0
|
||||||
:left 0
|
:left 0
|
||||||
:justify-content :center
|
:justify-content :center
|
||||||
|
|
|
@ -5,6 +5,7 @@
|
||||||
[quo.foundations.colors :as colors]
|
[quo.foundations.colors :as colors]
|
||||||
[quo.theme :as quo.theme]
|
[quo.theme :as quo.theme]
|
||||||
[react-native.core :as rn]
|
[react-native.core :as rn]
|
||||||
|
[react-native.safe-area :as safe-area]
|
||||||
[reagent.core :as reagent]
|
[reagent.core :as reagent]
|
||||||
[status-im.common.scroll-page.view :as scroll-page]
|
[status-im.common.scroll-page.view :as scroll-page]
|
||||||
[status-im.contexts.communities.actions.community-options.view :as options]
|
[status-im.contexts.communities.actions.community-options.view :as options]
|
||||||
|
@ -33,7 +34,7 @@
|
||||||
(defn screen-title
|
(defn screen-title
|
||||||
[]
|
[]
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style style/screen-title-container}
|
{:style (style/screen-title-container (safe-area/get-top))}
|
||||||
[quo/text
|
[quo/text
|
||||||
{:accessibility-label :communities-screen-title
|
{:accessibility-label :communities-screen-title
|
||||||
:weight :semi-bold
|
:weight :semi-bold
|
||||||
|
@ -183,7 +184,6 @@
|
||||||
view-type]
|
view-type]
|
||||||
(fn []
|
(fn []
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style style/render-communities-container}
|
|
||||||
[discover-communities-header
|
[discover-communities-header
|
||||||
{:selected-tab selected-tab
|
{:selected-tab selected-tab
|
||||||
:view-type view-type
|
:view-type view-type
|
||||||
|
@ -196,7 +196,7 @@
|
||||||
(fn []
|
(fn []
|
||||||
(when (> @scroll-height 360)
|
(when (> @scroll-height 360)
|
||||||
[rn/view
|
[rn/view
|
||||||
{:style (style/blur-tabs-header)}
|
{:style (style/blur-tabs-header (safe-area/get-top))}
|
||||||
[discover-communities-segments selected-tab true]])))
|
[discover-communities-segments selected-tab true]])))
|
||||||
|
|
||||||
(defn discover-screen-content
|
(defn discover-screen-content
|
||||||
|
@ -209,6 +209,7 @@
|
||||||
[scroll-page/scroll-page
|
[scroll-page/scroll-page
|
||||||
{:theme theme
|
{:theme theme
|
||||||
:on-scroll #(reset! scroll-height %)
|
:on-scroll #(reset! scroll-height %)
|
||||||
|
:page-nav-props {:background :blur}
|
||||||
:navigate-back? :true
|
:navigate-back? :true
|
||||||
:height (if (> @scroll-height 360)
|
:height (if (> @scroll-height 360)
|
||||||
208
|
208
|
||||||
|
|
Loading…
Reference in New Issue