Enforce a max-width of 900px (#599)

Summary:
Here, we make the width consistent across the home page, the explorer,
and the navbar. Arguably, the PageRank table itself should be wider. We
can let it pop out of the box model with `relative`, `width`, and `left`
properties (using `calc`), but we don’t want to deal with the details
right now.

At some time in the future, we can also of course unify these styles.

Paired with @decentralion.

Test Plan:
Running `yarn start` and clicking around the various pages suffices. To
check the external redirect page, you can apply

```diff
diff --git a/src/app/HomePage.js b/src/app/HomePage.js
index 4d0f832..0eee519 100644
--- a/src/app/HomePage.js
+++ b/src/app/HomePage.js
@@ -143,7 +143,8 @@ export default class HomePage extends React.Component<{||}> {
         <h2>Roadmap</h2>
         <p>
           SourceCred is under active development.{" "}
-          <Link className={css(styles.link)} to="/prototype">
+          <Link className={css(styles.link)} to="/discord-invite">
+            {/* STOPSHIP */}
             We have a prototype
           </Link>{" "}
           that ingests data from Git and GitHub, computes cred, and allows the
```

and then click the appropriate link on the home page.

wchargin-branch: max-width-900
This commit is contained in:
William Chargin 2018-08-02 19:53:47 -07:00 committed by GitHub
parent f137b83cde
commit 05ef54be80
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 9 additions and 4 deletions

View File

@ -7,13 +7,13 @@ export default class ExternalRedirect extends React.Component<{|
|}> {
render() {
return (
<React.Fragment>
<div style={{maxWidth: 900, margin: "0 auto"}}>
<h1>Redirecting</h1>
<p>
Redirecting to:{" "}
<a href={this.props.redirectTo}>{this.props.redirectTo}</a>
</p>
</React.Fragment>
</div>
);
}

View File

@ -16,7 +16,7 @@ export default class Page extends React.Component<{|+children: Node|}> {
<nav className={css(style.nav)}>
<ul className={css(style.navList)}>
<li className={css(style.navItem, style.navItemLeft)}>
<Link to="/" className={css(style.navLinkTitle, style.navLink)}>
<Link to="/" className={css(style.navLink, style.navLinkTitle)}>
SourceCred
</Link>
</li>
@ -67,6 +67,11 @@ const style = StyleSheet.create({
nav: {
height: 60,
padding: "20px 100px",
maxWidth: 900,
margin: "0 auto",
},
navLinkTitle: {
fontSize: 24,
},
navItem: {
display: "inline-block",

View File

@ -63,7 +63,7 @@ export class App extends React.Component<Props, State> {
const {edgeEvaluator, selectedRepo} = this.state;
const {graphWithAdapters, pnd} = this.state.data;
return (
<div style={{maxWidth: "66em", margin: "0 auto", padding: "0 10px"}}>
<div style={{maxWidth: 900, margin: "0 auto", padding: "0 10px"}}>
<div>
<div style={{marginBottom: 10}}>
<RepositorySelect