WIP: fixing layout bug

newrelic · Jun 15, 2020 · dd55b55 · dd55b55
1 parent 4b2e1eb
commit dd55b55
Show file tree

Hide file tree

Showing 18 changed files with 214 additions and 339 deletions.
diff --git a/src/components/BreadcrumbBar.js b/src/components/BreadcrumbBar.js
@@ -1,26 +1,23 @@
 import React from 'react';
 import { Link } from 'gatsby';
 import styles from './BreadcrumbBar.module.scss';
-import Container from './Container';
 import PropTypes from 'prop-types';
 import { link } from '../types';
 
 const BreadcrumbBar = ({ crumbs, duration }) => (
   <div className={styles.breadcrumbBar}>
-    <Container className={styles.container}>
-      <ul className={styles.crumbs}>
-        {crumbs.map((crumb, index) => (
-          <li key={index}>
-            {crumb.url ? (
-              <Link to={crumb.url}>{crumb.displayName}</Link>
-            ) : (
-              <span>{crumb.displayName}</span>
-            )}
-          </li>
-        ))}
-      </ul>
-      {duration && <div className={styles.duration}>{duration}</div>}
-    </Container>
+    <ul className={styles.crumbs}>
+      {crumbs.map((crumb, index) => (
+        <li key={index}>
+          {crumb.url ? (
+            <Link to={crumb.url}>{crumb.displayName}</Link>
+          ) : (
+            <span>{crumb.displayName}</span>
+          )}
+        </li>
+      ))}
+    </ul>
+    {duration && <div className={styles.duration}>{duration}</div>}
   </div>
 );
 

diff --git a/src/components/Container.js b/src/components/Container.js
diff --git a/src/components/Container.module.scss b/src/components/Container.module.scss
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,18 +1,15 @@
 import React from 'react';
 import { Link } from 'gatsby';
-import Container from './Container';
 import styles from './Footer.module.scss';
 
 const Footer = () => (
   <footer className={styles.footer}>
-    <Container className={styles.container}>
-      <div className={styles.leftColumn}>
-        <Link to="/" className={`${styles.logo} logo`} />
-        <div className={styles.copyright}>
-          Copyright &copy; 2020 New Relic Inc.
-        </div>
+    <div className={styles.leftColumn}>
+      <Link to="/" className={`${styles.logo} logo`} />
+      <div className={styles.copyright}>
+        Copyright &copy; 2020 New Relic Inc.
       </div>
-    </Container>
+    </div>
   </footer>
 );
 

diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss
@@ -7,16 +7,6 @@
   margin-top: 10rem;
 }
 
