Fix navbar spacing and positioning

opentripplanner · Nov 6, 2024 · 1d1cd5e · 1d1cd5e
1 parent 04d63c3
commit 1d1cd5e
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 51 deletions.
diff --git a/index.css b/index.css
@@ -31,7 +31,6 @@ input[type="text"]::-ms-clear {
   height: 15px;
   justify-content: space-between;
   padding: 0;
-  position: absolute;
   top: 16px;
   transition: all 1s ease;
   width: 21px;

diff --git a/lib/components/app/app.css b/lib/components/app/app.css
@@ -47,6 +47,74 @@
   }
 }
 
+/* Navbar settings */
+
+.navbar .navbar-header {
+  display: grid;
+  grid-template-columns: 300px auto 150px;
+}
+
+.navbar .navbar-nav {
+  margin: 0;
+  grid-column: 3;
+}
+
+.navbar .navbar-brand {
+  display: flex;
+  gap: 35px;
+  align-items: center;
+  grid-column: 1 / span 1;
+  width: 100%;
+}
+
+@media (min-width: 992px) {
+  #view-switcher {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    width: 100%
+  }
+}
+
+
+@media (max-width: 768px) {
+  .navbar .navbar-header {
+    grid-template-columns: 50px auto 50px;
+    width: auto !important;
+  }
+
+  .navbar .navbar-brand {
+    grid-column: 1 / span 2;
+    gap: 15px;
+    padding: 10px;
+  }
+
+  #view-switcher {
+    position: relative;
+  }
+
+}
+
+/* Mobile navbar */
+.mobile-navbar-container .navbar-header {
+  display: block;
+  grid-column: 1;
+  justify-self: center;
+  width: 25px;
+}
+
+.mobile-navbar-container .mobile-header {
+  height: 100%;
+  justify-self: center;
+}
+
+.mobile-navbar-container .container-fluid {
+  display: grid;
+  grid-template-columns: 50px auto 50px;
+  align-items: center;
+  height: 100%;
+}
+
 /* PrintLayout styles */
 
 .otp.print-layout {

diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
@@ -19,8 +19,6 @@ import NavbarItem from './nav-item'
 import ViewSwitcher from './view-switcher'
 
 const StyledNav = styled(Nav)`
-  /* Almost override bootstrap's margin-right: -15px */
-  margin-right: -5px;
   /* Target only the svgs in the Navbar */
   & > li > button > svg,
   & > li > span > button > span > svg {
@@ -41,10 +39,6 @@ const StyledNav = styled(Nav)`
       padding: 15px;
       line-height: 20px;
 
-      @media (max-width: 768px) {
-        padding: 10px;
-      }
-
       &:hover {
         background: rgba(0, 0, 0, 0.05);
         color: #ececec;
@@ -99,18 +93,14 @@ const DesktopNav = ({
 
   const BrandingElement = brandClickable ? 'a' : 'div'
 
-  const commonStyles = { marginLeft: 50 }
-  const brandingProps = brandClickable
-    ? {
-        href: '/#/',
-        style: {
-          ...commonStyles,
-          display: 'block',
-          position: 'relative',
-          zIndex: 10
-        }
-      }
-    : { style: { ...commonStyles } }
+  const brandingProps = brandClickable && {
+    href: '/#/',
+    style: {
+      display: 'block',
+      position: 'relative',
+      zIndex: 10
+    }
+  }
   const popupButtonText =
     popupTarget &&
     intl.formatMessage({
@@ -142,7 +132,7 @@ const DesktopNav = ({
             )}
           </Navbar.Brand>
 
-          <ViewSwitcher sticky />
+          <ViewSwitcher />
 
           <StyledNav pullRight>
             {popupTarget && (

diff --git a/lib/components/app/nav-item.tsx b/lib/components/app/nav-item.tsx
@@ -19,10 +19,6 @@ export const NavbarButton = styled.button`
   padding: 15px;
   transition: all 0.1s ease-in-out;
 
-  @media (max-width: 768px) {
-    padding: 10px;
-  }
-
   &:hover,
   &[aria-expanded='true'] {
     background: rgba(0, 0, 0, 0.05);

diff --git a/lib/components/app/view-switcher.tsx b/lib/components/app/view-switcher.tsx
@@ -3,14 +3,11 @@ import React from 'react'
 
 import Link from '../util/link'
 
-type Props = {
-  sticky?: boolean
-}
 /**
  * This component is a switcher between
  * the main views of the application.
  */
-const ViewSwitcher = ({ sticky }: Props) => {
+const ViewSwitcher = (): JSX.Element => {
   const intl = useIntl()
   return (
     <div
@@ -20,16 +17,6 @@ const ViewSwitcher = ({ sticky }: Props) => {
       className="view-switcher"
       id="view-switcher"
       role="group"
-      style={
-        sticky
-          ? {
-              height: '100%',
-              left: 0,
-              position: 'absolute',
-              width: '100%'
-            }
-          : {}
-      }
     >
       <Link to="/" tracking>
         <FormattedMessage id="components.BatchRoutingPanel.shortTitle" />

diff --git a/lib/components/mobile/mobile.css b/lib/components/mobile/mobile.css
@@ -20,12 +20,9 @@
 .otp .navbar .mobile-header {
   align-items: center;
   display: flex;
-  height: 50px;
+  height: 100%;
   justify-content: center;
-  left: 50px;
   max-width: 90%;
-  position: fixed;
-  right: 50px;
   text-align: center;
 }
 
@@ -68,10 +65,6 @@
   font-size: 18px;
 }
 
-.otp .navbar-brand {
-  padding: 7px 10px;
-}
-
 /* Welcome screen */
 
 .otp.mobile .welcome-location {

diff --git a/lib/components/user/nav-login-button.css b/lib/components/user/nav-login-button.css
@@ -13,11 +13,6 @@
   min-width: 0px;
 }
 
-.otp.mobile .navbar .container-fluid .locale-selector-and-login {
-  position: fixed;
-  right: 0;
-  top: 0;
-}
 .otp.mobile .navbar .container-fluid .locale-selector-and-login > li {
   display: inline-block;
 }