Skip to content

L
landingPage-Nexpie
Commit c3efa56c by HaOuiha
Options

responsive for language toggle &change lib fullpage

parent 337c5142
Showing with 1190 additions and 1008 deletions
.prettierrc 0 → 100644
{
"printWidth": 120,
"trailingComma": "es5",
"tabWidth": 4,
"singleQuote": true,
"jsxBracketSameLine": true,
"useTabs": true
}
package.json
......@@ -7,6 +7,7 @@
"@babel/cli": "^7.5.5",
"babel-plugin-react-intl": "^4.1.3",
"bulma": "^0.7.5",
"fullpage-react": "^3.1.0",
"node-sass": "^4.12.0",
"node-sass-chokidar": "1.3.5",
"prop-types": "^15.7.2",
......
src/components/Flag.js
import React from 'react';
import ReactCountryFlag from 'react-country-flag';
const Flag = ({ nation }) => (
const Flag = ({ nation, style }) => (
<ReactCountryFlag
styleProps={{
width: 16,
......@@ -10,6 +10,7 @@ const Flag = ({ nation }) => (
alignItems: 'center',
marginBottom: 4,
marginRight: 8,
...style,
}}
code={nation}
svg
......
src/components/Header.js
import React, { Component } from "react";
import React, { Component } from 'react';
import Navbar from "react-bulma-components/lib/components/navbar";
import Image from "react-bulma-components/lib/components/image";
import Button from "react-bulma-components/lib/components/button";
import Dropdown from "react-bulma-components/lib/components/dropdown";
import { FormattedMessage } from "react-intl";
import { connect } from "react-redux";
import { setLanguage } from "../redux/actions/localeAction";
import logo from "assets/logo.png";
import Flag from "./Flag";
import Navbar from 'react-bulma-components/lib/components/navbar';
import Image from 'react-bulma-components/lib/components/image';
import Button from 'react-bulma-components/lib/components/button';
import Dropdown from 'react-bulma-components/lib/components/dropdown';
import { FormattedMessage } from 'react-intl';
import { connect } from 'react-redux';
import { setLanguage } from '../redux/actions/localeAction';
import logo from 'assets/logo.png';
import Flag from './Flag';
import WindowDimensions from '../utils/WindowDimension';
const ButtonNavs = [
{ index: 0, name: <FormattedMessage id="BottomNav.Home" /> },
{ index: 1, name: <FormattedMessage id="BottomNav.Docs" /> },
{ index: 2, name: <FormattedMessage id="BottomNav.Features" /> },
{ index: 3, name: <FormattedMessage id="BottomNav.Benefits" /> },
{ index: 4, name: <FormattedMessage id="BottomNav.Customer" /> },
{ index: 5, name: <FormattedMessage id="BottomNav.Packages" /> },
{ index: 0, name: <FormattedMessage id="BottomNav.Home" /> },
{ index: 1, name: <FormattedMessage id="BottomNav.Docs" /> },
{ index: 2, name: <FormattedMessage id="BottomNav.Features" /> },
{ index: 3, name: <FormattedMessage id="BottomNav.Benefits" /> },
{ index: 4, name: <FormattedMessage id="BottomNav.Customer" /> },
{ index: 5, name: <FormattedMessage id="BottomNav.Packages" /> },
{ index: 6, name: ["EN", "TH"] },
{ index: 7, name: <FormattedMessage id="GoToDashboard" /> }
{ index: 6, name: ['EN', 'TH'] },
{ index: 7, name: <FormattedMessage id="GoToDashboard" /> },
];
class HeaderComponent extends Component {
state = {
activeIndex: 0,
open: false
};
state = {
activeIndex: 0,
open: false,
};
renderButtonNavs = () => {
const { language } = this.props;
renderButtonNavs = () => {
// const { language } = this.props;
let NavItems = [];
NavItems = ButtonNavs.filter(firstSection => firstSection.index <= 5).map(
(firstSection, index) => {
const { activeIndex } = this.state;
return (
<Navbar.Item key={`Button${index}`} renderAs="a" href="#">
<Button
fullwidth
color={index === activeIndex ? "primary" : "white"}
>
{firstSection.name}
</Button>
</Navbar.Item>
);
}
);
let NavItems = [];
NavItems = ButtonNavs.filter(ButtonNav => ButtonNav.index <= 5).map((firstSection, index) => {
const { activeIndex } = this.state;
return (
<Navbar.Item key={`Button${index}`} renderAs="a" href="#">
<Button fullwidth color={index === activeIndex ? 'primary' : 'white'}>
{firstSection.name}
</Button>
</Navbar.Item>
);
});
NavItems.push(
<Navbar.Item
style={{
display: "flex",
flex: 1,
justifyContent: "center",
alignContent: "center"
}}
href="#"
>
<Dropdown
value={language}
color={"white"}
onChange={value => {
this.props.setLanguage(value);
}}
>
<Dropdown.Item value="en">
<Flag nation="gb" />
{ButtonNavs[6].name[0]}
</Dropdown.Item>
<Dropdown.Item value="th">
<Flag nation="th" />
{ButtonNavs[6].name[1]}
</Dropdown.Item>
</Dropdown>
</Navbar.Item>,
<Navbar.Item href="#">
<Button style={{ paddingVertical: "0.1em" }} fullwidth color={"light"}>
{ButtonNavs[7].name}
</Button>
</Navbar.Item>
);
return NavItems;
};
const renderToggleLanguage = () => (
<Navbar.Item
style={{
display: 'flex',
flex: 1,
justifyContent: 'center',
alignContent: 'center',
}}
href="#">
<Dropdown
value={this.props.language}
color={'white'}
onChange={value => {
this.props.setLanguage(value);
}}>
<Dropdown.Item value="en">
<Flag nation="gb" />
{ButtonNavs[6].name[0]}
</Dropdown.Item>
<Dropdown.Item value="th">
<Flag nation="th" />
{ButtonNavs[6].name[1]}
</Dropdown.Item>
</Dropdown>
</Navbar.Item>
);
render() {
const { open } = this.state;
return (
<Navbar
// fixed={"top"}
transparent={true}
active={open}
style={{ padding: "0.5rem 2rem" }}
>
<Navbar.Brand>
<Navbar.Item renderAs="a" href="#">
<Image src={logo} style={{ width: 170 }} />
</Navbar.Item>
<Navbar.Burger
onClick={() =>
this.setState(prevState => ({ open: !prevState.open }))
}
/>
</Navbar.Brand>
<Navbar.Menu>
<Navbar.Container position="end">
{this.renderButtonNavs()}
</Navbar.Container>
</Navbar.Menu>
</Navbar>
);
}
const renderToggleLanguageButton = () => (
<Navbar.Item
style={{
display: 'flex',
flex: 1,
justifyContent: 'center',
alignContent: 'center',
}}
href="#">
<Button
fullwidth
color="white"
onClick={() => {
this.props.setLanguage(this.props.language === 'en' ? 'th' : 'en');
}}>
<Flag nation={this.props.language === 'en' ? 'th' : 'gb'} style={{ marginBottom: 0 }} />
{ButtonNavs[6].name[this.props.language === 'en' ? 1 : 0]}
</Button>
</Navbar.Item>
);
NavItems.push(
this.props.isTabletSized ? renderToggleLanguageButton() : renderToggleLanguage(),
<Navbar.Item href="#">
<Button style={{ paddingVertical: '0.1em' }} fullwidth color={'light'}>
{ButtonNavs[7].name}
</Button>
</Navbar.Item>
);
return NavItems;
};
render() {
const { open } = this.state;
return (
<Navbar fixed={'top'} transparent={true} active={open} style={{ padding: '0.5rem 2rem' }}>
<Navbar.Brand>
<Navbar.Item renderAs="a" href="#">
<Image src={logo} style={{ width: 170 }} />
</Navbar.Item>
<Navbar.Burger onClick={() => this.setState(prevState => ({ open: !prevState.open }))} />
</Navbar.Brand>
<Navbar.Menu>
<Navbar.Container position="end">{this.renderButtonNavs()}</Navbar.Container>
</Navbar.Menu>
</Navbar>
);
}
}
const mapDispatchToProps = {
setLanguage
setLanguage,
};
const mapStateToProps = state => ({ language: state.localeReducer.language });
const Header = WindowDimensions(HeaderComponent);
export default connect(
mapStateToProps,
mapDispatchToProps
)(HeaderComponent);
mapStateToProps,
mapDispatchToProps
)(Header);
src/components/Home/About.js
import React from "react";
import WindowDimensions from "components/utils/WindowDimension";
import { FormattedMessage } from "react-intl";
import React from 'react';
import WindowDimensions from '../../utils/WindowDimension';
import { FormattedMessage } from 'react-intl';
const About = ({ isMobileSized }) => {
return (
<div
style={{
display: "flex",
flexDirection: isMobileSized ? "column" : "row"
// height: "90%"
}}
className="content-width section"
>
{isMobileSized ? null : <div style={{ flex: 1 }} />}
return (
<div
style={{
display: 'flex',
flexDirection: isMobileSized ? 'column' : 'row',
// height: "90%"
}}
className="content-width section">
{isMobileSized ? null : <div style={{ flex: 1 }} />}
<div
style={{
flex: 1,
padding: isMobileSized ? "10px 20px 80px" : "60",
display: "flex",
flexDirection: "column",
justifyContent: "center"
}}
>
<h1 className="title">
<FormattedMessage id="About.Title" />
</h1>
<p className="descriptionStyle" style={{ margin: "50px 0" }}>
<FormattedMessage id="About.Descrip1" />
</p>
<p className="descriptionStyle">
<FormattedMessage id="About.Descrip2" />
</p>
</div>
</div>
);
<div
style={{
flex: 1,
padding: isMobileSized ? '10px 20px 80px' : '60',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
}}>
<h1 className="title">
<FormattedMessage id="About.Title" />
</h1>
<p className="descriptionStyle" style={{ margin: '50px 0' }}>
<FormattedMessage id="About.Descrip1" />
</p>
<p className="descriptionStyle">
<FormattedMessage id="About.Descrip2" />
</p>
</div>
</div>
);
};
export default WindowDimensions(About);
src/components/Home/Banner.js
import React from "react";
import React from 'react';
export default class Banner extends React.Component {
render() {
return (
<>
<div
className="section"
style={{
background: "linear-gradient(to right bottom, #194db7, #3fd4e6)"
}}
>
<div className="content-width">
<div className="banner-text-container">
<h1 className="banner-title">NEXPIE IOT Platform</h1>
<div className="banner-descrip-wrapper">
<h2>CONNECT</h2>
<h2>EVERYTHING !</h2>
</div>
</div>
</div>
</div>
</>
);
}
render() {
return (
<>
<div
className="section"
style={{
background: 'linear-gradient(to right bottom, #194db7, #3fd4e6)',
}}>
<div className="content-width">
<div className="banner-text-container">
<h1 className="banner-title">NEXPIE IOT Platform</h1>
<div className="banner-descrip-wrapper">
<h2>CONNECT</h2>
<h2>EVERYTHING !</h2>
</div>
</div>
</div>
</div>
</>
);
}
}
src/components/Home/Features.js
import React from "react";
import { FormattedMessage } from "react-intl";
import React from 'react';
import { FormattedMessage } from 'react-intl';
const feature = [
{
title: <FormattedMessage id="Monitor.Title" />,
description: <FormattedMessage id="Monitor.Descrip" />
},
{
title: <FormattedMessage id="Trigger.Title" />,
description: <FormattedMessage id="Trigger.Descrip" />
},
{
title: <FormattedMessage id="Control.Title" />,
description: <FormattedMessage id="Control.Descrip" />
},
{
title: <FormattedMessage id="Hook.Title" />,
description: <FormattedMessage id="Hook.Descrip" />
},
{
title: <FormattedMessage id="Storage.Title" />,
description: <FormattedMessage id="Storage.Descrip" />
}
{
title: <FormattedMessage id="Monitor.Title" />,
description: <FormattedMessage id="Monitor.Descrip" />,
},
{
title: <FormattedMessage id="Trigger.Title" />,
description: <FormattedMessage id="Trigger.Descrip" />,
},
{
title: <FormattedMessage id="Control.Title" />,
description: <FormattedMessage id="Control.Descrip" />,
},
{
title: <FormattedMessage id="Hook.Title" />,
description: <FormattedMessage id="Hook.Descrip" />,
},
{
title: <FormattedMessage id="Storage.Title" />,
description: <FormattedMessage id="Storage.Descrip" />,
},
];
const Card = props => {
return (
<div className="feature-card row">
<div className="feature-img">
<figure className="image is-64x64">
<img alt="" src="https://bulma.io/images/placeholders/64x64.png" />
</figure>
</div>
<div className="feature-text-wrapper">
<h1 className="feature-title">{props.title}</h1>
<p className="feature-descrip">{props.description}</p>
</div>
</div>
);
return (
<div className="feature-card row">
<div className="feature-img">
<figure className="image is-64x64">
<img alt="" src="https://bulma.io/images/placeholders/64x64.png" />
</figure>
</div>
<div className="feature-text-wrapper">
<h1 className="feature-title">{props.title}</h1>
<p className="feature-descrip">{props.description}</p>
</div>
</div>
);
};
export default class Features extends React.Component {
render() {
const oddItem = feature.length % 2;
return (
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px"
}}
>
<h1 className="title">
<FormattedMessage id="BottomNav.Features" />
</h1>
<p
className="descriptionStyle"
style={{ textAlign: "center", maxWidth: 1140 }}
>
<FormattedMessage id="Feature.Descrip" />
</p>
<div className="feature-container">
{feature.map((item, index) => (
<Card
key={index}
title={item.title}
description={item.description}
/>
))}
{oddItem === 1 ? <div className="feature-card-hidden" /> : <></>}
</div>
</div>
);
}
render() {
const oddItem = feature.length % 2;
return (
<div
className="section content-width"
style={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-evenly',
paddingBottom: '60px',
}}>
<h1 className="title">
<FormattedMessage id="BottomNav.Features" />
</h1>
<p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
<FormattedMessage id="Feature.Descrip" />
</p>
<div className="feature-container">
{feature.map((item, index) => (
<Card key={index} title={item.title} description={item.description} />
))}
{oddItem === 1 ? <div className="feature-card-hidden" /> : <></>}
</div>
</div>
);
}
}
src/components/Home/Packages.js
import React from "react";
import { FormattedMessage } from "react-intl";
import OwlCarousel from "react-owl-carousel";
import React from 'react';
import { FormattedMessage } from 'react-intl';
import OwlCarousel from 'react-owl-carousel';
const options = {
center: true,
responsiveClass: true,
startPosition: 1,
responsive: {
0: {
items: 1,
loop: true
},
768: {
items: 2
},
992: {
items: 3
}
}
center: true,
responsiveClass: true,
startPosition: 1,
responsive: {
0: {
items: 1,
loop: true,
},
768: {
items: 2,
},
992: {
items: 3,
},
},
};
const Card = () => {
return (
<div className="package-card">
<div className="text-wrapper">
<h1 className="plan-title">Standard Plan</h1>
<p className="plan-descrip">This is standard hositng plan</p>
</div>
<div className="price-wrapper">
<div className="price">
<h1>$3</h1>
.99
</div>
<p>/mo</p>
</div>
<div className="package-details">
<div className="package-detail">
<p> Space</p>
<p>30GB</p>
</div>
<div className="package-detail">
<p> FTP User</p>
<p>50</p>
</div>
<div className="package-detail">
<p> Databases</p>
<p>50</p>
</div>
<div className="package-detail">
<p> Adons Domain</p>
<p>5</p>
</div>
</div>
<div className="btn-wrapper">
<div>Choose plan</div>
</div>
</div>
);
return (
<div className="package-card">
<div className="text-wrapper">
<h1 className="plan-title">Standard Plan</h1>
<p className="plan-descrip">This is standard hositng plan</p>
</div>
<div className="price-wrapper">
<div className="price">
<h1>$3</h1>
.99
</div>
<p>/mo</p>
</div>
<div className="package-details">
<div className="package-detail">
<p> Space</p>
<p>30GB</p>
</div>
<div className="package-detail">
<p> FTP User</p>
<p>50</p>
</div>
<div className="package-detail">
<p> Databases</p>
<p>50</p>
</div>
<div className="package-detail">
<p> Adons Domain</p>
<p>5</p>
</div>
</div>
<div className="btn-wrapper">
<div>Choose plan</div>
</div>
</div>
);
};
export default class Packages extends React.Component {
state = {
activeTab: "tab1"
};
state = {
activeTab: 'tab1',
};
render() {
return (
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px",
overflow: "hidden"
}}
>
<h1 className="title">
<FormattedMessage id="Packages.Title" />
</h1>
<div className="tab-container">
<div
onClick={() => {
this.setState({
activeTab: "tab1"
});
}}
className={this.state.activeTab === "tab1" ? "active tab" : "tab"}
>
Public Platform (sharing resources)
</div>
<div
onClick={() => {
this.setState({
activeTab: "tab2"
});
}}
className={this.state.activeTab === "tab2" ? "active tab" : "tab"}
>
Private Platform (dedicated resources)
</div>
</div>
<div>
<OwlCarousel className="owl-theme" {...options}>
{this.state.activeTab === "tab1" &&
[1, 2, 3].map((item, index) => (
<div className="item center">
<Card />
</div>
))}
{this.state.activeTab === "tab2" && (
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card />
))}
</div>
)}
</OwlCarousel>
</div>
</div>
);
}
render() {
return (
<div
className="section content-width"
style={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-evenly',
paddingBottom: '60px',
overflow: 'hidden',
}}>
<h1 className="title">
<FormattedMessage id="Packages.Title" />
</h1>
<div className="tab-container">
<div
onClick={() => {
this.setState({
activeTab: 'tab1',
});
}}
className={this.state.activeTab === 'tab1' ? 'active tab' : 'tab'}>
Public Platform (sharing resources)
</div>
<div
onClick={() => {
this.setState({
activeTab: 'tab2',
});
}}
className={this.state.activeTab === 'tab2' ? 'active tab' : 'tab'}>
Private Platform (dedicated resources)
</div>
</div>
<div>
<OwlCarousel className="owl-theme" {...options}>
{this.state.activeTab === 'tab1' &&
[1, 2, 3].map((item, index) => (
<div className="item center">
<Card />
</div>
))}
{this.state.activeTab === 'tab2' && (
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card />
))}
</div>
)}
</OwlCarousel>
</div>
</div>
);
}
}
src/components/Home/Services.js
import React from "react";
import { FormattedMessage } from "react-intl";
import React from 'react';
import { FormattedMessage } from 'react-intl';
const Card = () => {
return (
<div className="service-card">
<div className="img-wrapper">
<figure className="image is-128x128">
<img alt="" src="https://bulma.io/images/placeholders/128x128.png" />
</figure>
</div>
<div className="service-wrapper">
<h1 className="service-title">Connectivity</h1>
<p className="service-description">
Connecting your device with NEXPIE IoT platform.
</p>
</div>
</div>
);
return (
<div className="service-card">
<div className="img-wrapper">
<figure className="image is-128x128">
<img alt="" src="https://bulma.io/images/placeholders/128x128.png" />
</figure>
</div>
<div className="service-wrapper">
<h1 className="service-title">Connectivity</h1>
<p className="service-description">Connecting your device with NEXPIE IoT platform.</p>
</div>
</div>
);
};
export default class Services extends React.Component {
render() {
return (
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px",
overflow: "hidden"
}}
>
<h1 className="title">
<FormattedMessage id="Services.Title" />
</h1>
<p
className="descriptionStyle"
style={{ textAlign: "center", maxWidth: 1140 }}
>
NEXPIE provide the Internet of Things (IoT) technology tools for
helping your organization to achieve the most benefit in Commercial
Marketing.
</p>
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card key={index} />
))}
</div>
</div>
);
}
render() {
return (
<div
className="section content-width"
style={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-evenly',
paddingBottom: '60px',
overflow: 'hidden',
}}>
<h1 className="title">
<FormattedMessage id="Services.Title" />
</h1>
<p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
NEXPIE provide the Internet of Things (IoT) technology tools for helping your organization to
achieve the most benefit in Commercial Marketing.
</p>
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card key={index} />
))}
</div>
</div>
);
}
}
src/components/Home/WhyUs.js
import React from "react";
import { FormattedMessage } from "react-intl";
import { hidden } from "ansi-colors";
import React from 'react';
import { FormattedMessage } from 'react-intl';
// import { hidden } from 'ansi-colors';
const Card = () => {
return (
<div className="why-card">
<figure className="image is-128x128">
<img
className="is-rounded"
alt=""
src="https://bulma.io/images/placeholders/128x128.png"
/>
</figure>
<h1 className="why-title">Connectivity</h1>
<p className="why-description" style={{ textAlign: "center" }}>
Connecting your device with NEXPIE IoT platform.
</p>
</div>
);
return (
<div className="why-card">
<figure className="image is-128x128">
<img className="is-rounded" alt="" src="https://bulma.io/images/placeholders/128x128.png" />
</figure>
<h1 className="why-title">Connectivity</h1>
<p className="why-description" style={{ textAlign: 'center' }}>
Connecting your device with NEXPIE IoT platform.
</p>
</div>
);
};
export default class WhyUs extends React.Component {
render() {
return (
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px",
overflow: "hidden"
}}
>
<h1 className="title">
<FormattedMessage id="Why.Title" />
</h1>
<p
className="descriptionStyle"
style={{ textAlign: "center", maxWidth: 1140 }}
>
<FormattedMessage id="Why.Descrip" />
</p>
<div className="row">
<div className="why-bg" />
{[1, 2, 3].map((item, index) => (
<Card key={index} />
))}
</div>
</div>
);
}
render() {
return (
<div
className="section content-width"
style={{
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-evenly',
paddingBottom: '60px',
overflow: 'hidden',
}}>
<h1 className="title">
<FormattedMessage id="Why.Title" />
</h1>
<p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
<FormattedMessage id="Why.Descrip" />
</p>
<div className="row">
<div className="why-bg" />
{[1, 2, 3].map((item, index) => (
<Card key={index} />
))}
</div>
</div>
);
}
}
src/components/Navbar.js
......@@ -9,15 +9,15 @@ export default class NavbarComponent extends Component {
<Navbar fixed={'top'} style={{ backgroundColor: '#f8f8f8', padding: '0px 4%' }}>
<IconContext.Provider value={{ color: '#999999' }}>
<Navbar.Container>
<Navbar.Item href='#' renderAs='span'>
<Navbar.Item href="#" renderAs="span">
<FiMapPin />
<Text>Thai Summit Tower 14th Floor</Text>
</Navbar.Item>
<Navbar.Item href='#' renderAs='span'>
<Navbar.Item href="#" renderAs="span">
<FiSmartphone />
<Text>+6661-421-1289</Text>
</Navbar.Item>
<Navbar.Item href='#' renderAs='span'>
<Navbar.Item href="#" renderAs="span">
<FiMail />
<Text>contact@nexpie.com</Text>
</Navbar.Item>
......@@ -66,7 +66,7 @@ class CustomControls extends Component {
onClick: () => scrollToSlide(i),
};
slidesNumbers.push(
<button type='button' {...buttonProps}>
<button type="button" {...buttonProps}>
{i + 1}
</button>
);
......@@ -80,11 +80,11 @@ class CustomControls extends Component {
return (
<div className={className} style={style}>
<button type='button' disabled={currentSlideIndex === 0} onClick={this.props.onPrev}>
<button type="button" disabled={currentSlideIndex === 0} onClick={this.props.onPrev}>
previous
</button>
{this.renderSlidesNumbers(currentSlideIndex)}
<button type='button' disabled={currentSlideIndex === slidesCount - 1} onClick={this.props.onNext}>
<button type="button" disabled={currentSlideIndex === slidesCount - 1} onClick={this.props.onNext}>
next
</button>
</div>
......
src/components/SimpleSlider.js
import React from "react";
import ReactDOM from "react-dom";
import OwlCarousel from "react-owl-carousel";
import React from 'react';
import OwlCarousel from 'react-owl-carousel';
const options = {
items: 4
items: 4,
};
class SimpleSlider extends React.Component {
render() {
return (
<OwlCarousel className="owl-theme" loop margin={10} nav {...options}>
<div class="item">
<img src="1.jpg" />
</div>
<div class="item">
<img src="2.jpg" />
</div>
<div class="item">
<img src="3.jpg" />
</div>
<div class="item">
<img src="4.jpg" />
</div>
<div class="item">
<img src="5.jpg" />
</div>
</OwlCarousel>
);
}
render() {
return (
<OwlCarousel className="owl-theme" loop margin={10} nav {...options}>
<div class="item">
<img src="1.jpg" alt="img1" />
</div>
<div class="item">
<img src="2.jpg" alt="img2" />
</div>
<div class="item">
<img src="3.jpg" alt="img3" />
</div>
<div class="item">
<img src="4.jpg" alt="img4" />
</div>
<div class="item">
<img src="5.jpg" alt="img5" />
</div>
</OwlCarousel>
);
}
}
export default SimpleSlider;
src/pages/Homepage.js
import React, { Component } from "react";
import Banner from "../components/Home/Banner";
import About from "../components/Home/About";
import { Scroller, Section } from "react-fully-scrolled";
import WhyUs from "components/Home/WhyUs";
import Services from "components/Home/Services";
import Features from "components/Home/Features";
import Packages from "components/Home/Packages";
import WindowDimension from "../components/utils/WindowDimension";
import SimpleSlider from "components/SimpleSlider";
import "owl.carousel/dist/assets/owl.carousel.css";
import "owl.carousel/dist/assets/owl.theme.default.css";
import React, { Component } from 'react';
import Banner from '../components/Home/Banner';
import About from '../components/Home/About';
import WhyUs from 'components/Home/WhyUs';
import Services from 'components/Home/Services';
import Features from 'components/Home/Features';
import Packages from 'components/Home/Packages';
import WindowDimension from '../utils/WindowDimension';
import SimpleSlider from 'components/SimpleSlider';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import { Fullpage, Slide } from 'fullpage-react';
class Homepage extends Component {
constructor(props) {
super(props);
this.fullPageRef = React.createRef();
}
const fullPageOptions = {
scrollSensitivity: 0,
touchSensitivity: 0,
scrollSpeed: 375,
hideScrollBars: false,
enableArrowKeys: true,
};
const baseStyle = {
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
};
onControlsClick = () => {
this.fullPageRef.current.scrollToSlide(1);
};
const slides = [
<Slide style={{ ...baseStyle }}>
<Banner />
</Slide>,
<Slide style={{ ...baseStyle }}>
<About />
</Slide>,
<Slide style={{ ...baseStyle }}>
<WhyUs />
</Slide>,
<Slide style={{ ...baseStyle }}>
<Services />
</Slide>,
<Slide style={{ ...baseStyle }}>
<Features />
</Slide>,
<Slide style={{ ...baseStyle }}>
<Packages />
</Slide>,
];
fullPageOptions.slides = slides;
class Homepage extends Component {
constructor(props) {
super(props);
this.fullPageRef = React.createRef();
}
render() {
const baseStyle = {
display: "flex",
justifyContent: "stretch"
};
onControlsClick = () => {
this.fullPageRef.current.scrollToSlide(1);
};
return (
<div>
{this.props.windowWidth <= 768 ? (
<>
<Banner />
<About />
<WhyUs />
<Services />
<Features />
<Packages />
</>
) : (
<Scroller
ref={this.fullPageRef}
curPage={1}
onBeforeScroll={(from, to) => {}}
onAfterScroll={page => {}}
isEnabled={true}
>
<Section>
<Banner />
</Section>
<Section
style={{
...baseStyle
}}
>
<About />
</Section>
<Section
style={{
...baseStyle
}}
>
<WhyUs />
</Section>
<Section
style={{
...baseStyle
}}
>
<Services />
</Section>
<Section
style={{
...baseStyle
}}
>
<Features />
</Section>
<Section
style={{
...baseStyle
}}
>
<Packages />
</Section>
<Section
style={{
...baseStyle
}}
>
footer
<SimpleSlider />
</Section>
</Scroller>
)}
</div>
);
}
render() {
return (
<>
{this.props.windowWidth <= 768 ? (
<>
<Banner />
<About />
<WhyUs />
<Services />
<Features />
<Packages />
</>
) : (
<Fullpage ref={this.fullPageRef} {...fullPageOptions} />
)}
</>
);
}
}
export default WindowDimension(Homepage);
src/pages/HomepageV2.js 0 → 100644
import React, { Component } from 'react';
import Banner from '../components/Home/Banner';
import About from '../components/Home/About';
import { Scroller, Section } from 'react-fully-scrolled';
import WhyUs from 'components/Home/WhyUs';
import Services from 'components/Home/Services';
import Features from 'components/Home/Features';
import Packages from 'components/Home/Packages';
import WindowDimension from '../utils/WindowDimension';
import SimpleSlider from 'components/SimpleSlider';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import { FullPage, Slide } from 'react-full-page';
class Homepage extends Component {
constructor(props) {
super(props);
this.fullPageRef = React.createRef();
}
onControlsClick = () => {
this.fullPageRef.current.scrollToSlide(1);
};
render() {
const baseStyle = {
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
};
return (
<>
{this.props.windowWidth <= 768 ? (
<>
<Banner />
<About />
<WhyUs />
<Services />
<Features />
<Packages />
</>
) : (
<FullPage ref={this.fullPageRef}>
<Slide style={{ ...baseStyle }}>
<Banner />
</Slide>
<Slide style={{ ...baseStyle }}>
<About />
</Slide>
<Slide style={{ ...baseStyle }}>
<WhyUs />
</Slide>
<Slide style={{ ...baseStyle }}>
<Services />
</Slide>
<Slide style={{ ...baseStyle }}>
<Features />
</Slide>
<Slide style={{ ...baseStyle }}>
<Packages />
</Slide>
</FullPage>
)}
</>
);
}
}
export default WindowDimension(Homepage);
src/pages/Homepage_backup.js 0 → 100644
import React, { Component } from 'react';
import Banner from '../components/Home/Banner';
import About from '../components/Home/About';
import { Scroller, Section } from 'react-fully-scrolled';
import WhyUs from 'components/Home/WhyUs';
import Services from 'components/Home/Services';
import Features from 'components/Home/Features';
import Packages from 'components/Home/Packages';
import WindowDimension from '../utils/WindowDimension';
import SimpleSlider from 'components/SimpleSlider';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
class Homepage extends Component {
constructor(props) {
super(props);
this.fullPageRef = React.createRef();
}
onControlsClick = () => {
this.fullPageRef.current.scrollToSlide(1);
};
render() {
const baseStyle = {
display: 'flex',
justifyContent: 'stretch',
};
return (
<div>
{this.props.windowWidth <= 768 ? (
<>
<Banner />
<About />
<WhyUs />
<Services />
<Features />
<Packages />
</>
) : (
<Scroller
ref={this.fullPageRef}
curPage={1}
onBeforeScroll={(from, to) => {}}
onAfterScroll={page => {}}
isEnabled={true}>
<Section>
<Banner />
</Section>
<Section style={{ ...baseStyle }}>
<About />
</Section>
<Section style={{ ...baseStyle }}>
<WhyUs />
</Section>
<Section style={{ ...baseStyle }}>
<Services />
</Section>
<Section style={{ ...baseStyle }}>
<Features />
</Section>
<Section style={{ ...baseStyle }}>
<Packages />
</Section>
<Section style={{ ...baseStyle }}>
footer
<SimpleSlider />
</Section>
</Scroller>
)}
</div>
);
}
}
export default WindowDimension(Homepage);
src/scss/style.scss
@import "~react-bulma-components/src/index.sass";
@import "_variables.scss";
@import '~react-bulma-components/src/index.sass';
@import '_variables.scss';
// @import '../../node_modules/bulma/bulma.sass';
// @import '../../node_modules/bulma/sass/utilities/_all.sass';
// @import '../../node_modules/bulma/sass/base/_all.sass';
......@@ -8,358 +8,377 @@
// @import '../../node_modules/bulma/sass/elements/title.sass';
// @import '../../node_modules/bulma/sass/form/_all.sass';
body {
font-family: "Kanit", sans-serif;
font-family: 'Kanit', sans-serif;
}
// ::-webkit-scrollbar {
// display: none;
// }
.dropdown-menu {
min-width: 5rem;
min-width: 5rem;
}
.button.is-white {
background-color: $white;
border-color: transparent;
color: $grey;
background-color: $white;
border-color: transparent;
color: $grey;
}
.section {
width: 100vw;
min-height: 100vh;
height: 100%;
display: flex;
justify-content: center;
width: 100vw;
min-height: 100vh;
height: 100%;
display: flex;
justify-content: center;
}
.content-width {
width: 1396px;
max-width: 100%;
margin: 0 auto;
position: relative;
padding: 0 15px;
width: 1396px;
max-width: 100%;
margin: 0 auto;
position: relative;
padding: 0 15px;
}
.descriptionStyle {
font-size: 22px;
color: $grey;
font-weight: 100;
font-size: 22px;
color: $grey;
font-weight: 100;
}
.title {
font-size: 35px;
color: $primary;
font-size: 35px;
color: $primary;
}
.banner-text-container {
display: flex;
flex-direction: column;
margin-top: 50px;
.banner-title {
font-size: 72px;
color: $white;
}
.banner-descrip-wrapper {
@extend .row;
justify-content: start !important;
font-size: 60px;
:first-child {
color: #ffcc01;
margin-right: 15px;
}
:nth-child(2) {
color: $white;
}
}
display: flex;
flex-direction: column;
margin-top: 50px;
.banner-title {
font-size: 72px;
color: $white;
}
.banner-descrip-wrapper {
@extend .row;
justify-content: start !important;
font-size: 60px;
:first-child {
color: #ffcc01;
margin-right: 15px;
}
:nth-child(2) {
color: $white;
}
}
}
.why-card {
max-width: 300px;
min-width: 245px;
height: 360px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
background-color: $white;
margin: 30px;
z-index: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
.why-title {
font-size: 24px;
color: $grey;
}
.why-description {
font-size: 18px;
color: $lightgrey;
}
max-width: 300px;
min-width: 245px;
height: 360px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
background-color: $white;
margin: 30px;
z-index: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
.why-title {
font-size: 24px;
color: $grey;
}
.why-description {
font-size: 18px;
color: $lightgrey;
}
}
.service-card {
max-width: 300px;
min-width: 265px;
height: 399px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-color: $white;
margin: 30px;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
&:first-child {
background-color: #42b3e5;
}
&:nth-child(2) {
background-color: #0384ce;
}
&:nth-child(3) {
background-color: #3156a3;
}
.img-wrapper {
background-color: $white;
width: 100%;
height: 100%;
margin: 60 0;
display: flex;
align-items: center;
justify-content: center;
}
.service-wrapper {
width: 100%;
max-width: 300px;
min-width: 265px;
height: 399px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-color: $white;
margin: 30px;
display: flex;
flex-direction: column;
align-items: center;
overflow: hidden;
&:first-child {
background-color: #42b3e5;
}
&:nth-child(2) {
background-color: #0384ce;
}
&:nth-child(3) {
background-color: #3156a3;
}
.img-wrapper {
background-color: $white;
width: 100%;
height: 100%;
margin: 60 0;
display: flex;
align-items: center;
justify-content: center;
}
.service-wrapper {
width: 100%;
max-height: 170px;
color: $white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 30px 40px 40px 40px;
.service-title {
font-size: 24px;
font-weight: 500;
}
.service-description {
font-size: 18px;
text-align: center;
font-weight: 100;
}
}
max-height: 170px;
color: $white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 30px 40px 40px 40px;
.service-title {
font-size: 24px;
font-weight: 500;
}
.service-description {
font-size: 18px;
text-align: center;
font-weight: 100;
}
}
}
.why-bg {
width: 85%;
height: 180px;
border-radius: 6px;
background-image: linear-gradient(276deg, #3473bf, #0891df);
position: absolute;
width: 85%;
height: 180px;
border-radius: 6px;
background-image: linear-gradient(276deg, #3473bf, #0891df);
position: absolute;
}
.feature-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
.feature-card-hidden {
width: 40%;
height: 130px;
margin: 0 35px 20px 35px;
}
.feature-card {
width: 40%;
height: 130px;
margin: 0 35px 20px 35px;
border-radius: 6px;
border: solid 1px rgba(66, 179, 229, 0.35);
background-color: rgba(66, 179, 229, 0.1);
padding: 10px;
.feature-img {
@extend .center;
.image {
margin: 10px;
}
}
.feature-text-wrapper {
padding: 10px 20px 20px 20px;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 400px;
display: flex;
flex-wrap: wrap;
justify-content: center;
.feature-card-hidden {
width: 40%;
height: 130px;
margin: 0 35px 20px 35px;
}
.feature-card {
width: 40%;
height: 130px;
margin: 0 35px 20px 35px;
border-radius: 6px;
border: solid 1px rgba(66, 179, 229, 0.35);
background-color: rgba(66, 179, 229, 0.1);
padding: 10px;
.feature-img {
@extend .center;
.image {
margin: 10px;
}
}
.feature-text-wrapper {
padding: 10px 20px 20px 20px;
display: flex;
flex-direction: column;
justify-content: center;
max-width: 400px;
.feature-title {
font-size: 22px;
letter-spacing: 1px;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(277deg, #3156a3, #3984dd);
}
.feature-descrip {
color: #777777;
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: 4; /* Fallback for non-webkit */
margin: 0 auto;
font-size: 18px;
line-height: 1.33;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
.feature-title {
font-size: 22px;
letter-spacing: 1px;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-image: linear-gradient(277deg, #3156a3, #3984dd);
}
.feature-descrip {
color: #777777;
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: 4; /* Fallback for non-webkit */
margin: 0 auto;
font-size: 18px;
line-height: 1.33;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}
.tab-container {
@extend .row;
.tab {
font-size: 18px;
line-height: 1.56;
text-align: center;
color: #4a4a4a;
padding: 0 0 10px 0;
margin: 0 20px;
cursor: pointer;
}
.active {
color: #05366c;
border-bottom: 1px solid #05366c;
}
@extend .row;
.tab {
font-size: 18px;
line-height: 1.56;
text-align: center;
color: #4a4a4a;
padding: 0 0 10px 0;
margin: 0 20px;
cursor: pointer;
}
.active {
color: #05366c;
border-bottom: 1px solid #05366c;
}
}
.package-card {
width: 300px;
height: 450px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-image: $white;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 20px;
.text-wrapper {
color: #757575;
.plan-title {
font-size: 24px;
font-weight: bold;
text-align: center;
}
.plan-descrip {
font-size: 13px;
text-align: center;
}
}
.price-wrapper {
width: 120px;
height: 120px;
background-image: linear-gradient(306deg, #3473bf, #0891df);
border-radius: 100px;
@extend .center;
flex-direction: column;
color: $white;
align-self: center;
.price {
@extend .row;
font-weight: bold;
font-size: 20px;
align-items: baseline;
h1 {
font-size: 45px;
}
}
}
.package-details {
font-size: 14px;
color: #757575;
.package-detail {
display: flex;
justify-content: space-between;
}
}
.btn-wrapper {
width: 250px;
height: 54px;
border-radius: 6px;
background-image: linear-gradient(277deg, #3473bf, #0891df);
align-self: center;
@extend .center;
color: $white;
cursor: pointer;
div {
font-size: 18px;
font-weight: bold;
text-align: center;
}
}
&:hover {
background-image: linear-gradient(317deg, #3473bf, #0891df);
.text-wrapper {
color: $white;
}
.price-wrapper,
.btn-wrapper {
color: #757575;
background-image: none;
background-color: $white;
}
.package-details {
color: $white;
}
}
width: 300px;
height: 450px;
border-radius: 6px;
box-shadow: 0 52px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 0.5px #f0f0f0;
background-image: $white;
padding: 35px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 0 20px;
.text-wrapper {
color: #757575;
.plan-title {
font-size: 24px;
font-weight: bold;
text-align: center;
}
.plan-descrip {
font-size: 13px;
text-align: center;
}
}
.price-wrapper {
width: 120px;
height: 120px;
background-image: linear-gradient(306deg, #3473bf, #0891df);
border-radius: 100px;
@extend .center;
flex-direction: column;
color: $white;
align-self: center;
.price {
@extend .row;
font-weight: bold;
font-size: 20px;
align-items: baseline;
h1 {
font-size: 45px;
}
}
}
.package-details {
font-size: 14px;
color: #757575;
.package-detail {
display: flex;
justify-content: space-between;
}
}
.btn-wrapper {
width: 250px;
height: 54px;
border-radius: 6px;
background-image: linear-gradient(277deg, #3473bf, #0891df);
align-self: center;
@extend .center;
color: $white;
cursor: pointer;
div {
font-size: 18px;
font-weight: bold;
text-align: center;
}
}
&:hover {
background-image: linear-gradient(317deg, #3473bf, #0891df);
.text-wrapper {
color: $white;
}
.price-wrapper,
.btn-wrapper {
color: #757575;
background-image: none;
background-color: $white;
}
.package-details {
color: $white;
}
}
}
.owl-carousel .owl-stage-outer {
overflow: visible;
overflow: visible;
}
.center {
display: flex;
align-items: center;
justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.row {
display: flex;
flex-direction: row;
justify-content: space-evenly;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
@media screen and (max-width: 1087px) {
.navbar-menu {
box-shadow: 0 8px 16px rgba(10, 10, 10, 0);
}
.navbar-menu {
box-shadow: 0 8px 16px rgba(10, 10, 10, 0);
}
}
@media screen and (max-width: 992px) {
}
@media screen and (max-width: 768px) {
.descriptionStyle {
font-size: 15px;
}
.title {
font-size: 24px;
}
.feature-container .feature-card-hidden {
display: none;
}
.feature-container {
.feature-card {
width: 90%;
&:first-child {
margin-top: 30px;
}
.feature-text-wrapper {
.feature-title {
font-size: 16px;
}
.feature-descrip {
font-size: 12px;
}
}
}
}
.banner-text-container {
align-items: center;
.banner-title {
font-size: 30px;
}
.banner-descrip-wrapper {
font-size: 24px;
margin-top: 30px;
}
}
.tab-container .tab {
font-size: 12px;
}
.descriptionStyle {
font-size: 15px;
}
.title {
font-size: 24px;
}
.feature-container .feature-card-hidden {
display: none;
}
.feature-container {
.feature-card {
width: 90%;
&:first-child {
margin-top: 30px;
}
.feature-text-wrapper {
.feature-title {
font-size: 16px;
}
.feature-descrip {
font-size: 12px;
}
}
}
}
.banner-text-container {
align-items: center;
.banner-title {
font-size: 30px;
}
.banner-descrip-wrapper {
font-size: 24px;
margin-top: 30px;
}
}
.tab-container .tab {
font-size: 12px;
}
}
.navbar-item {
padding: 0.5rem 0.15rem;
}
// @media screen and (min-width: 1023px) {
// .navbar-burger {
// margin-left: auto;
// }
// }
// .navbar-burger {
// margin-left: 0;
// }
// .dropdown-item {
// display: 'flex';
// flex: 1;
......
src/serviceWorker.js
......@@ -11,125 +11,118 @@
// opt-in, read https://bit.ly/CRA-PWA
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
);
export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://bit.ly/CRA-PWA'
);
});
} else {
// Is not localhost. Just register service worker
registerValidSW(swUrl, config);
}
});
}
}
function registerValidSW(swUrl, config) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
if (installingWorker == null) {
return;
}
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the updated precached content has been fetched,
// but the previous service worker will still serve the older
// content until all client tabs are closed.
console.log(
'New content is available and will be used when all ' +
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
);
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onUpdate) {
config.onUpdate(registration);
}
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
// Execute callback
if (config && config.onSuccess) {
config.onSuccess(registration);
}
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type');
if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl, config);
}
})
.catch(() => {
console.log('No internet connection found. App is running in offline mode.');
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}
src/components/utils/WindowDimension.js → src/utils/WindowDimension.js
import React, { Component } from "react";
import React, { Component } from 'react';
export default function WindowDimensions(WrappedComponent) {
return class extends Component {
state = { width: 0, height: 0 };
return class extends Component {
state = { width: 0, height: 0 };
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener("resize", this.updateWindowDimensions);
}
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener('resize', this.updateWindowDimensions);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateWindowDimensions);
}
componentWillUnmount() {
window.removeEventListener('resize', this.updateWindowDimensions);
}
updateWindowDimensions = () => {
this.setState({ width: window.innerWidth, height: window.innerHeight });
};
updateWindowDimensions = () => {
this.setState({ width: window.innerWidth, height: window.innerHeight });
};
render() {
return (
<WrappedComponent
{...this.props}
windowWidth={this.state.width}
windowHeight={this.state.height}
isMobileSized={this.state.width < 770}
/>
);
}
};
render() {
return (
<WrappedComponent
{...this.props}
windowWidth={this.state.width}
windowHeight={this.state.height}
isMobileSized={this.state.width <= 769}
isTabletSized={this.state.width <= 1024}
/>
);
}
};
}
yarn.lock
......@@ -928,7 +928,7 @@
dependencies:
regenerator-runtime "^0.13.2"
"@babel/runtime@^7.1.2", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5":
"@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.5":
version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
......@@ -4394,6 +4394,15 @@ fstream@^1.0.0, fstream@^1.0.12:
mkdirp ">=0.5 0"
rimraf "2"
fullpage-react@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/fullpage-react/-/fullpage-react-3.1.0.tgz#1727b61ed57a3822ff41e5c5e1eb7f7b1a3e19c4"
integrity sha512-GG3OxtaVx1ripZPcExIrnVjhoSfU0MlI2pQTKngtV9qed+bRYQTMaQ/LIYNljNwY9JPK1o4WugXpOvzQ2Hun6g==
dependencies:
react-fns "^1.4.0"
scroll-swipe "0.0.17"
window-or-global "^1.0.1"
function-bind@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
......@@ -6026,6 +6035,13 @@ json-stringify-safe@~5.0.1:
resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=
json2mq@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/json2mq/-/json2mq-0.2.0.tgz#b637bd3ba9eabe122c83e9720483aeb10d2c904a"
integrity sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=
dependencies:
string-convert "^0.2.0"
json3@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
......@@ -8331,6 +8347,11 @@ qs@6.5.2, qs@~6.5.2:
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA==
qs@^6.5.1:
version "6.7.0"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
querystring-es3@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
......@@ -8474,6 +8495,14 @@ react-error-overlay@^5.1.6:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d"
integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q==
react-fns@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/react-fns/-/react-fns-1.4.0.tgz#7b74017f9850849560dfe98f98bba3f7948495b5"
integrity sha512-Cchvz3d6Hh9Ho8SPQOU3/HDeiL/D/QaHozs0X0lePOI2yPoT15GFEVUbz3RHoDsnyUp8HA5A7HAKEPx3nggs8w==
dependencies:
qs "^6.5.1"
react-media "^1.6.1"
react-full-page@^0.1.7:
version "0.1.7"
resolved "https://registry.yarnpkg.com/react-full-page/-/react-full-page-0.1.7.tgz#bfe8c04c07c2668d70f7399d6641aedae81baa8e"
......@@ -8516,6 +8545,16 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
react-media@^1.6.1:
version "1.9.2"
resolved "https://registry.yarnpkg.com/react-media/-/react-media-1.9.2.tgz#423ee12f952e1d69f1b994a58d3cbed21a92b370"
integrity sha512-JUYECMcJIm0V61LSVKd1e+II4ZTYO0GuR7xtlvKETlmThZ416BqZjZdJ1uGqgmMAGFeJ3TG4TX/3Kg4qbR3EJw==
dependencies:
"@babel/runtime" "^7.2.0"
invariant "^2.2.2"
json2mq "^0.2.0"
prop-types "^15.5.10"
react-owl-carousel@^2.3.1:
version "2.3.1"
resolved "https://registry.yarnpkg.com/react-owl-carousel/-/react-owl-carousel-2.3.1.tgz#5b8e7459289e29e89d4d6cf359ddf05edf050b5f"
......@@ -9159,6 +9198,11 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0"
ajv-keywords "^3.1.0"
scroll-swipe@0.0.17:
version "0.0.17"
resolved "https://registry.yarnpkg.com/scroll-swipe/-/scroll-swipe-0.0.17.tgz#31bc1cb74f174a3d596a9a942a05075de54e4285"
integrity sha512-qflUt5hxgFGzZpUoHyrDsXA3nBFEy9yOeDTlg7x826owdEDGlJqIqdjyNuxtCNRHr/Ute8AQ6NdCRw4j3hOqvA==
scss-tokenizer@^0.2.3:
version "0.2.3"
resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
......@@ -9627,6 +9671,11 @@ stream-shift@^1.0.0:
resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
string-convert@^0.2.0:
version "0.2.1"
resolved "https://registry.yarnpkg.com/string-convert/-/string-convert-0.2.1.tgz#6982cc3049fbb4cd85f8b24568b9d9bf39eeff97"
integrity sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c=
string-length@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
......@@ -10592,6 +10641,11 @@ wide-align@^1.1.0:
dependencies:
string-width "^1.0.2 || 2"
window-or-global@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/window-or-global/-/window-or-global-1.0.1.tgz#dbe45ba2a291aabc56d62cf66c45b7fa322946de"
integrity sha1-2+RboqKRqrxW1iz2bEW3+jIpRt4=
wordwrap@~0.0.2:
version "0.0.3"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment