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 @@
"@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" /> },
......@@ -18,53 +19,46 @@ const ButtonNavs = [
{ 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
open: false,
};
renderButtonNavs = () => {
const { language } = this.props;
// const { language } = this.props;
let NavItems = [];
NavItems = ButtonNavs.filter(firstSection => firstSection.index <= 5).map(
(firstSection, index) => {
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"}
>
<Button fullwidth color={index === activeIndex ? 'primary' : 'white'}>
{firstSection.name}
</Button>
</Navbar.Item>
);
}
);
});
NavItems.push(
const renderToggleLanguage = () => (
<Navbar.Item
style={{
display: "flex",
display: 'flex',
flex: 1,
justifyContent: "center",
alignContent: "center"
justifyContent: 'center',
alignContent: 'center',
}}
href="#"
>
href="#">
<Dropdown
value={language}
color={"white"}
value={this.props.language}
color={'white'}
onChange={value => {
this.props.setLanguage(value);
}}
>
}}>
<Dropdown.Item value="en">
<Flag nation="gb" />
{ButtonNavs[6].name[0]}
......@@ -74,9 +68,34 @@ class HeaderComponent extends Component {
{ButtonNavs[6].name[1]}
</Dropdown.Item>
</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="#">
<Button style={{ paddingVertical: "0.1em" }} fullwidth color={"light"}>
<Button style={{ paddingVertical: '0.1em' }} fullwidth color={'light'}>
{ButtonNavs[7].name}
</Button>
</Navbar.Item>
......@@ -87,26 +106,15 @@ class HeaderComponent extends Component {
render() {
const { open } = this.state;
return (
<Navbar
// fixed={"top"}
transparent={true}
active={open}
style={{ padding: "0.5rem 2rem" }}
>
<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.Burger onClick={() => this.setState(prevState => ({ open: !prevState.open }))} />
</Navbar.Brand>
<Navbar.Menu>
<Navbar.Container position="end">
{this.renderButtonNavs()}
</Navbar.Container>
<Navbar.Container position="end">{this.renderButtonNavs()}</Navbar.Container>
</Navbar.Menu>
</Navbar>
);
......@@ -114,12 +122,14 @@ class HeaderComponent extends Component {
}
const mapDispatchToProps = {
setLanguage
setLanguage,
};
const mapStateToProps = state => ({ language: state.localeReducer.language });
const Header = WindowDimensions(HeaderComponent);
export default connect(
mapStateToProps,
mapDispatchToProps
)(HeaderComponent);
)(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"
display: 'flex',
flexDirection: isMobileSized ? 'column' : 'row',
// height: "90%"
}}
className="content-width section"
>
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"
}}
>
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" }}>
<p className="descriptionStyle" style={{ margin: '50px 0' }}>
<FormattedMessage id="About.Descrip1" />
</p>
<p className="descriptionStyle">
......
src/components/Home/Banner.js
import React from "react";
import React from 'react';
export default class Banner extends React.Component {
render() {
......@@ -7,9 +7,8 @@ export default class Banner extends React.Component {
<div
className="section"
style={{
background: "linear-gradient(to right bottom, #194db7, #3fd4e6)"
}}
>
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>
......
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" />
description: <FormattedMessage id="Monitor.Descrip" />,
},
{
title: <FormattedMessage id="Trigger.Title" />,
description: <FormattedMessage id="Trigger.Descrip" />
description: <FormattedMessage id="Trigger.Descrip" />,
},
{
title: <FormattedMessage id="Control.Title" />,
description: <FormattedMessage id="Control.Descrip" />
description: <FormattedMessage id="Control.Descrip" />,
},
{
title: <FormattedMessage id="Hook.Title" />,
description: <FormattedMessage id="Hook.Descrip" />
description: <FormattedMessage id="Hook.Descrip" />,
},
{
title: <FormattedMessage id="Storage.Title" />,
description: <FormattedMessage id="Storage.Descrip" />
}
description: <FormattedMessage id="Storage.Descrip" />,
},
];
const Card = props => {
return (
......@@ -44,28 +44,20 @@ export default class Features extends React.Component {
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px"
}}
>
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 }}
>
<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}
/>
<Card key={index} title={item.title} description={item.description} />
))}
{oddItem === 1 ? <div className="feature-card-hidden" /> : <></>}
</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,
......@@ -8,15 +8,15 @@ const options = {
responsive: {
0: {
items: 1,
loop: true
loop: true,
},
768: {
items: 2
items: 2,
},
992: {
items: 3
}
}
items: 3,
},
},
};
const Card = () => {
return (
......@@ -58,7 +58,7 @@ const Card = () => {
};
export default class Packages extends React.Component {
state = {
activeTab: "tab1"
activeTab: 'tab1',
};
render() {
......@@ -66,13 +66,12 @@ export default class Packages extends React.Component {
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px",
overflow: "hidden"
}}
>
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'space-evenly',
paddingBottom: '60px',
overflow: 'hidden',
}}>
<h1 className="title">
<FormattedMessage id="Packages.Title" />
</h1>
......@@ -80,33 +79,31 @@ export default class Packages extends React.Component {
<div
onClick={() => {
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)
</div>
<div
onClick={() => {
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)
</div>
</div>
<div>
<OwlCarousel className="owl-theme" {...options}>
{this.state.activeTab === "tab1" &&
{this.state.activeTab === 'tab1' &&
[1, 2, 3].map((item, index) => (
<div className="item center">
<Card />
</div>
))}
{this.state.activeTab === "tab2" && (
{this.state.activeTab === 'tab2' && (
<div className="row">
{[1, 2, 3].map((item, index) => (
<Card />
......
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 (
......@@ -11,9 +11,7 @@ const Card = () => {
</div>
<div className="service-wrapper">
<h1 className="service-title">Connectivity</h1>
<p className="service-description">
Connecting your device with NEXPIE IoT platform.
</p>
<p className="service-description">Connecting your device with NEXPIE IoT platform.</p>
</div>
</div>
);
......@@ -24,23 +22,18 @@ export default class Services extends React.Component {
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px",
overflow: "hidden"
}}
>
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 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) => (
......
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"
/>
<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" }}>
<p className="why-description" style={{ textAlign: 'center' }}>
Connecting your device with NEXPIE IoT platform.
</p>
</div>
......@@ -25,20 +21,16 @@ export default class WhyUs extends React.Component {
<div
className="section content-width"
style={{
flexDirection: "column",
alignItems: "center",
justifyContent: "space-evenly",
paddingBottom: "60px",
overflow: "hidden"
}}
>
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 }}
>
<p className="descriptionStyle" style={{ textAlign: 'center', maxWidth: 1140 }}>
<FormattedMessage id="Why.Descrip" />
</p>
<div className="row">
......
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" />
<img src="1.jpg" alt="img1" />
</div>
<div class="item">
<img src="2.jpg" />
<img src="2.jpg" alt="img2" />
</div>
<div class="item">
<img src="3.jpg" />
<img src="3.jpg" alt="img3" />
</div>
<div class="item">
<img src="4.jpg" />
<img src="4.jpg" alt="img4" />
</div>
<div class="item">
<img src="5.jpg" />
<img src="5.jpg" alt="img5" />
</div>
</OwlCarousel>
);
......
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';
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 {
constructor(props) {
......@@ -22,13 +58,8 @@ class Homepage extends Component {
};
render() {
const baseStyle = {
display: "flex",
justifyContent: "stretch"
};
return (
<div>
<>
{this.props.windowWidth <= 768 ? (
<>
<Banner />
......@@ -39,62 +70,9 @@ class Homepage extends Component {
<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>
<Fullpage ref={this.fullPageRef} {...fullPageOptions} />
)}
</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 "_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,8 +8,13 @@
// @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;
}
......@@ -360,6 +365,20 @@ body {
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
......@@ -15,9 +15,7 @@ const isLocalhost = Boolean(
// [::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.match(/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/)
);
export function register(config) {
......@@ -104,10 +102,7 @@ function checkValidServiceWorker(swUrl, config) {
.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)
) {
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(() => {
......@@ -120,9 +115,7 @@ function checkValidServiceWorker(swUrl, config) {
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
console.log('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) {
return class extends Component {
......@@ -6,11 +6,11 @@ export default function WindowDimensions(WrappedComponent) {
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener("resize", this.updateWindowDimensions);
window.addEventListener('resize', this.updateWindowDimensions);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateWindowDimensions);
window.removeEventListener('resize', this.updateWindowDimensions);
}
updateWindowDimensions = () => {
......@@ -23,7 +23,8 @@ export default function WindowDimensions(WrappedComponent) {
{...this.props}
windowWidth={this.state.width}
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 @@
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