From 32a38f907d12f6b1ee45403bfbd0089fcb0212ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Batuhan=20Berk=20Ba=C5=9Fo=C4=9Flu?= Date: Wed, 31 Mar 2021 16:30:37 -0400 Subject: [PATCH 01/26] Added some css and fixed some alignment. --- src/agent-page/AgentPage.js | 52 ++--- src/agent-page/Agents.js | 4 +- src/agent-page/agent-page.css | 6 +- src/homePage/homePage.css | 7 + src/listings-page/ListingsPage.js | 188 +++++++++--------- .../navbar-component/Navbar.css | 4 +- 6 files changed, 141 insertions(+), 120 deletions(-) diff --git a/src/agent-page/AgentPage.js b/src/agent-page/AgentPage.js index 0d90622..954cdee 100644 --- a/src/agent-page/AgentPage.js +++ b/src/agent-page/AgentPage.js @@ -8,32 +8,36 @@ import Agent3 from "../images/Agent3.jpg"; import Agent4 from "../images/Agent4.jpg"; import Agent5 from "../images/Agent5.jpg"; import Agent6 from "../images/Agent6.jpg"; - class AgentPage extends Component { - state={ - agents: [ - - {title:'head sales assistant',name: 'Michael', src: Agent1,word:'Michael has a genuine passion for helping others and for giving back to the community.',id:1}, - {title:'sales assistant',name: 'Jin', src: Agent2,word:'I have a passion for assisting clients with various real estate needs.',id:2}, - {title:'sales assistant',name: 'Anita', src: Agent3,word:'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.',id:3}, - {title:'sales assistant',name: 'Alex', src: Agent4,word:'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA',id:4}, - {title:'sales assistant',name: 'Xuan', src: Agent5,word:'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ',id:5}, - {title:'sales assistant',name: 'Walter', src: Agent6,word:'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.',id:6}, +class AgentPage extends Component { + state = { + agents: [ - - ] - } - render(){ - return( -
-
-

Meet the team

-
- - -
- ) + { title: 'head sales assistant', name: 'Michael', src: Agent1, word: 'Michael has a genuine passion for helping others and for giving back to the community.', id: 1 }, + { title: 'sales assistant', name: 'Jin', src: Agent2, word: 'I have a passion for assisting clients with various real estate needs.', id: 2 }, + { title: 'sales assistant', name: 'Anita', src: Agent3, word: 'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.', id: 3 }, + { title: 'sales assistant', name: 'Alex', src: Agent4, word: 'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA', id: 4 }, + { title: 'sales assistant', name: 'Xuan', src: Agent5, word: 'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ', id: 5 }, + { title: 'sales assistant', name: 'Walter', src: Agent6, word: 'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.', id: 6 }, + + + ] } - displayAgents= (agent) => { + render() { + return ( +
+
+

Meet the Team

+
+ +
+ +
+ + +
+ ) + } + displayAgents = (agent) => { console.log(agent); } diff --git a/src/agent-page/Agents.js b/src/agent-page/Agents.js index ef8b34e..ca1e070 100644 --- a/src/agent-page/Agents.js +++ b/src/agent-page/Agents.js @@ -9,8 +9,8 @@ const Agents = ({ agents }) => { return (
{} - - + + {agent.title} {agent.name} diff --git a/src/agent-page/agent-page.css b/src/agent-page/agent-page.css index 6e07d46..7789a78 100644 --- a/src/agent-page/agent-page.css +++ b/src/agent-page/agent-page.css @@ -12,8 +12,12 @@ } .center{ height: 25vh; /* Magic here */ - background-color: yellow; + background-color: #ffe609; display: flex; justify-content: center; align-items: center; + } + + .agent{ + padding-left: 16%; } \ No newline at end of file diff --git a/src/homePage/homePage.css b/src/homePage/homePage.css index 2d082b7..c79fd1f 100644 --- a/src/homePage/homePage.css +++ b/src/homePage/homePage.css @@ -14,6 +14,13 @@ font-family: "Georgia"; } +#features .container-fluid { + padding: 2% 48% 2%; + text-align: left; + font-family: "Georgia"; +} + + .housesIntro{ padding: 4% 5%; } diff --git a/src/listings-page/ListingsPage.js b/src/listings-page/ListingsPage.js index 3aa80cf..defcf47 100644 --- a/src/listings-page/ListingsPage.js +++ b/src/listings-page/ListingsPage.js @@ -1,16 +1,16 @@ import React, { useState, useEffect, Component } from "react"; import { - GoogleMap, - withScriptjs, + GoogleMap, + withScriptjs, withGoogleMap, Marker, InfoWindow - } from "react-google-maps"; - import * as listingData from "./data/property-data.json"; - import mapStyles from "./mapStyles"; - import "./ListingsPage.css"; +} from "react-google-maps"; +import * as listingData from "./data/property-data.json"; +import mapStyles from "./mapStyles"; +import "./ListingsPage.css"; -function Map(){ +function Map() { const [selectedProperty, setSelectedProperty] = useState(null); @@ -19,89 +19,89 @@ function Map(){ return ( - {listingData.Properties.map(house => ( + {listingData.Properties.map(house => ( - { - setSelectedProperty(house) - }} + }} - icon={{ - url:"homes-3.svg", - scaledSize: new window.google.maps.Size(50,50) - }} - + onClick={() => { + setSelectedProperty(house) + }} - - /> - - - - ))} + icon={{ + url: "homes-3.svg", + scaledSize: new window.google.maps.Size(50, 50) + }} - {selectedProperty && ( - - { - setSelectedProperty(null); - }} - > -
-

{selectedProperty.ADDRESS}

-

{selectedProperty.DESC}

-
-
-
+ /> + + + + ))} + + + {selectedProperty && ( + + { + setSelectedProperty(null); + }} + > +
+

{selectedProperty.ADDRESS}

+

{selectedProperty.DESC}

+
+
+ +
1 2 - -
-
+
+ +
-
-
-
- - + +
- - )} - +
+ + + )} + + - - + + ); } @@ -113,12 +113,12 @@ class ListingsPage extends Component { render() { return ( -
+
-
+
- {/* + {/* @@ -153,41 +153,45 @@ class ListingsPage extends Component {
*/} - -
-
+
-

Map

- -
- + +
+
+

Map

+
+
+ +
+ } - containerElement={
} - mapElement={
} - /> + loadingElement={
} + containerElement={
} + mapElement={
} + /> +
+ + + +
- - -
- -
- - - - - - - -
- - ); + + + + + +
+ + + + ); } } diff --git a/src/shared-components/navbar-component/Navbar.css b/src/shared-components/navbar-component/Navbar.css index d7f8dda..f6e5f64 100644 --- a/src/shared-components/navbar-component/Navbar.css +++ b/src/shared-components/navbar-component/Navbar.css @@ -1,3 +1,5 @@ .Navbar{ - background-color: pink; + background-color: rgb(56, 55, 55); + padding-top: 20px; + padding-bottom: 24px; } \ No newline at end of file From c640868889ef284376254e09e4681b8341292702 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Batuhan=20Berk=20Ba=C5=9Fo=C4=9Flu?= Date: Wed, 31 Mar 2021 18:04:57 -0400 Subject: [PATCH 02/26] Fixed some alignment issues. --- src/agent-page/AgentPage.js | 3 +-- src/agent-page/Agents.js | 25 +++++++++--------- src/agent-page/agent-page.css | 5 ++++ src/listings-page/ListingsPage.js | 1 + src/listings-page/mapStyles.js | 1 + .../navbar-component/Navbar.js | 26 +++++++++---------- 6 files changed, 34 insertions(+), 27 deletions(-) diff --git a/src/agent-page/AgentPage.js b/src/agent-page/AgentPage.js index 954cdee..e3fe3c9 100644 --- a/src/agent-page/AgentPage.js +++ b/src/agent-page/AgentPage.js @@ -1,7 +1,6 @@ import React, { Component } from "react"; import Agents from './Agents' import './agent-page.css'; -import Carousel from 'react-bootstrap/Carousel' import Agent1 from "../images/Agent1.jpg"; import Agent2 from "../images/Agent2.jpg"; import Agent3 from "../images/Agent3.jpg"; @@ -16,7 +15,7 @@ class AgentPage extends Component { { title: 'sales assistant', name: 'Jin', src: Agent2, word: 'I have a passion for assisting clients with various real estate needs.', id: 2 }, { title: 'sales assistant', name: 'Anita', src: Agent3, word: 'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.', id: 3 }, { title: 'sales assistant', name: 'Alex', src: Agent4, word: 'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA', id: 4 }, - { title: 'sales assistant', name: 'Xuan', src: Agent5, word: 'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ', id: 5 }, + { title: 'sales assistant', name: 'Xuan', src: Agent5, word: 'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto.', id: 5 }, { title: 'sales assistant', name: 'Walter', src: Agent6, word: 'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.', id: 6 }, diff --git a/src/agent-page/Agents.js b/src/agent-page/Agents.js index ca1e070..d1f583f 100644 --- a/src/agent-page/Agents.js +++ b/src/agent-page/Agents.js @@ -1,5 +1,4 @@ import React from "react"; -import AgentPage from "./AgentPage"; /* import {Link} from 'react-router-dom' */ import Card from "react-bootstrap/Card"; import Button from "react-bootstrap/Button"; @@ -9,17 +8,19 @@ const Agents = ({ agents }) => { return (
{} - - - - {agent.title} - {agent.name} - - {agent.word} - - - - + + + + {agent.title} + {agent.name} + + {agent.word} + +
+ +
+ +
); }); diff --git a/src/agent-page/agent-page.css b/src/agent-page/agent-page.css index 7789a78..bc79e29 100644 --- a/src/agent-page/agent-page.css +++ b/src/agent-page/agent-page.css @@ -20,4 +20,9 @@ .agent{ padding-left: 16%; + } + + .buttonfriend{ + padding-top: 15px; + padding-left: 120px; } \ No newline at end of file diff --git a/src/listings-page/ListingsPage.js b/src/listings-page/ListingsPage.js index defcf47..4d17a58 100644 --- a/src/listings-page/ListingsPage.js +++ b/src/listings-page/ListingsPage.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line import React, { useState, useEffect, Component } from "react"; import { GoogleMap, diff --git a/src/listings-page/mapStyles.js b/src/listings-page/mapStyles.js index 84d724c..98b6c24 100644 --- a/src/listings-page/mapStyles.js +++ b/src/listings-page/mapStyles.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line export default [ { "featureType": "all", diff --git a/src/shared-components/navbar-component/Navbar.js b/src/shared-components/navbar-component/Navbar.js index 5499ca4..e8f271d 100644 --- a/src/shared-components/navbar-component/Navbar.js +++ b/src/shared-components/navbar-component/Navbar.js @@ -6,13 +6,13 @@ const Navbar = () => { return ( /* Nav Bar */
-