Skip to content

Commit

Permalink
Created support policy page
Browse files Browse the repository at this point in the history 
Signed-off-by: Giuseppe Macri <[email protected]>
  • Loading branch information
@macrigiuseppe
macrigiuseppe committed Sep 10, 2019
1 parent c660da8 commit fdafc9e
Show file tree
Hide file tree
Showing 6 changed files with 216 additions and 95 deletions.
106 changes: 106 additions & 0 deletions website/src/components/common/styles.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import React from 'react';

import styled from 'styled-components';
import {media} from '../../styles';
import {cdnUrl} from '../../utils';

export const StyledCaption = styled.div`
max-width: unset;
text-align: center;
margin-bottom: 32px;
margin-top: 6rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
${media.palm`
width: auto;
padding-top: 0;
margin-right: 0;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0px;
`} .kg-home__caption__subtitle {
font-size: 36px;
font-weight: 600;
margin-bottom: 20px;
line-height: 1.3;
${media.palm`
font-size: 20px;
`};
}
.kg-home__caption__description {
font-size: 14px;
color: ${props => props.theme.labelColor};
line-height: 24px;
margin-bottom: 32px;
max-width: 400px;
span.t-bold {
color: ${props => props.theme.textColor};
font-weight: 500;
}
${media.palm`
margin-bottom: 32px;
text-align: center;
font-size: 12px;
`};
}
`;

export const BackgroundImage = styled.img`
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 70%;
object-fit: cover;
background: #0f1d29;
`;

export const Container = styled.div`
padding: ${props => props.theme.margins.huge};
color: white;
position: relative;
${media.palm`
padding-top: ${props => props.theme.margins.large};
`}
`;

export const Content = styled.div`
position: relative;
display: flex;
flex-direction: column;
align-items: center;
${media.palm`
margin-top: 3rem;
`};
`;

export const Logo = styled.img`
position: absolute;
left: 0;
top: 0;
width: 120px;
${media.palm`
position: inherit;
margin-top: ${props => props.theme.margins.normal};
margin-bottom: ${props => props.theme.margins.small};
`};
`;

export const HeroImage = React.forwardRef((props, ref) => (
<BackgroundImage {...props} ref={ref} src={cdnUrl('hero/kepler.gl-background.png')}/>
));

export const LogoImage = React.forwardRef((props, ref) => (
<Logo {...props} src={cdnUrl('icons/kepler.gl-logo.png')} />
));

98 changes: 4 additions & 94 deletions website/src/components/hero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ import SlideShow from './common/slideshow';
import {LinkButton} from './common/styled-components';
import {DEMO_LINK} from '../constants';

import {Container, Content, HeroImage, LogoImage, StyledCaption} from './common/styles';

