PTBC9-project1-Patrick #37
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,113 @@ | ||
| //React Components | ||
| import React from "react"; | ||
| import OurNav from "./Components/OurNav.js"; | ||
| import About from "./Components/About.js"; | ||
| import ImgDivider from "./Components/ImgDivider.js"; | ||
| import CurrMenu from "./Components/CurrMenu.js"; | ||
| import { Link } from "react-router-dom"; | ||
| import FAQ from "./Components/FAQ.js"; | ||
| import Follow from "./Components/Follow.js"; | ||
|
|
||
| //Images | ||
| import backgroundWide1 from "./images/backgroundWide1.jpg"; | ||
| import rendangCrostini from "./images/rendangCrostini.jpg"; | ||
|
|
||
| //CSS | ||
| import "./App.css"; | ||
|
|
||
| class App extends React.Component { | ||
| componentDidMount = () => { | ||
| // get id from URL | ||
| if (window.location.href.includes("#")) { | ||
| const urlList = window.location.href.split("#"); | ||
| const id = urlList[urlList.length - 1]; | ||
|
|
||
| document.querySelector(`#${id}`).scrollIntoView(); | ||
| } | ||
| }; | ||
|
|
||
| moveTo = (id) => { | ||
| document.querySelector(`#${id}`).scrollIntoView(); | ||
| }; | ||
|
Comment on lines
+21
to
+31
There was a problem hiding this comment. Nice hack you found here. However, for react, we don't want to directly select the DOM elements. Since we work with a shadow DOM, we want to work on that one instead. To do that, we can use a reference, short https://stackoverflow.com/questions/43441856/how-to-scroll-to-an-element |
||
|
|
||
| currDates = ( | ||
| <div className="section-text-container"> | ||
| <h1>Our Current Menu</h1> | ||
| <p> | ||
| It's the festive season! checkout our upcoming menu{" "} | ||
| {window.innerWidth < 992 ? "below the dates" : "to the left"} | ||
| </p> | ||
| <h3>Dinner dates:</h3> | ||
| <div className="date-container"> | ||
| <div className="date-col"> | ||
| <h4>Nov:</h4> | ||
| <p>8 to 11 (Wed to Sat)</p> | ||
| <p>15 to 18 (Wed to Sat)</p> | ||
| <p>22 to 25 (Wed to Sat)</p> | ||
|
Comment on lines
+44
to
+46
There was a problem hiding this comment. Hardcoding this is fine for now. Later it would be good to make this dynamic! Maybe have a calendar of sorts, and print the Wed to Saturday dates there for whichever months you are listing here. Maybe you could also make it the whole year with a collapsible to show everything beyond the current 2 months? You can probably achieve this with the library |
||
| </div> | ||
| <div className="date-col"> | ||
| <h4>Dec:</h4> | ||
| <p>6 to 9 (Wed to Sat)</p> | ||
| <p>13 to 16 (Wed to Sat)</p> | ||
| <p>22 & 23 (Fri & Sat)</p> | ||
| <p>29 & 30 (Fri & Sat)</p> | ||
| </div> | ||
| </div> | ||
| <p> | ||
| $148/pax, BYOB no corkage charges! Reservations in groups of 6 to 12 pax | ||
| from 7pm till 10.30pm | ||
| </p> | ||
| <p> | ||
| for 8pax or more, additional mains will be served as indicated in the | ||
| menu | ||
| </p> | ||
|
|
||
| <Link to="/project1-bootcamp/book" className="btn btn-dark"> | ||
| Book Now! | ||
| </Link> | ||
| </div> | ||
| ); | ||
|
|
||
| render() { | ||
| return ( | ||
| <div className="App container-fluid p-0 m-0"> | ||
| <div className="row"> | ||
| <OurNav /> | ||
| </div> | ||
| <div className="row"> | ||
| <div | ||
| className="col-12 welcome" | ||
| style={{ | ||
| backgroundImage: `url(${backgroundWide1})`, | ||
| backgroundSize: "cover", | ||
| backgroundPosition: "center", | ||
| }} | ||
| ></div> | ||
| </div> | ||
| <div className="row" id="about"> | ||
| <div className="col-lg-6 p-0"> | ||
| <About /> | ||
| </div> | ||
| <ImgDivider img={rendangCrostini} /> | ||
| </div> | ||
| <div className="row" id="curr-menu"> | ||
| <div className="col-lg-6 col-sm-12 d-lg-none p-0"> | ||
| {this.currDates} | ||
| </div> | ||
| <div className="col-lg-6 p-0"> | ||
| <CurrMenu /> | ||
| </div> | ||
| <div className="col-lg-6 col-sm-12 d-lg-block d-none p-0"> | ||
| {this.currDates} | ||
| </div> | ||
| </div> | ||
| <div className="row" id="faq"> | ||
| <FAQ /> | ||
| </div> | ||
|
|
||
| <div id="follow" className="follow"> | ||
| <Follow /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| //React Components | ||
| import React from "react"; | ||
|
|
||
| class About extends React.Component { | ||
| render() { | ||
| return ( | ||
| <div className="section-text-container about"> | ||
| <h1>About Us</h1> | ||
| <p> | ||
| Welcome to our home in Upper Thomson where I, Celina and my Hubs, Kok | ||
| will cook for you! Our food is inspired by the big bold flavours of | ||
| Asia, and fueled by our passion for cooking and creating. | ||
| </p> | ||
| <p> | ||
| Each menu is designed to highlight specific regions in Asia like | ||
| Indonesia, South Asia, Indochina and North Asia. The process starts | ||
| with researching the cuisine, then cooking, adapting and reinventing | ||
| the dish to a version we like. There is a large variety and abundance | ||
| of fresh Asian herbs and spices in our local markets and it’s a joy | ||
| finding new ways of using them. We focus on dishes less common among | ||
| the local restaurants, so that your experience here can be a | ||
| refreshing, food adventure! | ||
| </p> | ||
| <p> | ||
| We host intimatesuppers in our home near Old Upper Thomson Road, among | ||
| the lush greenery of Pierce Reservoir. Guests can sit out on our patio | ||
| to enjoy their drinks before dinner begins. | ||
| </p> | ||
| <p>We hope to see you here soon!</p> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default About; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| //React components | ||
| import React from "react"; | ||
| import Carousel from "react-bootstrap/Carousel"; | ||
|
|
||
| //images | ||
| import festMenu from "../images/current-menu/festive-menu.png"; | ||
| import bruleePork from "../images/current-menu/brulee-pork-belly.jpg"; | ||
| import yellowCurryBakedFish from "../images/current-menu/yellow-curry-baked-fish.jpg"; | ||
| import asianTrifle from "../images/current-menu/asian-trifle.jpg"; | ||
|
|
||
| class CurrMenu extends React.Component { | ||
| currMenuTitleList = [ | ||
|
There was a problem hiding this comment. nice use of a data structure. Since this is all static information though, I would define it outside of the component so it doesn't need to get redefined on every re-render |
||
| { | ||
| image: festMenu, //image item here | ||
| caption: false, | ||
| }, | ||
| { | ||
| image: bruleePork, //image item here | ||
| caption: true, | ||
| title: "Brulee Pork Belly", | ||
| description: | ||
| "Plump pork belly with brule skin, served with homemade kimchi.", | ||
| }, | ||
| { | ||
| image: yellowCurryBakedFish, //image item here | ||
| caption: true, | ||
| title: "yellow Curry Baked Fish", | ||
| description: | ||
| "This fish is backed to lock in the flavours and moisture resulting in a juicy and flavourful fish each time.", | ||
| }, | ||
| { | ||
| image: asianTrifle, //image item here | ||
| caption: true, | ||
| title: "Asian Trifle", | ||
| description: "Our unique asian style trifle to finish of the meal.", | ||
| }, | ||
| ]; | ||
| render() { | ||
| return ( | ||
| <Carousel interval={10000}> | ||
| {this.currMenuTitleList.map((object, index) => ( | ||
| <Carousel.Item key={index}> | ||
| <div | ||
| className="curr-menu car-item" | ||
| style={{ backgroundImage: `url(${object.image})` }} | ||
| ></div> | ||
|
Comment on lines
+43
to
+46
There was a problem hiding this comment. Why not use |
||
| {object.caption && ( | ||
| <Carousel.Caption className="car-caption"> | ||
| <h3>{object.title}</h3> | ||
| <p>{object.description}</p> | ||
| </Carousel.Caption> | ||
| )} | ||
| </Carousel.Item> | ||
| ))} | ||
| </Carousel> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default CurrMenu; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please also include how to install your dependencies to get the project going