Strange UI on iOS App

[sashaperigo]

I just downloaded the Refuge Restrooms iOS App and went to check out the submit page. I think it might look nicer if there was a little bit of a margin before the different fields on the left!

[tkwidmer]

This is the web view of the submit page, so totally doable in this repo.

[tkwidmer]

Can you speak a little bit more about what you invision?

[DeeDeeG]

I'm not @sashaperigo, obviously, but I'm inferring two meanings here.

1) There should be blank space on the left/right of the text input boxes. That would give them room to breathe from the edges of the screen. (much more noticeable when viewed fullscreen.)

2) There should be more of a blank space, vertically, between the "Guess current location" button, and the text input boxes and their labels.

Probably number 1, but addressing 2 would be nice anyway.

[DeeDeeG]

Looking into this a bit.

For my interpretation number 1:

There are margins of empty space on the left/right, but only for screens greater than 640 pixels wide. Looks good to me that way, with the margins of empty space, even on a narrow screen. Maybe the rule that says these margins go away at smaller screen sizes should be removed?

diving into the CSS a bit: There is a div.container element, a direct child of the html body element. It gets a "padding" of 15 pixels on the left/right on screen sizes above 640 pixels. Otherwise it gets 0 pixels of padding. On the iPhone, I assume the screen is 640 "device pixels" wide, or less.

Happens here, I believe: https://github.com/RefugeRestrooms/refugerestrooms/blob/develop/app/assets/stylesheets/_mobile.css.scss (first 2 rules at the top)

For my interpretation 2:

The Guess Location button looks better to me with a .5em margin below it.

Sticking a rule (not sure where) that applies to the guess button and gives it a margin-bottom of 0.5em should do the trick.

button.guess-btn {
margin-bottom: .5em;
}

With those changes, it looks something like this: site-with-changes.png

Happy to do a pull request if desired.

[tkwidmer]

@DeeDeeG I think thats what is being referred to. Happy to have this as a PR. And thanks for getting involved!