-.container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  @media (max-width: 760px) {
-    justify-content: center;
-  }
-}
-
 .leftColumn {
   display: flex;
   align-items: center;

diff --git a/src/components/GuideListing/GuideListing.js b/src/components/GuideListing/GuideListing.js
@@ -1,4 +1,3 @@
-import Container from '../Container';
 import Heading from './Heading';
 import Description from './Description';
 import List from './List';
@@ -7,9 +6,7 @@ import React from 'react';
 import styles from './GuideListing.module.scss';
 
 const GuideListing = ({ children }) => (
-  <div className={styles.guideListing}>
-    <Container className={styles.container}>{children}</Container>
-  </div>
+  <div className={styles.guideListing}>{children}</div>
 );
 
 GuideListing.Heading = Heading;

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { Link } from 'gatsby';
 import cx from 'classnames';
-import Container from './Container';
 import ExternalLink from './ExternalLink';
 import HamburgerMenu from './HamburgerMenu';
 import styles from './Header.module.scss';
@@ -11,56 +10,38 @@ const Header = () => {
 
   return (
     <header className={cx(styles.main, { [styles.isOpen]: isOpen })}>
-      <Container className={styles.container}>
-        <nav role="navigation" aria-label="New Relic" className={styles.navNr}>
-          <h3 className={styles.hideOnDesktop}>Sites</h3>
-          <ul>
-            <li className={styles.hideOnMobile}>
-              <ExternalLink
-                className={cx(styles.logo, styles.logoNr)}
-                href="//newrelic.com"
-              />
-            </li>
-            <li>
-              <Link to="/" className={styles.isActive}>
-                Developers
-              </Link>
-            </li>
-            <li>
-              <ExternalLink href="//opensource.newrelic.com">
-                Open Source
-              </ExternalLink>
-            </li>
-            <li>
-              <ExternalLink href="//docs.newrelic.com">
-                Documentation
-              </ExternalLink>
-            </li>
-          </ul>
-        </nav>
+      <nav role="navigation" aria-label="New Relic" className={styles.navNr}>
+        <h3 className={styles.hideOnDesktop}>Sites</h3>
+        <ul>
+          <li className={styles.hideOnMobile}>
+            <ExternalLink
+              className={cx(styles.logo, styles.logoNr)}
+              href="//newrelic.com"
+            />
+          </li>
+          <li>
+            <Link to="/" className={styles.isActive}>
+              Developers
+            </Link>
+          </li>
+          <li>
+            <ExternalLink href="//opensource.newrelic.com">
+              Open Source
+            </ExternalLink>
+          </li>
+          <li>
+            <ExternalLink href="//docs.newrelic.com">
+              Documentation
+            </ExternalLink>
+          </li>
+        </ul>
+      </nav>
 
-        <HamburgerMenu
-          className={styles.hamburgerMenu}
-          toggle={() => setIsOpen(!isOpen)}
-          isOpen={isOpen}
-        />
-
-        <nav className={styles.navTools}>
-          <h3 className={styles.hideOnDesktop}>Tools</h3>
-          <ul>
-            <li>
-              <ExternalLink
-                className={cx(styles.logo, styles.logoGithub)}
-                href="//github.com/newrelic"
-              >
-                <span className={styles.hideOnDesktop}>
-                  Contribute on GitHub
-                </span>
-              </ExternalLink>
-            </li>
-          </ul>
-        </nav>
-      </Container>
+      <HamburgerMenu
+        className={styles.hamburgerMenu}
+        toggle={() => setIsOpen(!isOpen)}
+        isOpen={isOpen}
+      />
     </header>
   );
 };

diff --git a/src/components/Jumbotron.js b/src/components/Jumbotron.js
@@ -1,42 +1,39 @@
 import React from 'react';
 import { Link } from 'gatsby';
-import Container from './Container';
 import CallToAction from './CallToAction';
 import styles from './Jumbotron.module.scss';
 
 const Jumbotron = () => (
-  <Container>
-    <div className={styles.jumbotron}>
-      <h1 className={styles.h1}>Create a free account to get started</h1>
-      <div className={styles.callToActionContainer}>
-        <CallToAction step="1" text="Create your free account">
-          <form>
-            <input placeholder="[email protected]" />
-            <button className={styles.signUpButton} type="submit">
-              Sign up
-            </button>
-          </form>
-          <Link to="/">Sign in to New Relic One</Link>
-        </CallToAction>
-        <CallToAction step="2" text="Get your API key">
-          <select id="api-keys" name="api-keys">
-            <option value="" disabled selected hidden>
-              Select or create a key...
-            </option>
-            <option value="key">key</option>
-            <option value="otherkey">otherkey</option>
-          </select>
-          <Link to="/">Create a new API key</Link>
-        </CallToAction>
-        <CallToAction step="3" text="Install the newrelic CLI">
-          <button className={styles.downloadButton} type="button">
-            Download for macOS
+  <div className={styles.jumbotron}>
+    <h1 className={styles.h1}>Create a free account to get started</h1>
+    <div className={styles.callToActionContainer}>
+      <CallToAction step="1" text="Create your free account">
+        <form>
+          <input placeholder="[email protected]" />
+          <button className={styles.signUpButton} type="submit">
+            Sign up
           </button>
-          <Link to="/">Download for other platforms</Link>
-        </CallToAction>
-      </div>
+        </form>
+        <Link to="/">Sign in to New Relic One</Link>
+      </CallToAction>
+      <CallToAction step="2" text="Get your API key">
+        <select id="api-keys" name="api-keys">
+          <option value="" disabled selected hidden>
+            Select or create a key...
+          </option>
+          <option value="key">key</option>
+          <option value="otherkey">otherkey</option>
+        </select>
+        <Link to="/">Create a new API key</Link>
+      </CallToAction>
+      <CallToAction step="3" text="Install the newrelic CLI">
+        <button className={styles.downloadButton} type="button">
+          Download for macOS
+        </button>
+        <Link to="/">Download for other platforms</Link>
+      </CallToAction>
     </div>
-  </Container>
+  </div>
 );
 
 export default Jumbotron;
diff --git a/src/components/Layout.js b/src/components/Layout.js
@@ -8,14 +8,15 @@ import styles from './Layout.module.scss';
 import pages from '../data/sidenav.json';
 import './styles.scss';
 
-
 const Layout = ({ children }) => (
-  <div className={styles.layout}>
+  <>
     <Header />
-    <Sidebar pages={pages} />
-    <main>{children}</main>
+    <div className={styles.layout}>
+      <Sidebar pages={pages} />
+      <main>{children}</main>
+    </div>
     <Footer pages={pages} />
-  </div>
+  </>
 );
 
 Layout.propTypes = {

diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss
@@ -1,19 +1,7 @@
 .layout {
   min-height: 100vh;
   display: grid;
-  grid-template-columns: 1fr 3fr;
-
-  > header {
-    grid-column-start: 1;
-    grid-column-end: 3;
-    grid-row-start: 1;
-    grid-row-end: 2;
-  }
-
-  > footer {
-    grid-column-start: 1;
-    grid-column-end: 3;
-    grid-row-start: 3;
-    grid-row-end: 4;
-  }
+  grid-template-columns: auto 1fr;
+  max-width: 1200px;
+  margin: 0 auto;
 }
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -23,7 +23,7 @@ const renderNav = (page, index) => (
 const Sidebar = ({ className, pages, isOpen, toggle }) => (
   <aside className={cx(styles.sidebar, className, { [styles.isOpen]: isOpen })}>
     <h1 className={styles.title}>
-      <Link to="/" className={cx(styles.logo, styles.titleLogo)} />
+      <Link to="/" className={styles.logo} />
     </h1>
     <div className={styles.top}>
       <h3>Pages</h3>

diff --git a/src/components/Sidebar.module.scss b/src/components/Sidebar.module.scss
@@ -64,9 +64,6 @@
   padding: 0;
   background-size: contain;
   background-repeat: no-repeat;
-}
-
-.titleLogo {
   width: 247px;
   height: 64px;
   margin-right: 1rem;

diff --git a/src/components/styles.scss b/src/components/styles.scss
@@ -78,6 +78,10 @@ html {
   -webkit-text-size-adjust: 100%;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 body {
   margin: 0;
   font-size: 16px;