Tweak CSS a bit for narrow screens (e.g. mobile phones) (RefugeRestro…

…oms#610)

* CSS: Add some styles for narrow screens

For screen widths ~340px or narrower.

(Such a narrow screen is found, for example, on the original iPhone
through to the iPhone 5S and iPhone SE.)

- Makes the "+" icon on the "Add A Restroom" button
  appear in a more correct-looking position.

- Fixes the overlap of the "Refuge Restrooms" text
  with the "hamburger" drop-down menu button in the header/nav section.

- Adds a class via the haml source (.nav-column)
  to make applying one of the style rules easier.

* CSS: No double-padding on nested `.container`s

Eliminate double-padding in cases of
an [element].container immediately inside another [element].container.

(Doing this only directly under the header div, just to be conservative.)

The 15px + 15px = 30px of padding on both sides
seemed unintentionally wide. Also, I think this looks nicer.
Helps with the tight fit on mobile devices, too.

(Should affect the header/nav on all pages other than the home page,
aka the splash page, due to the way the pages are coded.)

app/assets/stylesheets/_mobile.scss

@@ -8,6 +8,18 @@
 
 // Screen Width-Related Rules
 
+@media only screen and (max-width: 342px), only screen and (max-device-width: 344px) {
+
+    button.splash-add-restroom-btn > i.fa-plus-square-o {
+        margin-left: 2%;
+    }
+
+    .nav-column {
+        padding-left: 0;
+        padding-right: 0;
+    }
+}
+
 @media only screen and (max-width: 640px), only screen and (max-device-width: 640px) {
     main, main .container {
         padding-left: 0;

app/assets/stylesheets/framework_and_overrides.scss

@@ -40,3 +40,9 @@ header {
   margin-left: auto;
   margin-right: auto;
 }
+
+// Eliminates double-padding due to nested .container divs
+.header > .container > .container {
+  padding-left: 0;
+  padding-right: 0;
+}

app/views/layouts/_navigation.html.haml

@@ -1,6 +1,6 @@
 .container
   .row.min-headroom
-    .col-xs-12
+    .col-xs-12.nav-column
       %nav.nav.navbar-default{:role => "navigation"}
         / Brand and toggle get grouped for better mobile display
         .navbar-header