Added some css and fixed some alignment.
This commit is contained in:
Batuhan Berk Başoğlu
parent
70cff289a3
commit
e9c98a326d
6 changed files with 141 additions and 120 deletions
|
|
@ -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(
|
||||
<div className="container">
|
||||
<div className="center blue-text text-darken-4">
|
||||
<h1>Meet the team</h1>
|
||||
</div>
|
||||
|
||||
<Agents agents={this.state.agents} />
|
||||
</div>
|
||||
)
|
||||
{ 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 (
|
||||
<div>
|
||||
<div className="center blue-text text-darken-4">
|
||||
<h1 style={{ fontFamily: "Georgia" }} >Meet the Team</h1>
|
||||
</div>
|
||||
|
||||
<div className="container">
|
||||
<Agents agents={this.state.agents} />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
displayAgents = (agent) => {
|
||||
console.log(agent);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ const Agents = ({ agents }) => {
|
|||
return (
|
||||
<div className="agent" key={agent.id}>
|
||||
{}
|
||||
<Card style={{ width: "18rem" }}>
|
||||
<Card.Img variant="top" src={agent.src} />
|
||||
<Card style={{ width: "22rem", height: "40rem" }}>
|
||||
<Card.Img variant="top" style={{ height: "22rem" }} src={agent.src} />
|
||||
<Card.Body>
|
||||
<Card.Title>{agent.title}</Card.Title>
|
||||
<Card.Text>{agent.name}</Card.Text>
|
||||
|
|
|
|||
|
|
@ -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%;
|
||||
}
|
||||
|
|
@ -14,6 +14,13 @@
|
|||
font-family: "Georgia";
|
||||
}
|
||||
|
||||
#features .container-fluid {
|
||||
padding: 2% 48% 2%;
|
||||
text-align: left;
|
||||
font-family: "Georgia";
|
||||
}
|
||||
|
||||
|
||||
.housesIntro{
|
||||
padding: 4% 5%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<GoogleMap
|
||||
defaultZoom={10}
|
||||
defaultCenter={{lat: 45.4231, lng:-75.6931}}
|
||||
defaultCenter={{ lat: 45.4231, lng: -75.6931 }}
|
||||
//https://snazzymaps.com/explore
|
||||
defaultOptions={{styles: mapStyles}}
|
||||
defaultOptions={{ styles: mapStyles }}
|
||||
>
|
||||
|
||||
{listingData.Properties.map(house => (
|
||||
{listingData.Properties.map(house => (
|
||||
|
||||
<Marker
|
||||
key={house.LISTING_ID}
|
||||
position={{
|
||||
lat: house.coordinates[1],
|
||||
lng: house.coordinates[0]
|
||||
|
||||
}}
|
||||
<Marker
|
||||
key={house.LISTING_ID}
|
||||
position={{
|
||||
lat: house.coordinates[1],
|
||||
lng: house.coordinates[0]
|
||||
|
||||
onClick={() => {
|
||||
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 && (
|
||||
|
||||
<InfoWindow
|
||||
position={{
|
||||
lat: selectedProperty.coordinates[1],
|
||||
lng: selectedProperty.coordinates[0]
|
||||
|
||||
}}
|
||||
onCloseClick={() => {
|
||||
setSelectedProperty(null);
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2>{selectedProperty.ADDRESS}</h2>
|
||||
<p> {selectedProperty.DESC}</p>
|
||||
<div>
|
||||
<div class="row">
|
||||
|
||||
<div className="col-6">
|
||||
/>
|
||||
|
||||
|
||||
|
||||
))}
|
||||
|
||||
|
||||
{selectedProperty && (
|
||||
|
||||
<InfoWindow
|
||||
position={{
|
||||
lat: selectedProperty.coordinates[1],
|
||||
lng: selectedProperty.coordinates[0]
|
||||
|
||||
}}
|
||||
onCloseClick={() => {
|
||||
setSelectedProperty(null);
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<h2>{selectedProperty.ADDRESS}</h2>
|
||||
<p> {selectedProperty.DESC}</p>
|
||||
<div>
|
||||
<div class="row">
|
||||
|
||||
<div className="col-6">
|
||||
<i class="fas fa-bed fa-3x"></i> <span class="popup_nums"> 1 </span>
|
||||
<i class="fas fa-bath fa-3x"></i> <span class="popup_nums"> 2</span>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div className="col-6 booking_button">
|
||||
</div>
|
||||
|
||||
<div className="col-6 booking_button">
|
||||
<button>Show Listing</button>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</InfoWindow>
|
||||
|
||||
)}
|
||||
|
||||
|
||||
</div>
|
||||
</InfoWindow>
|
||||
|
||||
)}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</GoogleMap>
|
||||
|
||||
|
||||
|
||||
|
||||
);
|
||||
|
||||
}
|
||||
|
|
@ -113,12 +113,12 @@ class ListingsPage extends Component {
|
|||
render() {
|
||||
return (
|
||||
|
||||
<div className="listings">
|
||||
<div className="listings">
|
||||
|
||||
<section class="colored-section2" id="cta">
|
||||
<section class="colored-section2" id="cta">
|
||||
|
||||
|
||||
{/*
|
||||
{/*
|
||||
|
||||
|
||||
|
||||
|
|
@ -153,41 +153,45 @@ class ListingsPage extends Component {
|
|||
|
||||
</div>
|
||||
*/}
|
||||
|
||||
<div class="row">
|
||||
|
||||
<div class="col-12">
|
||||
<div class="row">
|
||||
|
||||
<h2> Map </h2>
|
||||
|
||||
<div style={{ width: "100vm", height: "800px" }}>
|
||||
<MapWrapped
|
||||
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
|
||||
<div class="col-12">
|
||||
|
||||
<section className="colored-section" id="features">
|
||||
<div className="container-fluid">
|
||||
<h2> Map </h2>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div style={{ width: "100vm", height: "800px" }}>
|
||||
<MapWrapped
|
||||
googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=
|
||||
AIzaSyC5TiZoTEwEcB_HUZRhe_rXrcSWW1Z5x8I`}
|
||||
loadingElement={<div style={{ height: `100%` }} />}
|
||||
containerElement={<div style={{ height: `100%` }} />}
|
||||
mapElement={<div style={{ height: `100%` }} />}
|
||||
/>
|
||||
loadingElement={<div style={{ height: `100%` }} />}
|
||||
containerElement={<div style={{ height: `100%` }} />}
|
||||
mapElement={<div style={{ height: `100%` }} />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
);
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
.Navbar{
|
||||
background-color: pink;
|
||||
background-color: rgb(56, 55, 55);
|
||||
padding-top: 20px;
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
Loading…
Reference in a new issue