Skip to content

L
landingPage-Nexpie
Commit 28189b32 by Chaiwith Santaweesuk
Options

update

parent 7aec3190
Showing with 99 additions and 73 deletions
.firebase/hosting.YnVpbGQ.cache
asset-manifest.json,1567435596085,ff9dd12e80477651d66cee7393efe82f3271c1e82ddc342d7027715be35ba47a asset-manifest.json,1568389674309,9da10bce03bfcaf561933ed4ec9bd9ca99cdaa9db12c25004bbaf57d51b855bb
precache-manifest.ad22dc0b26434cea537150ceb23606ff.js,1567435596085,04f7099dabe8eb1921c75473dd660171426603b5e0299ce2783c503075e13809
index.html,1567435596085,c8d6eed10e25fec89cc6e50cf24bf7d70601021723366c923fab3b776b70359f
favicon.ico,1565083503842,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955 favicon.ico,1565083503842,b72f7455f00e4e58792d2bca892abb068e2213838c0316d6b7a0d6d16acd1955
service-worker.js,1567435596085,d217c8855c2163d5590a1064ee1178422be73a5ce0d7b5fabb19b06398c1843c precache-manifest.2317e93a842c8fb87eb560501c0cbcba.js,1568389674307,a9e8e014097d23e4e90613f9bae31d62ee44f510bbf291b6eba94417d173a820
static/css/main.a43607a4.chunk.css.map,1567435596108,b47e3b94408ca1b5f00234f22dde566b16fd767e49657706b147637e8b22e561 index.html,1568389674307,3e5bb6995cb010862154e4ee9506bba2169b8b247d72f0f5454935e781855c1e
manifest.json,1565083503843,6aaf3d87dd9bb1e96f9c691c50d0ed378ed98a120a76dea78291281834cd36e9 service-worker.js,1568389674309,efd48510e865f83b887af02b357fa23e29d603c6314bb5e5e53571a10410070f
static/css/main.a43607a4.chunk.css,1567435596086,125a1896a560cfb2846d2d2bbe3da9d70d1724a3834da2ffa98ada4c6a5b34d0 manifest.json,1567779358007,ed6e768ed41272d109f4b4f9e841a8c355a27b3608ea5998fed8089944e24f1f
static/js/runtime~main.a8a9905a.js,1567435596086,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9 static/css/main.4800a63b.chunk.css.map,1568389674329,1dd6d3c32ded879aed8baccb3419f5fee3d4a32222493eb7571ab14e885a4f20
static/js/runtime~main.a8a9905a.js.map,1567435596107,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db static/css/main.4800a63b.chunk.css,1568389674311,a84cc9c4c3cda6820783c617e12848c0317ee01a6a3ee8aed5e2a66bb92e9aec
static/js/main.9547b370.chunk.js.map,1567435596107,4bf88838c91bd6c0552b0f9b046a0da42828a8afb69f994c6b1a4f94cf2d7a40 static/js/runtime~main.a8a9905a.js,1568389674329,e1af5f94fdd13901b2e433d0d7607e27c01458151c35b1fe4b7feda2a32b7aa9
static/js/main.9547b370.chunk.js,1567435596107,7930424c035ad84159c3f9c3674dc2fdb250e78c168cc52e234990933389bc11 static/js/main.834a24a2.chunk.js,1568389674309,ff47de44130e5b5770397831ee6f3532b34b579f4e9e88319fd8605dc8caf375
static/css/2.655cd109.chunk.css,1567435596108,b9381307d281dd581b7e8e40fa46f5dc5f129dceb138844f58205737d3b8b156 static/js/runtime~main.a8a9905a.js.map,1568389674329,c337bf8b58896da637a6e50ab8cfc779eb1ec42c55f8ec429030a03454a549db
static/css/2.655cd109.chunk.css.map,1567435596109,c5e0c12c108d428b20ea3a6e39bf4d5e1f10006f035e8cb3ade2d9d843334742 static/js/main.834a24a2.chunk.js.map,1568389674329,7d8cfc581d3a01c5b6cc80f67f11bea1b7f5a0ffb5cb07b8a13c3f95a009c85d
static/js/2.1a3fd4c2.chunk.js,1567435596107,b5b52eff5015e551b302084887912f1e01e0c71a3d4afc2f27a9595349ce937c static/css/2.655cd109.chunk.css,1568389674331,b9381307d281dd581b7e8e40fa46f5dc5f129dceb138844f58205737d3b8b156
static/js/2.1a3fd4c2.chunk.js.map,1567435596108,c11a22832416c4fca8b09716dbec209d856a2a9edd92e1ea0872e0e0622d0097 static/media/Cloud01.3ba8e626.png,1568389674309,8e144e90f1a2e28b68781e283ba3b53409e5b1db7c1ac90c66cd85c4057193b2
static/media/Cloud03.33540b2a.png,1568389674331,4604dfad04458ed3061dae2eaacd154b51b8403f5a159f2ba113c6e424b1ffc9
static/media/Cloud02.c7fdae7f.png,1568389674329,191b41aa9bfb01f5e480c0ad304d40da252ffab7ee4a77bce70eab8ba0d267c9
static/css/2.655cd109.chunk.css.map,1568389674331,c5e0c12c108d428b20ea3a6e39bf4d5e1f10006f035e8cb3ade2d9d843334742
static/js/2.4d471763.chunk.js,1568389674329,af1a9b5ecee4205e82d23757ed44e2b3f867d9c19355a21ede7794c469f40a89
static/js/2.4d471763.chunk.js.map,1568389674330,cc2b8d229122a7a186aae6965afffc239b75d2011ad9934cbd64b0e241c83349
public/index.html
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Mitr:300&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css" /> -->
<!-- <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css" /> -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!-- <head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<link href="https://fonts.googleapis.com/css?family=Mitr:300&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" href="owlcarousel/owl.carousel.min.css" /> -->
<!-- <link rel="stylesheet" href="owlcarousel/owl.theme.default.min.css" /> -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
...@@ -24,12 +25,13 @@ ...@@ -24,12 +25,13 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>NEXPIE IoT Platform</title> <title>NEXPIE IoT Platform</title>
</head> </head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript> <body>
<div id="root"></div> <noscript>You need to enable JavaScript to run this app.</noscript>
<!-- <div id="root"></div>
<!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
...@@ -39,23 +41,27 @@ ...@@ -39,23 +41,27 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
</body> </body>
<footer> <footer>
<!-- <script src="jquery.min.js"></script> --> <!-- <script src="jquery.min.js"></script> -->
<!-- <script src="owlcarousel/owl.carousel.min.js"></script> --> <!-- <script src="owlcarousel/owl.carousel.min.js"></script> -->
</footer> </footer>
<!-- <script> <script>
$(document).ready(function(){ $(document).ready(function(){
$(window).scroll(function() { // check if scroll event happened $(window).scroll(function() { // check if scroll event happened
if ($(document).scrollTop() > 100) { // check if user scrolled more than 50 from top of the browser window if ($(document).scrollTop() > 30) { // check if user scrolled more than 50 from top of the browser window
console.log("sssss") // console.log("sssss")
$(".is-fixed-top").css("background-color", "#fff"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8) // document.body.style.backgroundColor = "pink";
document.getElementById("navheader").style.backgroundColor = "#fff";
// $("navheader").css("background-color", "#fff"); // if yes, then change the color of class "navbar-fixed-top" to white (#f8f8f8)
} else { } else {
console.log("11111") // console.log("11111")
$(".is-fixed-top").css("background-color", "transparent"); // if not, change it back to transparent // document.body.style.backgroundColor = "red";
document.getElementById("navheader").style.backgroundColor = "transparent";
// $("navheader").css("background-color", "transparent"); // if not, change it back to transparent
} }
console.log($(document).scrollTop()) // console.log($(document).scrollTop())
}); });
}); });
</script> --> </script>
</html> </html>
\ No newline at end of file
src/components/Header.js
...@@ -108,7 +108,7 @@ class HeaderComponent extends Component { ...@@ -108,7 +108,7 @@ class HeaderComponent extends Component {
render() { render() {
const { open } = this.state; const { open } = this.state;
return ( return (
<Navbar fixed={'top'} transparent={true} active={open} style={{ padding: '0.5rem 2rem' }}> <Navbar fixed={'top'} active={open} style={{ padding: '0.5rem 2rem' }} id="navheader">
<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 }} />
......
src/components/Home/Services.js
...@@ -43,6 +43,7 @@ export default class Services extends React.Component { ...@@ -43,6 +43,7 @@ export default class Services extends React.Component {
justifyContent: 'space-evenly', justifyContent: 'space-evenly',
paddingBottom: '60px', paddingBottom: '60px',
overflow: 'hidden', overflow: 'hidden',
backgroundColor:'#F3F9FD'
}}> }}>
<h1 className="title"> <h1 className="title">
<FormattedMessage id="Services.Title" /> <FormattedMessage id="Services.Title" />
......
src/scss/style.scss
...@@ -122,7 +122,7 @@ body { ...@@ -122,7 +122,7 @@ body {
.service-card { .service-card {
max-width: 300px; max-width: 300px;
min-width: 245px; min-width: 245px;
height: 400px; height: 350px;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.09); box-shadow: 0 30px 40px 0 rgba(0, 0, 0, 0.09);
border: solid 1px #f0f0f0; border: solid 1px #f0f0f0;
...@@ -132,19 +132,24 @@ body { ...@@ -132,19 +132,24 @@ body {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
&:first-child { // &:first-child {
background-color: #42b3e5; // background-color: #42b3e5;
} // }
&:nth-child(2) { // &:nth-child(2) {
background-color: #0384ce; // background-color: #0384ce;
} // }
&:nth-child(3) { // &:nth-child(3) {
background-color: #3156a3; // background-color: #3156a3;
} // }
.img-wrapper { .img-wrapper {
border-color: #018ddd;
border-top-style: solid;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-top-width: 10px;
background-color: $white; background-color: $white;
width: 100%; width: 100%;
height: 70%; height: 60%;
margin: 60 0; margin: 60 0;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -153,20 +158,22 @@ body { ...@@ -153,20 +158,22 @@ body {
.service-wrapper { .service-wrapper {
width: 100%; width: 100%;
max-height: 200px; max-height: 200px;
color: $white; // color: $white;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20px; padding: 0px 20px;
.service-title { .service-title {
font-size: 22px; font-size: 22px;
font-weight: 500; font-weight: 500;
color: #4a4a4a;
} }
.service-description { .service-description {
font-size: 16px; font-size: 16px;
text-align: center; text-align: center;
font-weight: normal; font-weight: normal;
color: #858585;
} }
} }
} }
...@@ -258,24 +265,24 @@ body { ...@@ -258,24 +265,24 @@ body {
box-shadow: 0 10px 25px 0 rgba(3, 132, 206, 0.28), 0 2px 24px 0 rgba(0, 0, 0, 0.02); box-shadow: 0 10px 25px 0 rgba(3, 132, 206, 0.28), 0 2px 24px 0 rgba(0, 0, 0, 0.02);
&:nth-child(2) { &:nth-child(2) {
.text-wrapper { .text-wrapper {
border-top-left-radius:6px; border-top-left-radius: 6px;
border-top-right-radius:6px; border-top-right-radius: 6px;
color: #fff; color: #fff;
background-color: #42b3e5; background-color: #42b3e5;
} }
} }
&:nth-child(3) { &:nth-child(3) {
.text-wrapper { .text-wrapper {
border-top-left-radius:6px; border-top-left-radius: 6px;
border-top-right-radius:6px; border-top-right-radius: 6px;
color: #fff; color: #fff;
background-color: #0384ce; background-color: #0384ce;
} }
} }
&:nth-child(4) { &:nth-child(4) {
.text-wrapper { .text-wrapper {
border-top-left-radius:6px; border-top-left-radius: 6px;
border-top-right-radius:6px; border-top-right-radius: 6px;
color: #fff; color: #fff;
background-color: #3156a3; background-color: #3156a3;
} }
...@@ -396,7 +403,7 @@ body { ...@@ -396,7 +403,7 @@ body {
} }
} }
} }
.tb-background{ .tb-background {
background-color: rgba(0, 126, 229, 0.12); background-color: rgba(0, 126, 229, 0.12);
} }
} }
...@@ -640,3 +647,11 @@ html.has-navbar-fixed-top, ...@@ -640,3 +647,11 @@ html.has-navbar-fixed-top,
body.has-navbar-fixed-top { body.has-navbar-fixed-top {
padding-top: 0px; padding-top: 0px;
} }
.navbar {
background-color: transparent;
}
// body:not([data-scroll='0']) {
// .navbar{
// background-color: #fff;
// }
// }
src/utils/WindowDimension.js
...@@ -6,19 +6,19 @@ export default function WindowDimensions(WrappedComponent) { ...@@ -6,19 +6,19 @@ export default function WindowDimensions(WrappedComponent) {
componentDidMount() { componentDidMount() {
this.updateWindowDimensions(); this.updateWindowDimensions();
console.log("componentDidMount") // console.log("componentDidMount")
console.log(window.innerWidth) // console.log(window.innerWidth)
window.addEventListener('resize', this.updateWindowDimensions); window.addEventListener('resize', this.updateWindowDimensions);
} }
componentWillUnmount() { componentWillUnmount() {
console.log("componentWillUnmount") // console.log("componentWillUnmount")
console.log(window.innerWidth) // console.log(window.innerWidth)
window.removeEventListener('resize', this.updateWindowDimensions); window.removeEventListener('resize', this.updateWindowDimensions);
} }
updateWindowDimensions = () => { updateWindowDimensions = () => {
console.log(window.innerWidth) // console.log(window.innerWidth)
this.setState({ width: window.innerWidth, height: window.innerHeight }); this.setState({ width: window.innerWidth, height: window.innerHeight });
}; };
......
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