status-im
/
status-react
mirror of https://github.com/status-im/status-react.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))
(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]}]
(letsubs [content-width (reagent/atom 0)
{window-width :width window-height :height} [:dimensions/window]]
@ -112,13 +115,13 @@
:style (merge style
(if (> window-height window-width)
{:width (* @content-width
(if (< window-height 600)
0.6
(if (< window-height small-screen-height)
small-screen-image-k
1))
:height (/ (* @content-width height
(if (< window-height 600)
0.6
(if (< window-height small-screen-height)
small-screen-image-k
1))
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})
(def image-contain
{:align-self :stretch})
{:align-self :stretch
:align-items :center
:justify-content :center})