Align website and other updates

mx
Letícia Camara 2018-09-28 04:10:44 -03:00
parent 4bebb23794
commit b5c1038e95
18 changed files with 175 additions and 45 deletions

View File

@ -6,6 +6,7 @@
"@feathersjs/client": "^3.7.2",
"@material-ui/core": "^3.1.0",
"@material-ui/icons": "^3.0.1",
"bootstrap": "^4.1.3",
"country-list": "^1.1.0",
"mdbreact": "^4.7.1",
"react": "^16.5.2",

View File

@ -3942,7 +3942,7 @@ a:not([href]):not([tabindex]), a:not([href]):not([tabindex]):focus, a:not([href]
padding-bottom: 1.5rem !important; }
.p-5 {
padding: 3rem !important; }
padding: 3rem; }
.pt-5 {
padding-top: 3rem !important; }

View File

@ -66,7 +66,7 @@ p {
color: rgba(255, 255, 255, 0.7); }
section {
padding: 8rem 0; }
padding: 50px 0; }
.section-heading {
margin-top: 0; }
@ -163,7 +163,9 @@ img::-moz-selection {
padding-top: 0px;
padding-bottom: 0px; }
#mainNav .navbar-brand .logo1 {
display: none !important; }
/*display: none !important;*/
width: 223px;
}
#mainNav .navbar-brand .logo2 {
display: inline !important; } }
@media (min-width: 992px) {
@ -293,8 +295,8 @@ header.masthead {
.copyright {
background-color: #212529;
padding-left: 6rem;
padding-right: 6rem;
/*padding-left: 6rem;
padding-right: 6rem;*/
}
ul.social-buttons {
@ -350,3 +352,16 @@ ul.social-buttons {
}
}
.search-books-input-wrapper {
margin-left: 0 !important;
}
#testimonies .container .row > div {
border: none !important;
}
.ambassadorsTitle {
margin-top: 0 !important;
}
.about.bg-secondary > div {
padding-left: 0 !important;
padding-right: 0 !important;
}

View File

@ -30,6 +30,7 @@ const styles = theme => ({
},
textField: {
flexBasis: 280,
borderColor: "#139657"
},
});
@ -49,7 +50,7 @@ class EnhancedSearch extends Component {
<div className="search-books-bar">
<div className="search-books-input-wrapper" style={{ textAlign: 'left', marginLeft: 20}}>
<TextField
style={{ textAlign: 'left', width: 350}}
style={{ textAlign: 'left', width: 350,borderColor: "#139657" }}
id="outlined-adornment-weight"
className={classNames(classes.margin, classes.textField)}
variant="outlined"

View File

@ -20,7 +20,10 @@ function Footer() {
<FooterBase className="footer text-center">
<div className="containerfix">
<Row className="vertical-align footerrow">
<Col md="4">
<div className="col-md-10 mx-md-auto">
<Col className="logoFooter" md="4">
<img alt="" src={FooterLogo} />
</Col>
@ -68,19 +71,20 @@ function Footer() {
</li>
</ul>
</Col>
<Col md="4">
<Col className="brandTextFooter" md="4">
<p className="mb-0">
<span id="ft_lang1">
<FormattedMessage id="footer.title" />
</span>
</p>
</Col>
</div>
</Row>
<div
className="copyright py-3 text-center text-white"
style={{ fontSize: "0.8em" }}>
<div>
<div className="col-md-10 mx-md-auto">
<div className="row vertical-align">
<div className="col-md-10 mx-md-auto">
<p>
@ -106,7 +110,7 @@ function Footer() {
</div>
</div>
<div className="row justify-content-end">
<div className="row developersName justify-content-end">
<div
style={{ fontSize: "0.8em" }}
className="text-white col-md-2">

View File

@ -258,6 +258,7 @@ class LayerMap extends Component {
<LayerMapSwitches
ambassadors={this.state.ambassadorLayer}
merchants={this.state.merchantLayer}
ambsMap={this.props.ambsMap}
onChange={this.handleLayerChange}
/>
) : (

View File

@ -18,11 +18,23 @@ const styles = theme => ({
},
colorBar: {},
colorChecked: {},
iOSSwitchBase: {
iOSSwitchBaseBlue: {
'&$iOSChecked': {
color: theme.palette.common.white,
'& + $iOSBar': {
backgroundColor: '#52d869',
backgroundColor: "#2069b3",
},
},
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
easing: theme.transitions.easing.sharp,
}),
},
iOSSwitchBaseGreen: {
'&$iOSChecked': {
color: theme.palette.common.white,
'& + $iOSBar': {
backgroundColor: "#139657",
},
},
transition: theme.transitions.create('transform', {
@ -76,7 +88,7 @@ class LayerMapSwitches extends React.Component {
onChange={this.props.onChange('ambassadorLayer')}
value="ambassadors"
classes={{
switchBase: classes.iOSSwitchBase,
switchBase: ( (this.props.ambsMap) ? classes.iOSSwitchBaseBlue : classes.iOSSwitchBaseGreen ),
bar: classes.iOSBar,
icon: classes.iOSIcon,
iconChecked: classes.iOSIconChecked,
@ -90,7 +102,7 @@ class LayerMapSwitches extends React.Component {
control={
<Switch
classes={{
switchBase: classes.iOSSwitchBase,
switchBase: ( (this.props.ambsMap) ? classes.iOSSwitchBaseBlue : classes.iOSSwitchBaseGreen ),
bar: classes.iOSBar,
icon: classes.iOSIcon,
iconChecked: classes.iOSIconChecked,

View File

@ -57,8 +57,8 @@ const columnData = [
{ id: 'keybase', numeric: false, disablePadding: false, label: 'Keybase' },
{ id: 'email', numeric: false, disablePadding: false, label: 'Email' },
{ id: 'phone', numeric: false, disablePadding: false, label: 'Phone' },
{ id: 'map', numeric: false, disablePadding: false, label: 'Maps', disableSearch: true},
{ id: 'link', numeric: false, disablePadding: false, label: 'URL' }
{ id: 'link', numeric: false, disablePadding: false, label: 'URL' },
{ id: 'map', numeric: false, disablePadding: false, label: 'Maps', disableSearch: true}
];
/**
@ -171,7 +171,10 @@ class AmbassadorsPage extends Component {
ambassador.map = <Button
className="App-button"
variant="contained"
color="primary"
style={{
backgroundColor: "#2069b3",
color: 'white'
}}
onClick={() => this.openMaps(
ambassador.nickname,
`${ambassador.city} - ${ambassador.country}`,
@ -186,7 +189,15 @@ class AmbassadorsPage extends Component {
return (
<div>
<AppHeader />
<h2 style={centerStyle}><FormattedMessage id="ambassadors.title" /></h2>
<div id="maincontent">
<section data-spy="scroll" data-target="#mainNav" id="services">
<div className="containerfix">
<div className="row">
<div className="col-md-10 mx-md-auto">
<h2 className="ambassadorsTitle" style={centerStyle}><FormattedMessage id="ambassadors.title" /></h2>
{ /* Conditional Rendering */}
{(this.state.loading) ? (
<img src={LoadingGif} alt="Loading" style={loadingStyle} />
@ -237,11 +248,18 @@ class AmbassadorsPage extends Component {
ambassadorsLayer={true}
merchantsLayer={false}
mapHeight={'600px'}
ambsMap={true}
showControls={this.state.mapsModalIsOpen}
/>
</div>
</div>
)}
</div>
</div>
</div>
</section>
</div>
<Footer />
</div>
);

View File

@ -5,3 +5,56 @@
background-position: center center;
height: 100vh;
}
@media screen and (max-width: 991px) {
.testimonialbox {
margin-bottom: 250px;
}
}
@media screen and (min-width: 991px) {
.logoFooter {
text-align: left !important;
padding-left: 0 !important;
}
.brandTextFooter {
text-align: right !important;
padding-right: 0 !important;
}
.developersName {
text-align: right !important;
}
.developersName > div {
padding-right: 0 !important;
}
#home footer .col-md-10 {
padding-left: 0 !important; ;
padding-right: 0 !important; ;
}
.boxTestimonial {
padding-left: 0 !important;
}
.boxVideo {
padding-right: 0 !important;
}
}
@media screen and (max-width: 991px) {
.testimoniesBox {
padding-right: 0 !important;
}
.box-video {
padding-left: 0 !important;
}
}
@media screen and (min-width: 991px) {
.margin-5 {
padding-right: 0 !important;
padding-left: 0 !important;
}
}
.margin-5 {
padding: 3rem;
}

View File

@ -3,7 +3,8 @@ import { Button, Collapse } from "mdbreact";
import { FormattedMessage, FormattedHTMLMessage } from 'react-intl';
// Custom components
import MarketingHeader from '../MarketingHeader';
import AppHeader from '../AppHeader';
import Footer from '../Footer';
/**
* Marketing page component.
@ -85,7 +86,7 @@ class MarketingPage extends React.Component {
render() {
return (
<div>
<MarketingHeader />
<AppHeader />
<div id="maincontent">
<section data-spy="scroll" data-target="#mainNav" id="services">
<div className="containerfix">
@ -168,6 +169,7 @@ class MarketingPage extends React.Component {
</div>
</section>
</div>
<Footer />
</div>
);
}

View File

@ -165,7 +165,10 @@ class MerchantsPage extends Component {
merchant.map = <Button
className="App-button"
variant="contained"
color="primary"
style={{
backgroundColor: "#139657",
color: 'white'
}}
onClick={() => this.openMaps(
merchant.name,
`${merchant.address}, ${merchant.city} - ${merchant.country}`,
@ -180,7 +183,13 @@ class MerchantsPage extends Component {
return (
<div>
<AppHeader />
<h2 style={centerStyle}><FormattedMessage id="merchants.title" /></h2>
<section data-spy="scroll" data-target="#mainNav" id="services">
<div className="containerfix">
<div className="row">
<div className="col-md-10 mx-md-auto">
<h2 className="ambassadorsTitle" style={centerStyle}><FormattedMessage id="merchants.title" /></h2>
{ /* Conditional Rendering */}
{(this.state.loading) ? (
<img src={LoadingGif} alt="Loading" style={loadingStyle} />
@ -237,6 +246,10 @@ class MerchantsPage extends Component {
</div>
</div>
)}
</div>
</div>
</div>
</section>
<Footer />
</div>
);

View File

@ -14,15 +14,15 @@ import AboutImage5 from '../../assets/img/about/ab5.png';
function AboutSection() {
return (
<section className="about bg-secondary" id="about">
<div className="container">
<div className="col-md-10 mx-md-auto">
<div className="row align-items-center">
<div className="col-lg-6 order-lg-2">
<div className="p-5">
<div className="margin-5">
<img alt="" className="img-fluid" src={AboutImage1} />
</div>
</div>
<div className="col-lg-6 order-lg-1">
<div className="p-5">
<div className="margin-5">
<h2 className="about-text">
<span>
<span id="ab_lang1">
@ -64,12 +64,12 @@ function AboutSection() {
<div className="row align-items-center">
<div className="col-lg-6">
<div className="p-5">
<div className="margin-5">
<img alt="" className="img-fluid" src={AboutImage2} />
</div>
</div>
<div className="col-lg-6">
<div className="p-5">
<div className="margin-5">
<h2 className="about-text">
<span>
<span id="ab_lang6">
@ -103,12 +103,12 @@ function AboutSection() {
<div className="row align-items-center">
<div className="col-lg-6 order-lg-2">
<div className="p-5">
<div className="margin-5">
<img alt="" className="img-fluid" src={AboutImage3} />
</div>
</div>
<div className="col-lg-6 order-lg-1">
<div className="p-5">
<div className="margin-5">
<h2 className="about-text">
<span>
<span id="ab_lang10">
@ -150,12 +150,12 @@ function AboutSection() {
<div className="row align-items-center">
<div className="col-lg-6">
<div className="p-5">
<div className="margin-5">
<img alt="" className="img-fluid" src={AboutImage4} />
</div>
</div>
<div className="col-lg-6">
<div className="p-5">
<div className="margin-5">
<h2 className="about-text">
<span>
<span id="ab_lang15">
@ -182,12 +182,12 @@ function AboutSection() {
<div className="row align-items-center">
<div className="col-lg-6 order-lg-2">
<div className="p-5">
<div className="margin-5">
<img alt="" className="img-fluid" src={AboutImage5} />
</div>
</div>
<div className="col-lg-6 order-lg-1">
<div className="p-5">
<div className="margin-5">
<h2 className="display-5 about-text">
<span>
<span id="ab_lang18">

View File

@ -17,7 +17,7 @@ function MainSection() {
<View className="vmain">
<Mask className="d-flex justify-content-center align-items-center gradient">
<Container className="px-md-3 px-sm-0">
<Row>
<Row className="col-md-10 mx-md-auto">
<Col lg="10" className="mx-auto white-text text-center">
<h1 className="text-uppercase">
<strong className="important">

View File

@ -17,7 +17,7 @@ import Retail from '../../assets/img/services/retail.png';
function ServicesSection() {
return (
<section data-spy="scroll" data-target="#mainNav" id="services">
<div className="containerfix">
<div className="col-md-10 mx-md-auto">
<div className="row">
<div className="col-lg-12 text-center">
<h2 className="section-heading">
@ -30,7 +30,7 @@ function ServicesSection() {
</div>
</div>
<div className="containerfix">
<div className="row">
<div className="row" style={{ margin: 'auto' }}>
<div className="col-lg-3 col-md-6 text-center">
<div className="service-box mt-5 mx-auto">
<i className="fa fa-4x text-primary mb-3 sr-icons">

View File

@ -40,7 +40,7 @@ const testimonies = [
class TestimoniesSection extends React.Component {
constructor(props) {
super(props);
this.state = {
activeItem: 1,
maxLength: testimonies.length
@ -53,9 +53,14 @@ class TestimoniesSection extends React.Component {
return (
<span>
<section className="testimonials text-center" id="testimonies">
<div className="container">
<div className="col-md-10 mx-md-auto">
<Row>
<Col lg="6">
<Col lg="6"
style={{
border: '1px solid #128f52',
paddingTop: '10px',
paddingLeft: '0'
}} className ="testimoniesBox">
<Carousel
className="testimonialc"
activeItem={activeItem}
@ -64,7 +69,9 @@ class TestimoniesSection extends React.Component {
showControls={true}
showIndicators={true}
>
<CarouselInner>
<CarouselInner
className="testimonialbox"
>
<Row>
{testimonies.map( (testimony, index) => (
<CarouselItem itemId={index+1} key={index}>
@ -81,7 +88,10 @@ class TestimoniesSection extends React.Component {
</CarouselInner>
</Carousel>
</Col>
<Col lg="6" className="mx-auto white-text text-center">
<Col lg="6"
style={{
paddingRight: '0' }}
className="mx-auto white-text text-center box-video">
<div className="embed-responsive embed-responsive-16by9">
<iframe
className="embed-responsive-item"

View File

@ -93,7 +93,7 @@ strong.important {
}
}
#testimonies {
padding: 14rem 0 !important;
padding: 10rem 0 !important;
}
@media (min-width: 1200px) {
.menuc {

View File

@ -45,7 +45,7 @@
"home.services.phone_orders": "Phone Orders",
"footer.title": "FASTER AND SAFER THAN CASH",
"footer.description": "This website is not intended as legal or financial advice, is not a guarantee of anything and we do not collect any info about you whatsoever. PalmPay is a Point Of Sale product by Agorise, Ltd. For technical details, chat anytime 24/7 with the Agorise community on Telegram at: <a target='_blank' rel='noopener noreferrer' href='http://t.me/Agorise> http://t.me/Agorise </a>",
"footer.description": "This website is not intended as legal or financial advice, is not a guarantee of anything and we do not collect any info about you whatsoever. PalmPay is a Point Of Sale product by Agorise, Ltd. For technical details, chat anytime 24/7 with the Agorise community on Telegram at: <a target='_blank' rel='noopener noreferrer' href='http://t.me/Agorise'> http://t.me/Agorise </a>",
"marketing.button.presentations": "Presentations",
"marketing.accordion.presentations1": "<a target='_blank' rel='noopener noreferrer' href='https://docs.google.com/presentation/d/1oYQxlKIzNHb-F07PJ04xsK0jIJcduIzc-4HMpbqAw0o/edit?usp=sharing' class='list-group-item list-group-item-action flex-column align-items-start'> <div class='d-flex w-100 justify-content-between'> <h5 class='mb-1'> Slides (ES) - Google Slides (for Meetups and Workshops etc) in Spanish </h5> </div> <p class='mb-1'> https://docs.google.com/presentation/d/1oYQxlKIzNHb-F07PJ04xsK0jIJcduIzc-4HMpbqAw0o/edit?usp=sharing </p> </a>",

View File

@ -2,8 +2,8 @@ import feathers from '@feathersjs/client';
const app = feathers();
// Change to your production ambassador web service
const restClient = feathers.rest('http://localhost:3030');
// const restClient = feathers.rest('http://localhost:3030');
const restClient = feathers.rest('https://palmpaybackend.leticiacamara.com');
// Configure an Fetch AJAX library with that client. For fetch details see https://facebook.github.io/react-native/docs/network.html
// For rest details see https://docs.feathersjs.com/api/client/rest.html
app.configure(restClient.fetch(window.fetch));