Merge pull request #234 from thebeetoken/vic/ENG-1033b

Lay out /work/listings/:id

src/pages/listing/BookingBar.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Button, Col, Row } from 'reactstrap';
+
+import { Listing } from 'networking/listings';
+import { formatPrice } from 'utils/formatter';
+
+const BookingBar = ({
+  pricePerNightUsd
+}: Listing) => (
+  <Row className="w-100 p-2 align-items-center justify-content-between">
+    <Col>
+      {formatPrice(pricePerNightUsd)} per night
+    </Col>
+    <Button>Request to Book</Button>
+  </Row>
+);
+
+export default BookingBar;

src/pages/listing/Listing.tsx

@@ -3,7 +3,6 @@ import { Query } from 'react-apollo';
 import { Fade } from 'reactstrap';
 
 import Footer from 'components/work/Footer';
-import Header from 'components/work/Header';
 
 import Loading from 'shared/loading/Loading';
 
@@ -15,7 +14,6 @@ const PROFILE_IMAGE_PARAMETERS = { width: 300, height: 300 };
 
 const Listing = ({ match }: RouterProps) => (
   <Fade>
-    <Header />
     <Query query={GET_PUBLIC_LISTING} fetchPolicy="cache-and-network" variables={{ id: match.params.id, ...PROFILE_IMAGE_PARAMETERS }}>
       {({ loading, error, data }) => loading ? <Loading /> :
         error ? <h1>Error: {error.message}</h1> :

src/pages/listing/ListingPage.tsx

@@ -1,14 +1,31 @@
 import * as React from 'react';
+import { Col, Container, Fade, Row } from 'reactstrap';
 
 import ListingGallery from './ListingGallery';
 import ListingInformation from './ListingInformation';
 import BookingCard from './BookingCard';
+import BookingBar from './BookingBar';
 
 import { Listing } from 'networking/listings';
 
-const ListingPage = (listing: Listing) => (<>
-  <ListingGallery {...listing} />
-  <ListingInformation {...listing} />
-  <BookingCard {...listing} />
-</>);
+const ListingPage = (listing: Listing) => (
+  <Fade>
+    <ListingGallery {...listing} />
+    <Container>
+      <Row>
+        <Col>
+          <ListingInformation {...listing} />
+        </Col>
+        <Col>
+          <div className="sticky-top bee-top d-none d-lg-block">
+            <BookingCard {...listing} />
+          </div>
+        </Col>
+      </Row>
+    </Container>
+    <footer className="fixed-bottom bg-white d-lg-none">
+      <BookingBar {...listing} />
+    </footer>
+  </Fade>
+);
 export default ListingPage;

src/styled/customStyles.scss

@@ -54,11 +54,11 @@ $HEADER-HEIGHT: 4.125rem;
 
 .bee-top {
   top: 4.125rem;
+  z-index: 999; // Behind bootstrap overlays
 }
 
 .bee-search-map {
   height: calc(100vh - 11.25rem);
-  z-index: 999; // Behind bootstrap overlays
 }
 
 // add not-allowed cursor and no transform on disabled items