From 61e5df4406b2b9c5a9a6eba78c058b4cbbafcfb0 Mon Sep 17 00:00:00 2001
From: DeeDeeG <DeeDeeG@users.noreply.github.com>
Date: Sun, 5 Jan 2020 12:18:29 -0500
Subject: [PATCH] Tweak CSS a bit for narrow screens (e.g. mobile phones)
 (#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                 | 12 ++++++++++++
 app/assets/stylesheets/framework_and_overrides.scss |  6 ++++++
 app/views/layouts/_navigation.html.haml             |  2 +-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/_mobile.scss b/app/assets/stylesheets/_mobile.scss
index a68a19f7..01445406 100644
--- a/app/assets/stylesheets/_mobile.scss
+++ b/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;
diff --git a/app/assets/stylesheets/framework_and_overrides.scss b/app/assets/stylesheets/framework_and_overrides.scss
index 65ea8c4a..251f1b72 100644
--- a/app/assets/stylesheets/framework_and_overrides.scss
+++ b/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;
+}
diff --git a/app/views/layouts/_navigation.html.haml b/app/views/layouts/_navigation.html.haml
index 4dc9345a..af1795d1 100644
--- a/app/views/layouts/_navigation.html.haml
+++ b/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