const SlideShowAnimation = keyframes`
0% {
opacity: 0;
Expand All @@ -48,98 +50,6 @@ const FadeIn = styled.div`
animation-fill-mode: both;
`;

const Container = styled.div`
padding: ${props => props.theme.margins.huge};
color: white;
position: relative;
${media.palm`
padding-top: ${props => props.theme.margins.large};
`}
`;

const Content = styled.div`
position: relative;
display: flex;
flex-direction: column;
align-items: center;
${media.palm`
margin-top: 3rem;
`};
`;

const BackgroundImage = styled.img`
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 70%;
object-fit: cover;
background: #0f1d29;
`;

const StyledCaption = styled.div`
max-width: 450px;
text-align: center;
margin-bottom: 32px;
margin-top: 6rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
${media.palm`
width: auto;
padding-top: 0;
margin-right: 0;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 0px;
`} .kg-home__caption__subtitle {
font-size: 36px;
font-weight: 600;
margin-bottom: 20px;
line-height: 1.3;
${media.palm`
font-size: 20px;
`};
}
.kg-home__caption__description {
font-size: 14px;
color: ${props => props.theme.labelColor};
line-height: 24px;
margin-bottom: 32px;
max-width: 400px;
span.t-bold {
color: ${props => props.theme.textColor};
font-weight: 500;
}
${media.palm`
margin-bottom: 32px;
text-align: center;
font-size: 12px;
`};
}
`;

const Logo = styled.img`
position: absolute;
left: 0;
top: 0;
width: 120px;
${media.palm`
position: inherit;
margin-top: ${props => props.theme.margins.normal};
margin-bottom: ${props => props.theme.margins.small};
`};
`;

const ButtonContainer = styled.div`
display: flex;
justify-content: center;
Expand Down Expand Up @@ -185,9 +95,9 @@ export default class Hero extends PureComponent {
const isPalm = this.state.width <= breakPoints.palm;
return (
<Container>
<BackgroundImage src={cdnUrl('hero/kepler.gl-background.png')} />
<HeroImage />
<Content>
<Logo src={cdnUrl('icons/kepler.gl-logo.png')} />
<LogoImage />
<StyledCaption>
<div className="kg-home__caption__subtitle">
Make an impact with your location data
Expand Down
3 changes: 2 additions & 1 deletion website/src/components/home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import Announcement from '../../../examples/demo-app/src/components/announcement

const BannerKey = 'kgHideBanner-iiba';
const BannerHeight = 30;
const BACKGROUND_COLOR = '#82368c';

const SECTION_CONTENT = {
showcase: Showcase,
Expand Down Expand Up @@ -79,7 +80,7 @@ export default class Home extends PureComponent {
<Banner
show={this.state.showBanner}
height={BannerHeight}
bgColor="#82368c"
bgColor={BACKGROUND_COLOR}
onClose={this._hideBanner}
>
<Announcement onDisable={this._disableBanner}/>
Expand Down
97 changes: 97 additions & 0 deletions website/src/components/policy.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
// Copyright (c) 2019 Uber Technologies, Inc.
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import React, {PureComponent} from 'react';
import styled, {ThemeProvider} from 'styled-components';
import {Container, Content, HeroImage, LogoImage, StyledCaption} from './common/styles';
import {theme} from '../styles';
import Header from './header';
import {cdnUrl} from '../utils';

const GITHUB_PROJECT = 'https://github.com/keplergl/kepler.gl';
const GITHUB_PROJECT_ISSUES = `${GITHUB_PROJECT}/issues`;

const StyledContainer = styled(Container)`
background-color: black;
height: 100vh;
max-width: unset;
.kg-home__caption__description {
max-width: unset;
}
h3 {
margin-bottom: 24px;
}
a {
text-decoration: underline;
}
a:visited {
color: white;
}
img.hero-image {
height: 100vh;
}
`;

export default class Home extends PureComponent {
render() {
return (
<ThemeProvider theme={theme}>
<div>

<Header />
<StyledContainer>
<HeroImage className="hero-image" />
<Content>
<LogoImage />
<StyledCaption>
<div className="kg-home__caption__subtitle">
Support Policy
</div>
<div className="kg-home__caption__description">
<h3>
<a href="https://kepler.gl">Kepler.gl</a> is an open source project. Its source code is available at <a
href={GITHUB_PROJECT}>Kepler.gl Github project</a>.
</h3>
<span>
As an open source project, questions and bug reports can be filed with the project community,
and you can participate in the development of the project's source code. Bug reports and
issues can be submitted at <a
href={GITHUB_PROJECT_ISSUES}>Kepler.gl Github issues</a>.
[Questions can be asked on the project's mailing lists, which you can subscribe to at [URL] // NEED TO BE DEFINED]
Please review the applicable contributing guidelines and procedures in connection with your submissions.
Please note that the Kepler.gl project and Urban Computing Foundation do not otherwise provide support for users of Kepler.gl software.
</span>
</div>
</StyledCaption>
</Content>
</StyledContainer>
</div>
</ThemeProvider>
);
}
}
4 changes: 4 additions & 0 deletions website/src/content.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,10 @@ export const HEADER_NAVS = [
{
text: 'Github',
link: 'https://github.com/keplergl/kepler.gl'
},
{
text: 'Support Policy',
link: '/policy'
}
];

Expand Down
3 changes: 3 additions & 0 deletions website/src/routes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@ import store from './reducers';
import Home from './components/home';
import App from './components/app';
import Demo from '../../examples/demo-app/src/app';
import Policy from './components/policy';

import {buildAppRoutes} from '../../examples/demo-app/src/utils/routes';

const appRoute = buildAppRoutes(Demo);
Expand Down Expand Up @@ -69,6 +71,7 @@ export default () => (
<Router history={history}>
<Route path="/" component={App} onEnter={onEnter}>
<IndexRoute component={Home} onEnter={onEnter} />
<Route path="/policy" component={Policy} onEnter={onEnter} />
{appRoute}
</Route>
</Router>
Expand Down

0 comments on commit fdafc9e

Please sign in to comment.