Fixing poster layout with new PosterLayout in Navigation.js. Adding back hi_tea.png which seemed to be absent...

Author: sahilshahpatel

public/assets/hi_tea.png

@@ -1,25 +1,9 @@
 import React, { Component } from "react";
 
-import Background from "./Background";
-
 class App extends Component {
   render() {
-    const { width, height } = this.props.size;
-    {/*
-    return (
-      <div className="App">
-        <Background width={width} height={height} />
-        <h1 className="center w-100">SIGGRAPH @ UIUC</h1>
-      </div>
-    );
-    */}
     return (
-      <div style={{ height: '100%', position: 'absolute', left: '0px', width: '100%', overflow: 'hidden'}}>
-      <center>
-        <img className="poster" style ={{paddingbottom:'500px', height: '90%', width: '100%'}} src="/siggraph/assets/hi_tea.png" alt="hi tea poster" />
-        </center>
-      </div>
-
+        <img className="poster" style ={{width: '100%'}} src={process.env.PUBLIC_URL + '/assets/hi_tea.png'} alt="hi tea poster" />
     );
   }
 }

src/App.js

@@ -34,7 +34,12 @@ class Navigation extends Component {
     return (
       <Router basename="/"> {/* When using HashRouter, we don't need the public URL as a basename */}
         <Switch>
-          <DefaultLayout exact path="/" component={App} size={this.state} />
+          {/* 
+              PosterLayout is like DefaultLayout but without a Container component. This allows the poster to stretch
+              the full length of the screen. When the front page has a poster, use PosterLayout for App. Otherwise
+              use DefaultLayout.
+          */}
+          <PosterLayout exact path="/" component={App} size={this.state} />
           <DefaultLayout
             path="/projects"
             component={Projects}
@@ -72,6 +77,23 @@ const DefaultLayout = ({ component: Component, size, ...rest }) => {
   );
 };
 
+const PosterLayout = ({ component: Component, size, ...rest }) => {
+  return (
+    <Route
+      {...rest}
+      render={matchProps => (
+        <>
+          <div className="main-container">
+            <Header />
+              <Component {...matchProps} size={size} />
+            <Footer />
+          </div>
+        </>
+      )}
+    />
+  );
+};
+
 const Construction = () => <h1>This page is under construction</h1>;
 
 const NotFound = () => (