Skip to content

L
landingPage-Nexpie
Commit c3efa56c by HaOuiha
Options

responsive for language toggle &change lib fullpage

parent 337c5142
Showing with 443 additions and 261 deletions
.prettierrc 0 → 100644
{
"printWidth": 120,
"trailingComma": "es5",
"tabWidth": 4,
"singleQuote": true,
"jsxBracketSameLine": true,
"useTabs": true
}
package.json
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
"@babel/cli": "^7.5.5", "@babel/cli": "^7.5.5",
"babel-plugin-react-intl": "^4.1.3", "babel-plugin-react-intl": "^4.1.3",
"bulma": "^0.7.5", "bulma": "^0.7.5",
"fullpage-react": "^3.1.0",
"node-sass": "^4.12.0", "node-sass": "^4.12.0",
"node-sass-chokidar": "1.3.5", "node-sass-chokidar": "1.3.5",
"prop-types": "^15.7.2", "prop-types": "^15.7.2",
......
src/components/Flag.js
import React from 'react'; import React from 'react';
import ReactCountryFlag from 'react-country-flag'; import ReactCountryFlag from 'react-country-flag';
const Flag = ({ nation }) => ( const Flag = ({ nation, style }) => (
<ReactCountryFlag <ReactCountryFlag
styleProps={{ styleProps={{
width: 16, width: 16,
...@@ -10,6 +10,7 @@ const Flag = ({ nation }) => ( ...@@ -10,6 +10,7 @@ const Flag = ({ nation }) => (
alignItems: 'center', alignItems: 'center',
marginBottom: 4, marginBottom: 4,
marginRight: 8, marginRight: 8,
...style,
}} }}
code={nation} code={nation}
svg 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 Navbar from 'react-bulma-components/lib/components/navbar';
import Image from "react-bulma-components/lib/components/image"; import Image from 'react-bulma-components/lib/components/image';
import Button from "react-bulma-components/lib/components/button"; import Button from 'react-bulma-components/lib/components/button';
import Dropdown from "react-bulma-components/lib/components/dropdown"; import Dropdown from 'react-bulma-components/lib/components/dropdown';
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from 'react-intl';
import { connect } from "react-redux"; import { connect } from 'react-redux';
import { setLanguage } from "../redux/actions/localeAction"; import { setLanguage } from '../redux/actions/localeAction';
import logo from "assets/logo.png"; import logo from 'assets/logo.png';
import Flag from "./Flag"; import Flag from './Flag';
import WindowDimensions from '../utils/WindowDimension';
const ButtonNavs = [ const ButtonNavs = [
{ index: 0, name: <FormattedMessage id="BottomNav.Home" /> }, { index: 0, name: <FormattedMessage id="BottomNav.Home" /> },
...@@ -18,53 +19,46 @@ const ButtonNavs = [ ...@@ -18,53 +19,46 @@ const ButtonNavs = [
{ index: 4, name: <FormattedMessage id="BottomNav.Customer" /> }, { index: 4, name: <FormattedMessage id="BottomNav.Customer" /> },
{ index: 5, name: <FormattedMessage id="BottomNav.Packages" /> }, { index: 5, name: <FormattedMessage id="BottomNav.Packages" /> },
{ index: 6, name: ["EN", "TH"] }, { index: 6, name: ['EN', 'TH'] },
{ index: 7, name: <FormattedMessage id="GoToDashboard" /> } { index: 7, name: <FormattedMessage id="GoToDashboard" /> },
]; ];
class HeaderComponent extends Component { class HeaderComponent extends Component {
state = { state = {
activeIndex: 0, activeIndex: 0,
open: false open: false,
}; };
renderButtonNavs = () => { renderButtonNavs = () => {
const { language } = this.props; // const { language } = this.props;
let NavItems = []; let NavItems = [];
NavItems = ButtonNavs.filter(firstSection => firstSection.index <= 5).map( NavItems = ButtonNavs.filter(ButtonNav => ButtonNav.index <= 5).map((firstSection, index) => {
(firstSection, index) => {
const { activeIndex } = this.state; const { activeIndex } = this.state;
return ( return (
<Navbar.Item key={`Button${index}`} renderAs="a" href="#"> <Navbar.Item key={`Button${index}`} renderAs="a" href="#">
<Button <Button fullwidth color={index === activeIndex ? 'primary' : 'white'}>
fullwidth
color={index === activeIndex ? "primary" : "white"}
>
{firstSection.name} {firstSection.name}
</Button> </Button>
</Navbar.Item> </Navbar.Item>
); );
} });
);
NavItems.push( const renderToggleLanguage = () => (
<Navbar.Item <Navbar.Item
style={{ style={{
display: "flex", display: 'flex',
flex: 1, flex: 1,
justifyContent: "center", justifyContent: 'center',
alignContent: "center" alignContent: 'center',
}} }}
href="#" href="#">
>
<Dropdown <Dropdown
value={language} value={this.props.language}
color={"white"} color={'white'}
onChange={value => { onChange={value => {
this.props.setLanguage(value); this.props.setLanguage(value);
}} }}>
>
<Dropdown.Item value="en"> <Dropdown.Item value="en">
<Flag nation="gb" /> <Flag nation="gb" />
{ButtonNavs[6].name[0]} {ButtonNavs[6].name[0]}
...@@ -74,9 +68,34 @@ class HeaderComponent extends Component { ...@@ -74,9 +68,34 @@ class HeaderComponent extends Component {
{ButtonNavs[6].name[1]} {ButtonNavs[6].name[1]}
</Dropdown.Item> </Dropdown.Item>
</Dropdown> </Dropdown>
</Navbar.Item>, </Navbar.Item>
);
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="#"> <Navbar.Item href="#">
<Button style={{ paddingVertical: "0.1em" }} fullwidth color={"light"}> <Button style={{ paddingVertical: '0.1em' }} fullwidth color={'light'}>
{ButtonNavs[7].name} {ButtonNavs[7].name}
</Button> </Button>
</Navbar.Item> </Navbar.Item>
...@@ -87,26 +106,15 @@ class HeaderComponent extends Component { ...@@ -87,26 +106,15 @@ class HeaderComponent extends Component {
render() { render() {
const { open } = this.state; const { open } = this.state;
return ( return (
<Navbar <Navbar fixed={'top'} transparent={true} active={open} style={{ padding: '0.5rem 2rem' }}>
// fixed={"top"}
transparent={true}
active={open}
style={{ padding: "0.5rem 2rem" }}
>
<Navbar.Brand> <Navbar.Brand>
<Navbar.Item renderAs="a" href="#"> <Navbar.Item renderAs="a" href="#">
<Image src={logo} style={{ width: 170 }} /> <Image src={logo} style={{ width: 170 }} />
</Navbar.Item> </Navbar.Item>
<Navbar.Burger <Navbar.Burger onClick={() => this.setState(prevState => ({ open: !prevState.open }))} />
onClick={() =>
this.setState(prevState => ({ open: !prevState.open }))
}
/>
</Navbar.Brand> </Navbar.Brand>
<Navbar.Menu> <Navbar.Menu>
<Navbar.Container position="end"> <Navbar.Container position="end">{this.renderButtonNavs()}</Navbar.Container>
{this.renderButtonNavs()}
</Navbar.Container>
</Navbar.Menu> </Navbar.Menu>
</Navbar> </Navbar>
); );
...@@ -114,12 +122,14 @@ class HeaderComponent extends Component { ...@@ -114,12 +122,14 @@ class HeaderComponent extends Component {
} }
const mapDispatchToProps = { const mapDispatchToProps = {
setLanguage setLanguage,
}; };
const mapStateToProps = state => ({ language: state.localeReducer.language }); const mapStateToProps = state => ({ language: state.localeReducer.language });
const Header = WindowDimensions(HeaderComponent);
export default connect( export default connect(
mapStateToProps, mapStateToProps,
mapDispatchToProps mapDispatchToProps
)(HeaderComponent); )(Header);
src/components/Home/About.js
import React from "react"; import React from 'react';
import WindowDimensions from "components/utils/WindowDimension"; import WindowDimensions from '../../utils/WindowDimension';
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from 'react-intl';
const About = ({ isMobileSized }) => { const About = ({ isMobileSized }) => {
return ( return (
<div <div
style={{ style={{
display: "flex", display: 'flex',
flexDirection: isMobileSized ? "column" : "row" flexDirection: isMobileSized ? 'column' : 'row',
// height: "90%" // height: "90%"
}} }}
className="content-width section" className="content-width section">
>
{isMobileSized ? null : <div style={{ flex: 1 }} />} {isMobileSized ? null : <div style={{ flex: 1 }} />}
<div <div
style={{ style={{
flex: 1, flex: 1,
padding: isMobileSized ? "10px 20px 80px" : "60", padding: isMobileSized ? '10px 20px 80px' : '60',
display: "flex", display: 'flex',
flexDirection: "column", flexDirection: 'column',
justifyContent: "center" justifyContent: 'center',
}} }}>
>
<h1 className="title"> <h1 className="title">
<FormattedMessage id="About.Title" /> <FormattedMessage id="About.Title" />
</h1> </h1>
<p className="descriptionStyle" style={{ margin: "50px 0" }}> <p className="descriptionStyle" style={{ margin: '50px 0' }}>
<FormattedMessage id="About.Descrip1" /> <FormattedMessage id="About.Descrip1" />
</p> </p>
<p className="descriptionStyle"> <p className="descriptionStyle">
......
src/components/Home/Banner.js
import React from "react"; import React from 'react';
export default class Banner extends React.Component { export default class Banner extends React.Component {
render() { render() {
...@@ -7,9 +7,8 @@ export default class Banner extends React.Component { ...@@ -7,9 +7,8 @@ export default class Banner extends React.Component {
<div <div
className="section" className="section"
style={{ style={{
background: "linear-gradient(to right bottom, #194db7, #3fd4e6)" background: 'linear-gradient(to right bottom, #194db7, #3fd4e6)',
}} }}>
>
<div className="content-width"> <div className="content-width">
<div className="banner-text-container"> <div className="banner-text-container">
<h1 className="banner-title">NEXPIE IOT Platform</h1> <h1 className="banner-title">NEXPIE IOT Platform</h1>
......
src/components/Home/Features.js
import React from "react"; import React from 'react';
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from 'react-intl';
const feature = [ const feature = [
{ {
title: <FormattedMessage id="Monitor.Title" />, title: <FormattedMessage id="Monitor.Title" />,
description: <FormattedMessage id="Monitor.Descrip" /> description: <FormattedMessage id="Monitor.Descrip" />,
}, },
{ {
title: <FormattedMessage id="Trigger.Title" />, title: <FormattedMessage id="Trigger.Title" />,
description: <FormattedMessage id="Trigger.Descrip" /> description: <FormattedMessage id="Trigger.Descrip" />,
}, },
{ {
title: <FormattedMessage id="Control.Title" />, title: <FormattedMessage id="Control.Title" />,
description: <FormattedMessage id="Control.Descrip" /> description: <FormattedMessage id="Control.Descrip" />,
}, },
{ {
title: <FormattedMessage id="Hook.Title" />, title: <FormattedMessage id="Hook.Title" />,
description: <FormattedMessage id="Hook.Descrip" /> description: <FormattedMessage id="Hook.Descrip" />,
}, },
{ {
title: <FormattedMessage id="Storage.Title" />, title: <FormattedMessage id="Storage.Title" />,
description: <FormattedMessage id="Storage.Descrip" /> description: <FormattedMessage id="Storage.Descrip" />,
} },
]; ];
const Card = props => { const Card = props => {
return ( return (
...@@ -44,28 +44,20 @@ export default class Features extends React.Component { ...@@ -44,28 +44,20 @@ export default class Features extends React.Component {
<div <div
className="section content-width" className="section content-width"
style={{ style={{
flexDirection: "column", flexDirection: 'column',
alignItems: "center", alignItems: 'center',
justifyContent: "space-evenly", justifyContent: 'space-evenly',
paddingBottom: "60px" paddingBottom: '60px',
}} }}>
>
<h1 className="title"> <h1 className="title">
<FormattedMessage id="BottomNav.Features" /> <FormattedMessage id="BottomNav.Features" />
</h1> </h1>
<p <p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
className="descriptionStyle"
style={{ textAlign: "center", maxWidth: 1140 }}
>
<FormattedMessage id="Feature.Descrip" /> <FormattedMessage id="Feature.Descrip" />
</p> </p>
<div className="feature-container"> <div className="feature-container">
{feature.map((item, index) => ( {feature.map((item, index) => (
<Card <Card key={index} title={item.title} description={item.description} />
key={index}
title={item.title}
description={item.description}
/>
))} ))}
{oddItem === 1 ? <div className="feature-card-hidden" /> : <></>} {oddItem === 1 ? <div className="feature-card-hidden" /> : <></>}
</div> </div>
......
src/components/Home/Packages.js
import React from "react"; import React from 'react';
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from 'react-intl';
import OwlCarousel from "react-owl-carousel"; import OwlCarousel from 'react-owl-carousel';
const options = { const options = {
center: true, center: true,
responsiveClass: true, responsiveClass: true,
...@@ -8,15 +8,15 @@ const options = { ...@@ -8,15 +8,15 @@ const options = {
responsive: { responsive: {
0: { 0: {
items: 1, items: 1,
loop: true loop: true,
}, },
768: { 768: {
items: 2 items: 2,
}, },
992: { 992: {
items: 3 items: 3,
} },
} },
}; };
const Card = () => { const Card = () => {
return ( return (
...@@ -58,7 +58,7 @@ const Card = () => { ...@@ -58,7 +58,7 @@ const Card = () => {
}; };
export default class Packages extends React.Component { export default class Packages extends React.Component {
state = { state = {
activeTab: "tab1" activeTab: 'tab1',
}; };
render() { render() {
...@@ -66,13 +66,12 @@ export default class Packages extends React.Component { ...@@ -66,13 +66,12 @@ export default class Packages extends React.Component {
<div <div
className="section content-width" className="section content-width"
style={{ style={{
flexDirection: "column", flexDirection: 'column',
alignItems: "center", alignItems: 'center',
justifyContent: "space-evenly", justifyContent: 'space-evenly',
paddingBottom: "60px", paddingBottom: '60px',
overflow: "hidden" overflow: 'hidden',
}} }}>
>
<h1 className="title"> <h1 className="title">
<FormattedMessage id="Packages.Title" /> <FormattedMessage id="Packages.Title" />
</h1> </h1>
...@@ -80,33 +79,31 @@ export default class Packages extends React.Component { ...@@ -80,33 +79,31 @@ export default class Packages extends React.Component {
<div <div
onClick={() => { onClick={() => {
this.setState({ this.setState({
activeTab: "tab1" activeTab: 'tab1',
}); });
}} }}
className={this.state.activeTab === "tab1" ? "active tab" : "tab"} className={this.state.activeTab === 'tab1' ? 'active tab' : 'tab'}>
>
Public Platform (sharing resources) Public Platform (sharing resources)
</div> </div>
<div <div
onClick={() => { onClick={() => {
this.setState({ this.setState({
activeTab: "tab2" activeTab: 'tab2',
}); });
}} }}
className={this.state.activeTab === "tab2" ? "active tab" : "tab"} className={this.state.activeTab === 'tab2' ? 'active tab' : 'tab'}>
>
Private Platform (dedicated resources) Private Platform (dedicated resources)
</div> </div>
</div> </div>
<div> <div>
<OwlCarousel className="owl-theme" {...options}> <OwlCarousel className="owl-theme" {...options}>
{this.state.activeTab === "tab1" && {this.state.activeTab === 'tab1' &&
[1, 2, 3].map((item, index) => ( [1, 2, 3].map((item, index) => (
<div className="item center"> <div className="item center">
<Card /> <Card />
</div> </div>
))} ))}
{this.state.activeTab === "tab2" && ( {this.state.activeTab === 'tab2' && (
<div className="row"> <div className="row">
{[1, 2, 3].map((item, index) => ( {[1, 2, 3].map((item, index) => (
<Card /> <Card />
......
src/components/Home/Services.js
import React from "react"; import React from 'react';
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from 'react-intl';
const Card = () => { const Card = () => {
return ( return (
...@@ -11,9 +11,7 @@ const Card = () => { ...@@ -11,9 +11,7 @@ const Card = () => {
</div> </div>
<div className="service-wrapper"> <div className="service-wrapper">
<h1 className="service-title">Connectivity</h1> <h1 className="service-title">Connectivity</h1>
<p className="service-description"> <p className="service-description">Connecting your device with NEXPIE IoT platform.</p>
Connecting your device with NEXPIE IoT platform.
</p>
</div> </div>
</div> </div>
); );
...@@ -24,23 +22,18 @@ export default class Services extends React.Component { ...@@ -24,23 +22,18 @@ export default class Services extends React.Component {
<div <div
className="section content-width" className="section content-width"
style={{ style={{
flexDirection: "column", flexDirection: 'column',
alignItems: "center", alignItems: 'center',
justifyContent: "space-evenly", justifyContent: 'space-evenly',
paddingBottom: "60px", paddingBottom: '60px',
overflow: "hidden" overflow: 'hidden',
}} }}>
>
<h1 className="title"> <h1 className="title">
<FormattedMessage id="Services.Title" /> <FormattedMessage id="Services.Title" />
</h1> </h1>
<p <p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
className="descriptionStyle" NEXPIE provide the Internet of Things (IoT) technology tools for helping your organization to
style={{ textAlign: "center", maxWidth: 1140 }} achieve the most benefit in Commercial Marketing.
>
NEXPIE provide the Internet of Things (IoT) technology tools for
helping your organization to achieve the most benefit in Commercial
Marketing.
</p> </p>
<div className="row"> <div className="row">
{[1, 2, 3].map((item, index) => ( {[1, 2, 3].map((item, index) => (
......
src/components/Home/WhyUs.js
import React from "react"; import React from 'react';
import { FormattedMessage } from "react-intl"; import { FormattedMessage } from 'react-intl';
import { hidden } from "ansi-colors"; // import { hidden } from 'ansi-colors';
const Card = () => { const Card = () => {
return ( return (
<div className="why-card"> <div className="why-card">
<figure className="image is-128x128"> <figure className="image is-128x128">
<img <img className="is-rounded" alt="" src="https://bulma.io/images/placeholders/128x128.png" />
className="is-rounded"
alt=""
src="https://bulma.io/images/placeholders/128x128.png"
/>
</figure> </figure>
<h1 className="why-title">Connectivity</h1> <h1 className="why-title">Connectivity</h1>
<p className="why-description" style={{ textAlign: "center" }}> <p className="why-description" style={{ textAlign: 'center' }}>
Connecting your device with NEXPIE IoT platform. Connecting your device with NEXPIE IoT platform.
</p> </p>
</div> </div>
...@@ -25,20 +21,16 @@ export default class WhyUs extends React.Component { ...@@ -25,20 +21,16 @@ export default class WhyUs extends React.Component {
<div <div
className="section content-width" className="section content-width"
style={{ style={{
flexDirection: "column", flexDirection: 'column',
alignItems: "center", alignItems: 'center',
justifyContent: "space-evenly", justifyContent: 'space-evenly',
paddingBottom: "60px", paddingBottom: '60px',
overflow: "hidden" overflow: 'hidden',
}} }}>
>
<h1 className="title"> <h1 className="title">
<FormattedMessage id="Why.Title" /> <FormattedMessage id="Why.Title" />
</h1> </h1>
<p <p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
className="descriptionStyle"
style={{ textAlign: "center", maxWidth: 1140 }}
>
<FormattedMessage id="Why.Descrip" /> <FormattedMessage id="Why.Descrip" />
</p> </p>
<div className="row"> <div className="row">
......
src/components/Navbar.js
...@@ -9,15 +9,15 @@ export default class NavbarComponent extends Component { ...@@ -9,15 +9,15 @@ export default class NavbarComponent extends Component {
<Navbar fixed={'top'} style={{ backgroundColor: '#f8f8f8', padding: '0px 4%' }}> <Navbar fixed={'top'} style={{ backgroundColor: '#f8f8f8', padding: '0px 4%' }}>
<IconContext.Provider value={{ color: '#999999' }}> <IconContext.Provider value={{ color: '#999999' }}>
<Navbar.Container> <Navbar.Container>
<Navbar.Item href='#' renderAs='span'> <Navbar.Item href="#" renderAs="span">
<FiMapPin /> <FiMapPin />
<Text>Thai Summit Tower 14th Floor</Text> <Text>Thai Summit Tower 14th Floor</Text>
</Navbar.Item> </Navbar.Item>
<Navbar.Item href='#' renderAs='span'> <Navbar.Item href="#" renderAs="span">
<FiSmartphone /> <FiSmartphone />
<Text>+6661-421-1289</Text> <Text>+6661-421-1289</Text>
</Navbar.Item> </Navbar.Item>
<Navbar.Item href='#' renderAs='span'> <Navbar.Item href="#" renderAs="span">
<FiMail /> <FiMail />
<Text>contact@nexpie.com</Text> <Text>contact@nexpie.com</Text>
</Navbar.Item> </Navbar.Item>
...@@ -66,7 +66,7 @@ class CustomControls extends Component { ...@@ -66,7 +66,7 @@ class CustomControls extends Component {
onClick: () => scrollToSlide(i), onClick: () => scrollToSlide(i),
}; };
slidesNumbers.push( slidesNumbers.push(
<button type='button' {...buttonProps}> <button type="button" {...buttonProps}>
{i + 1} {i + 1}
</button> </button>
); );
...@@ -80,11 +80,11 @@ class CustomControls extends Component { ...@@ -80,11 +80,11 @@ class CustomControls extends Component {
return ( return (
<div className={className} style={style}> <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 previous
</button> </button>
{this.renderSlidesNumbers(currentSlideIndex)} {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 next
</button> </button>
</div> </div>
......
src/components/SimpleSlider.js
import React from "react"; import React from 'react';
import ReactDOM from "react-dom"; import OwlCarousel from 'react-owl-carousel';
import OwlCarousel from "react-owl-carousel";
const options = { const options = {
items: 4 items: 4,
}; };
class SimpleSlider extends React.Component { class SimpleSlider extends React.Component {
render() { render() {
return ( return (
<OwlCarousel className="owl-theme" loop margin={10} nav {...options}> <OwlCarousel className="owl-theme" loop margin={10} nav {...options}>
<div class="item"> <div class="item">
<img src="1.jpg" /> <img src="1.jpg" alt="img1" />
</div> </div>
<div class="item"> <div class="item">
<img src="2.jpg" /> <img src="2.jpg" alt="img2" />
</div> </div>
<div class="item"> <div class="item">
<img src="3.jpg" /> <img src="3.jpg" alt="img3" />
</div> </div>
<div class="item"> <div class="item">
<img src="4.jpg" /> <img src="4.jpg" alt="img4" />
</div> </div>
<div class="item"> <div class="item">
<img src="5.jpg" /> <img src="5.jpg" alt="img5" />
</div> </div>
</OwlCarousel> </OwlCarousel>
); );
......
src/pages/Homepage.js
import React, { Component } from "react"; import React, { Component } from 'react';
import Banner from "../components/Home/Banner"; import Banner from '../components/Home/Banner';
import About from "../components/Home/About"; import About from '../components/Home/About';
import { Scroller, Section } from "react-fully-scrolled"; import WhyUs from 'components/Home/WhyUs';
import WhyUs from "components/Home/WhyUs"; import Services from 'components/Home/Services';
import Services from "components/Home/Services"; import Features from 'components/Home/Features';
import Features from "components/Home/Features"; import Packages from 'components/Home/Packages';
import Packages from "components/Home/Packages"; import WindowDimension from '../utils/WindowDimension';
import WindowDimension from "../components/utils/WindowDimension"; import SimpleSlider from 'components/SimpleSlider';
import SimpleSlider from "components/SimpleSlider"; import 'owl.carousel/dist/assets/owl.carousel.css';
import "owl.carousel/dist/assets/owl.carousel.css"; import 'owl.carousel/dist/assets/owl.theme.default.css';
import "owl.carousel/dist/assets/owl.theme.default.css"; import { Fullpage, Slide } from 'fullpage-react';
const fullPageOptions = {
scrollSensitivity: 0,
touchSensitivity: 0,
scrollSpeed: 375,
hideScrollBars: false,
enableArrowKeys: true,
};
const baseStyle = {
alignItems: 'center',
display: 'flex',
justifyContent: 'center',
};
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 { class Homepage extends Component {
constructor(props) { constructor(props) {
...@@ -22,13 +58,8 @@ class Homepage extends Component { ...@@ -22,13 +58,8 @@ class Homepage extends Component {
}; };
render() { render() {
const baseStyle = {
display: "flex",
justifyContent: "stretch"
};
return ( return (
<div> <>
{this.props.windowWidth <= 768 ? ( {this.props.windowWidth <= 768 ? (
<> <>
<Banner /> <Banner />
...@@ -39,62 +70,9 @@ class Homepage extends Component { ...@@ -39,62 +70,9 @@ class Homepage extends Component {
<Packages /> <Packages />
</> </>
) : ( ) : (
<Scroller <Fullpage ref={this.fullPageRef} {...fullPageOptions} />
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> </>
); );
} }
} }
......
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 '~react-bulma-components/src/index.sass';
@import "_variables.scss"; @import '_variables.scss';
// @import '../../node_modules/bulma/bulma.sass'; // @import '../../node_modules/bulma/bulma.sass';
// @import '../../node_modules/bulma/sass/utilities/_all.sass'; // @import '../../node_modules/bulma/sass/utilities/_all.sass';
// @import '../../node_modules/bulma/sass/base/_all.sass'; // @import '../../node_modules/bulma/sass/base/_all.sass';
...@@ -8,8 +8,13 @@ ...@@ -8,8 +8,13 @@
// @import '../../node_modules/bulma/sass/elements/title.sass'; // @import '../../node_modules/bulma/sass/elements/title.sass';
// @import '../../node_modules/bulma/sass/form/_all.sass'; // @import '../../node_modules/bulma/sass/form/_all.sass';
body { body {
font-family: "Kanit", sans-serif; font-family: 'Kanit', sans-serif;
} }
// ::-webkit-scrollbar {
// display: none;
// }
.dropdown-menu { .dropdown-menu {
min-width: 5rem; min-width: 5rem;
} }
...@@ -360,6 +365,20 @@ body { ...@@ -360,6 +365,20 @@ body {
font-size: 12px; 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 { // .dropdown-item {
// display: 'flex'; // display: 'flex';
// flex: 1; // flex: 1;
......
src/serviceWorker.js
...@@ -15,9 +15,7 @@ const isLocalhost = Boolean( ...@@ -15,9 +15,7 @@ const isLocalhost = Boolean(
// [::1] is the IPv6 localhost address. // [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' || window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4. // 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match( window.location.hostname.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
); );
export function register(config) { export function register(config) {
...@@ -104,10 +102,7 @@ function checkValidServiceWorker(swUrl, config) { ...@@ -104,10 +102,7 @@ function checkValidServiceWorker(swUrl, config) {
.then(response => { .then(response => {
// Ensure service worker exists, and that we really are getting a JS file. // Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type'); const contentType = response.headers.get('content-type');
if ( if (response.status === 404 || (contentType != null && contentType.indexOf('javascript') === -1)) {
response.status === 404 ||
(contentType != null && contentType.indexOf('javascript') === -1)
) {
// No service worker found. Probably a different app. Reload the page. // No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => { navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => { registration.unregister().then(() => {
...@@ -120,9 +115,7 @@ function checkValidServiceWorker(swUrl, config) { ...@@ -120,9 +115,7 @@ function checkValidServiceWorker(swUrl, config) {
} }
}) })
.catch(() => { .catch(() => {
console.log( console.log('No internet connection found. App is running in offline mode.');
'No internet connection found. App is running in offline mode.'
);
}); });
} }
......
src/components/utils/WindowDimension.js → src/utils/WindowDimension.js
import React, { Component } from "react"; import React, { Component } from 'react';
export default function WindowDimensions(WrappedComponent) { export default function WindowDimensions(WrappedComponent) {
return class extends Component { return class extends Component {
...@@ -6,11 +6,11 @@ export default function WindowDimensions(WrappedComponent) { ...@@ -6,11 +6,11 @@ export default function WindowDimensions(WrappedComponent) {
componentDidMount() { componentDidMount() {
this.updateWindowDimensions(); this.updateWindowDimensions();
window.addEventListener("resize", this.updateWindowDimensions); window.addEventListener('resize', this.updateWindowDimensions);
} }
componentWillUnmount() { componentWillUnmount() {
window.removeEventListener("resize", this.updateWindowDimensions); window.removeEventListener('resize', this.updateWindowDimensions);
} }
updateWindowDimensions = () => { updateWindowDimensions = () => {
...@@ -23,7 +23,8 @@ export default function WindowDimensions(WrappedComponent) { ...@@ -23,7 +23,8 @@ export default function WindowDimensions(WrappedComponent) {
{...this.props} {...this.props}
windowWidth={this.state.width} windowWidth={this.state.width}
windowHeight={this.state.height} windowHeight={this.state.height}
isMobileSized={this.state.width < 770} isMobileSized={this.state.width <= 769}
isTabletSized={this.state.width <= 1024}
/> />
); );
} }
......
yarn.lock
...@@ -928,7 +928,7 @@ ...@@ -928,7 +928,7 @@
dependencies: dependencies:
regenerator-runtime "^0.13.2" 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" version "7.5.5"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ== integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
...@@ -4394,6 +4394,15 @@ fstream@^1.0.0, fstream@^1.0.12: ...@@ -4394,6 +4394,15 @@ fstream@^1.0.0, fstream@^1.0.12:
mkdirp ">=0.5 0" mkdirp ">=0.5 0"
rimraf "2" 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: function-bind@^1.1.1:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
...@@ -6026,6 +6035,13 @@ json-stringify-safe@~5.0.1: ...@@ -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" resolved "https://registry.yarnpkg.com/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz#1296a2d58fd45f19a0f6ce01d65701e2c735b6eb"
integrity sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus= 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: json3@^3.3.2:
version "3.3.2" version "3.3.2"
resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1" resolved "https://registry.yarnpkg.com/json3/-/json3-3.3.2.tgz#3c0434743df93e2f5c42aee7b19bcb483575f4e1"
...@@ -8331,6 +8347,11 @@ qs@6.5.2, qs@~6.5.2: ...@@ -8331,6 +8347,11 @@ qs@6.5.2, qs@~6.5.2:
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== 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: querystring-es3@^0.2.0:
version "0.2.1" version "0.2.1"
resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73" resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
...@@ -8474,6 +8495,14 @@ react-error-overlay@^5.1.6: ...@@ -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" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz#0cd73407c5d141f9638ae1e0c63e7b2bf7e9929d"
integrity sha512-X1Y+0jR47ImDVr54Ab6V9eGk0Hnu7fVWGeHQSOXHf/C2pF9c6uy3gef8QUeuUiWlNb0i08InPSE5a/KJzNzw1Q== 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: react-full-page@^0.1.7:
version "0.1.7" version "0.1.7"
resolved "https://registry.yarnpkg.com/react-full-page/-/react-full-page-0.1.7.tgz#bfe8c04c07c2668d70f7399d6641aedae81baa8e" 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 ...@@ -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" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== 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: react-owl-carousel@^2.3.1:
version "2.3.1" version "2.3.1"
resolved "https://registry.yarnpkg.com/react-owl-carousel/-/react-owl-carousel-2.3.1.tgz#5b8e7459289e29e89d4d6cf359ddf05edf050b5f" 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: ...@@ -9159,6 +9198,11 @@ schema-utils@^1.0.0:
ajv-errors "^1.0.0" ajv-errors "^1.0.0"
ajv-keywords "^3.1.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: scss-tokenizer@^0.2.3:
version "0.2.3" version "0.2.3"
resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1" resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
...@@ -9627,6 +9671,11 @@ stream-shift@^1.0.0: ...@@ -9627,6 +9671,11 @@ stream-shift@^1.0.0:
resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952" resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI= 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: string-length@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed" resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
...@@ -10592,6 +10641,11 @@ wide-align@^1.1.0: ...@@ -10592,6 +10641,11 @@ wide-align@^1.1.0:
dependencies: dependencies:
string-width "^1.0.2 || 2" 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: wordwrap@~0.0.2:
version "0.0.3" version "0.0.3"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107" 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