From 45464f6183ddc25feee2c9ce26864d1af3b7d134 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:02:30 -0600
Subject: [PATCH] clean up view switcher and mobile styling

---
 index.css                                | 167 +-------------------
 lib/components/app/app.css               | 186 +++++++++++++++++++++--
 lib/components/mobile/mobile.css         |   3 -
 lib/components/user/nav-login-button.css |   3 +
 4 files changed, 179 insertions(+), 180 deletions(-)

diff --git a/index.css b/index.css
index 94a39b976..fe75647f8 100644
--- a/index.css
+++ b/index.css
@@ -1,5 +1,6 @@
 @import url(node_modules/bootstrap/dist/css/bootstrap.min.css);
-
+@import url(react-sliding-pane/dist/react-sliding-pane.css);
+@import url(lib/bike-rental.css);
 @import url(node_modules/maplibre-gl/dist/maplibre-gl.css);
 
 @import url(lib/components/admin/call-taker.css);
@@ -12,177 +13,13 @@
 @import url(lib/components/user/nav-login-button.css);
 @import url(lib/components/viewers/viewers.css);
 
-@import url(lib/bike-rental.css);
 
-@import url(react-sliding-pane/dist/react-sliding-pane.css);
 
 /* Hide IE/Edge clear button in text input fields. */
 input[type="text"]::-ms-clear {
   display: none;
 }
 
-/* New app menu */
-.app-menu-icon {
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  height: 15px;
-  justify-content: space-between;
-  padding: 0;
-  top: 16px;
-  transition: all 1s ease;
-  width: 21px;
-  z-index: 10;
-}
-
-@media only screen and (max-width: 768px) {
-  #locale-selector-wrapper {
-    display: none;
-  }
-  .app-menu-icon {
-    left: 15px;
-  }
-}
-
-.app-menu-icon .menu-line {
-  border-bottom: 3px solid #ffffff;
-  display: block;
-  position: relative;
-  transition: all 0.5s ease;
-  width: 100%;
-}
-
-.app-menu-icon[aria-expanded="true"] .menu-line.top {
-  transform: rotate(45deg);
-  top: 7px;
-}
-.app-menu-icon[aria-expanded="true"] .menu-line.bottom {
-  transform: rotate(-45deg);
-  bottom: 5px;
-}
-.app-menu-icon[aria-expanded="true"] .menu-line.middle {
-  display: none;
-}
-
-.slide-pane {
-  transition: all 0.2s ease-in-out;
-}
-
-.slide-pane_from_left {
-  margin: 52px auto 0 0;
-  /* Keep pane from overflowing on smaller screens */
-  height: calc(100% - 52px);
-}
-
-.slide-pane__content {
-  padding: 6px 0;
-}
-
-.slide-pane__overlay {
-  z-index: 1000;
-}
-
-.app-menu {
-  margin: 0;
-  padding: 0.5rem 0;
-}
-
-.app-menu img,
-.app-menu svg {
-  max-height: 1em;
-  margin: 0 2rem;
-  vertical-align: middle;
-  width: 1em;
-}
-
-.app-menu a,
-.app-menu button {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  display: flex;
-  font-size: 20px;
-  padding: 0.5rem 0;
-  text-decoration: none;
-  width: 100%;
-}
-
-/* Prevents hover styles from getting triggered on mobile */
-@media (hover: hover) {
-  .app-menu a:hover,
-  .app-menu button:hover {
-    color: #4c97f5;
-  }
-}
-
-.app-menu a:focus,
-.app-menu button:focus {
-  background-color: #ddd;
-  outline: 2px solid #4c97f5;
-  outline-offset: -2px;
-}
-
-.app-menu button[aria-selected="true"],
-.sort-option button[aria-selected="true"],
-#locale-selector button[aria-selected="true"] {
-  font-weight: bold;
-}
-
-.skip-nav-button {
-  color: initial;
-  position: fixed;
-  top: -30px;
-}
-.skip-nav-button:focus {
-  padding: 7px 24px;
-  top: 7px;
-  z-index: 100;
-}
-
-.view-switcher {
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .view-switcher {
-    display: flex;
-  }
-}
-
-.expand-menu-chevron {
-  flex-grow: 1;
-  text-align: end;
-}
-
-.dropdown-header {
-  font-size: inherit;
-  line-height: normal;
-  color: inherit;
-  white-space: nowrap;
-}
-
-.sub-menu-container {
-  border-top: 1px solid #cccccc;
-  margin-top: 0.5rem;
-  padding-left: 2rem;
-}
-
-.app-menu .app-menu-divider {
-  border-bottom: 1px solid #ccc;
-  padding: 1rem 0;
-}
-
-/* Header image or title */
-/* If an icon is used, visually-hide the title (but keep it visible to screen readers). */
-.with-icon div.navbar-title {
-  height: 0;
-  overflow: hidden;
-  width: 0;
-}
-
 /* Buttons */
 
 button.header,
diff --git a/lib/components/app/app.css b/lib/components/app/app.css
index efadb689d..4c457c138 100644
--- a/lib/components/app/app.css
+++ b/lib/components/app/app.css
@@ -67,8 +67,14 @@
   width: 100%;
 }
 
+.view-switcher {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
 @media (min-width: 992px) {
-  #view-switcher {
+  .view-switcher {
     height: 100%;
     left: 0;
     position: absolute;
@@ -79,8 +85,9 @@
 
 @media (max-width: 768px) {
   .navbar .navbar-header {
-    grid-template-columns: 50px auto 50px;
+    grid-template-columns: 50px auto 70px;
     width: auto !important;
+
   }
 
   .navbar .navbar-brand {
@@ -89,9 +96,9 @@
     padding: 10px;
   }
 
-  #view-switcher {
-    position: relative;
-  }
+  .view-switcher {
+    display: none;
+}
 
 }
 
@@ -99,6 +106,7 @@
 .mobile-navbar-container .navbar-header {
   display: block;
   grid-column: 1;
+  grid-row: 1;
   justify-self: center;
   width: 25px;
 }
@@ -106,13 +114,172 @@
 .mobile-navbar-container .mobile-header {
   height: 100%;
   justify-self: center;
+  grid-row: 1;
+}
+
+.mobile-navbar-container .locale-selector-and-login {
+  grid-row: 1;
+  height: 50px;
+  justify-self: flex-end;
 }
 
 .mobile-navbar-container .container-fluid {
   display: grid;
-  grid-template-columns: 50px auto 50px;
+  grid-template-columns: 50px auto 70px;
+  grid-template-rows: 50px;
   align-items: center;
-  height: 100%;
+  padding: 0;
+}
+
+/* New app menu */
+.app-menu-icon {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 15px;
+  justify-content: space-between;
+  padding: 0;
+  transition: all 1s ease;
+  width: 21px;
+  z-index: 10;
+}
+
+@media only screen and (max-width: 768px) {
+  #locale-selector-wrapper {
+    display: none;
+  }
+  .app-menu-icon {
+    left: 15px;
+  }
+}
+
+.app-menu-icon .menu-line {
+  border-bottom: 3px solid #ffffff;
+  display: block;
+  position: relative;
+  transition: all 0.5s ease;
+  width: 100%;
+}
+
+.app-menu-icon[aria-expanded="true"] .menu-line.top {
+  transform: rotate(45deg);
+  top: 7px;
+}
+.app-menu-icon[aria-expanded="true"] .menu-line.bottom {
+  transform: rotate(-45deg);
+  bottom: 5px;
+}
+.app-menu-icon[aria-expanded="true"] .menu-line.middle {
+  display: none;
+}
+
+.slide-pane {
+  transition: all 0.2s ease-in-out;
+}
+
+.slide-pane_from_left {
+  margin: 52px auto 0 0;
+  /* Keep pane from overflowing on smaller screens */
+  height: calc(100% - 52px);
+}
+
+.slide-pane__content {
+  padding: 6px 0;
+}
+
+.slide-pane__overlay {
+  z-index: 1000;
+}
+
+.app-menu {
+  margin: 0;
+  padding: 0.5rem 0;
+}
+
+.app-menu img,
+.app-menu svg {
+  max-height: 1em;
+  margin: 0 2rem;
+  vertical-align: middle;
+  width: 1em;
+}
+
+.app-menu a,
+.app-menu button {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font-size: 20px;
+  padding: 0.5rem 0;
+  text-decoration: none;
+  width: 100%;
+}
+
+/* Prevents hover styles from getting triggered on mobile */
+@media (hover: hover) {
+  .app-menu a:hover,
+  .app-menu button:hover {
+    color: #4c97f5;
+  }
+}
+
+.app-menu a:focus,
+.app-menu button:focus {
+  background-color: #ddd;
+  outline: 2px solid #4c97f5;
+  outline-offset: -2px;
+}
+
+.app-menu button[aria-selected="true"],
+.sort-option button[aria-selected="true"],
+#locale-selector button[aria-selected="true"] {
+  font-weight: bold;
+}
+
+.skip-nav-button {
+  color: initial;
+  position: fixed;
+  top: -30px;
+}
+.skip-nav-button:focus {
+  padding: 7px 24px;
+  top: 7px;
+  z-index: 100;
+}
+
+.expand-menu-chevron {
+  flex-grow: 1;
+  text-align: end;
+}
+
+.dropdown-header {
+  font-size: inherit;
+  line-height: normal;
+  color: inherit;
+  white-space: nowrap;
+}
+
+.sub-menu-container {
+  border-top: 1px solid #cccccc;
+  margin-top: 0.5rem;
+  padding-left: 2rem;
+}
+
+.app-menu .app-menu-divider {
+  border-bottom: 1px solid #ccc;
+  padding: 1rem 0;
+}
+
+/* Header image or title */
+/* If an icon is used, visually-hide the title (but keep it visible to screen readers). */
+.with-icon div.navbar-title {
+  height: 0;
+  overflow: hidden;
+  width: 0;
 }
 
 /* PrintLayout styles */
@@ -137,11 +304,6 @@
 }
 
 /* View Switcher Styling */
-.view-switcher {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
 .view-switcher a {
   color: rgba(255, 255, 255, 0.85);
   border-radius: 15px;
diff --git a/lib/components/mobile/mobile.css b/lib/components/mobile/mobile.css
index 9685a7a52..5e07d9fd7 100644
--- a/lib/components/mobile/mobile.css
+++ b/lib/components/mobile/mobile.css
@@ -35,7 +35,6 @@
 
 @media (max-width: 768px) {
   .otp .navbar .mobile-header-text {
-    margin-top: 2px;
     word-break: break-all;
   }
 }
@@ -53,8 +52,6 @@
   border: none;
   color: white;
   font-size: 18px;
-  left: 7px;
-  position: fixed;
 }
 
 .otp .navbar .mobile-close {
diff --git a/lib/components/user/nav-login-button.css b/lib/components/user/nav-login-button.css
index bf20205d4..fcc63d9f0 100644
--- a/lib/components/user/nav-login-button.css
+++ b/lib/components/user/nav-login-button.css
@@ -45,5 +45,8 @@
   }
   #user-selector-label {
     background-color: transparent;
+    border: 0;
+    height: 50px;
+    color: white;
   }
 }