status-im
/
status-mobile
mirror of https://github.com/status-im/status-mobile.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#7764] Image on Welcome to Status screen is not center aligned on small device screens 

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>
This commit is contained in:
Andrey Shovkoplyas 2019-03-20 11:44:23 +01:00
parent cf21763a97
commit d698ffe09e
No known key found for this signature in database
GPG Key ID: EAAB7C8622D860A4
2 changed files with 11 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/status_im/ui/components/common/common.cljs
View File

@ -102,6 +102,9 @@
(assoc :accessibility-label accessibility-label)) (assoc :accessibility-label accessibility-label))
(if more-than-9 (i18n/label :t/counter-9-plus) value)]]))) (if more-than-9 (i18n/label :t/counter-9-plus) value)]])))
(def small-screen-image-k 0.8)
(def small-screen-height 600)
(defview image-contain [{:keys [container-style style]} {:keys [image width height]}] (defview image-contain [{:keys [container-style style]} {:keys [image width height]}]
(letsubs [content-width (reagent/atom 0) (letsubs [content-width (reagent/atom 0)
{window-width :width window-height :height} [:dimensions/window]] {window-width :width window-height :height} [:dimensions/window]]
@ -112,13 +115,13 @@
:style (merge style :style (merge style
(if (> window-height window-width) (if (> window-height window-width)
{:width (* @content-width {:width (* @content-width
(if (< window-height 600) (if (< window-height small-screen-height)
0.6 small-screen-image-k
1)) 1))
:height (/ (* @content-width height :height (/ (* @content-width height
(if (< window-height 600) (if (< window-height small-screen-height)
0.6 small-screen-image-k
1)) 1))
width)} width)}
{:width @content-width {:width @content-width
:height (* window-height 0.6)}))}]])) :height (* window-height small-screen-image-k)}))}]]))

4
src/status_im/ui/components/common/styles.cljs
View File

@ -140,4 +140,6 @@
:text-align :center}) :text-align :center})
(def image-contain (def image-contain
{:align-self :stretch}) {:align-self :stretch
:align-items :center
:justify-content :center})