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:
parent
f137b83cde
commit
05ef54be80
|
@ -7,13 +7,13 @@ export default class ExternalRedirect extends React.Component<{|
|
||||||
|}> {
|
|}> {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<div style={{maxWidth: 900, margin: "0 auto"}}>
|
||||||
<h1>Redirecting…</h1>
|
<h1>Redirecting…</h1>
|
||||||
<p>
|
<p>
|
||||||
Redirecting to:{" "}
|
Redirecting to:{" "}
|
||||||
<a href={this.props.redirectTo}>{this.props.redirectTo}</a>
|
<a href={this.props.redirectTo}>{this.props.redirectTo}</a>
|
||||||
</p>
|
</p>
|
||||||
</React.Fragment>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -16,7 +16,7 @@ export default class Page extends React.Component<{|+children: Node|}> {
|
||||||
<nav className={css(style.nav)}>
|
<nav className={css(style.nav)}>
|
||||||
<ul className={css(style.navList)}>
|
<ul className={css(style.navList)}>
|
||||||
<li className={css(style.navItem, style.navItemLeft)}>
|
<li className={css(style.navItem, style.navItemLeft)}>
|
||||||
<Link to="/" className={css(style.navLinkTitle, style.navLink)}>
|
<Link to="/" className={css(style.navLink, style.navLinkTitle)}>
|
||||||
SourceCred
|
SourceCred
|
||||||
</Link>
|
</Link>
|
||||||
</li>
|
</li>
|
||||||
|
@ -67,6 +67,11 @@ const style = StyleSheet.create({
|
||||||
nav: {
|
nav: {
|
||||||
height: 60,
|
height: 60,
|
||||||
padding: "20px 100px",
|
padding: "20px 100px",
|
||||||
|
maxWidth: 900,
|
||||||
|
margin: "0 auto",
|
||||||
|
},
|
||||||
|
navLinkTitle: {
|
||||||
|
fontSize: 24,
|
||||||
},
|
},
|
||||||
navItem: {
|
navItem: {
|
||||||
display: "inline-block",
|
display: "inline-block",
|
||||||
|
|
|
@ -63,7 +63,7 @@ export class App extends React.Component<Props, State> {
|
||||||
const {edgeEvaluator, selectedRepo} = this.state;
|
const {edgeEvaluator, selectedRepo} = this.state;
|
||||||
const {graphWithAdapters, pnd} = this.state.data;
|
const {graphWithAdapters, pnd} = this.state.data;
|
||||||
return (
|
return (
|
||||||
<div style={{maxWidth: "66em", margin: "0 auto", padding: "0 10px"}}>
|
<div style={{maxWidth: 900, margin: "0 auto", padding: "0 10px"}}>
|
||||||
<div>
|
<div>
|
||||||
<div style={{marginBottom: 10}}>
|
<div style={{marginBottom: 10}}>
|
||||||
<RepositorySelect
|
<RepositorySelect
|
||||||
|
|
Loading…
Reference in New Issue