Skip to content

Commit

Permalink
feat: fix styling and add better loading animations
Browse files Browse the repository at this point in the history
  • Loading branch information
@hopetambala
hopetambala committed Nov 5, 2019
1 parent a6c3d36 commit de7ab3d
Show file tree
Hide file tree
Showing 16 changed files with 186 additions and 144 deletions.
23 changes: 21 additions & 2 deletions src/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,30 @@ h1 , h2, h3, h4, h5, h6 {
}

h1 {
font-size: 70px;
font-size: 60px !important;

}

h2 {
font-size: 50px;
}

h3 {
font-size: 50px;

}
h4 {
font-size: 30px;

}

h5 {
font-size: 20px;
color: whitesmoke;

}
h6 {
font-size: 10px;

}

ol, ul {
Expand Down
14 changes: 1 addition & 13 deletions src/js/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import React from 'react';
import Parse from 'parse';
import { Route, Link, Redirect} from "react-router-dom";


//REDUX
import { getAuthInfo} from './reducers/login';
import { connect } from "react-redux";
Expand All @@ -15,15 +14,11 @@ import Toolbar from '@material-ui/core/Toolbar';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
// import IconButton from '@material-ui/core/IconButton';
// import MenuItem from '@material-ui/core/MenuItem';

import appStyle from './App.module.css';
import { styles } from '../styles';

// import goldClear from '../assets/goldClear.png';


//Pages
import HomePage from "./pages/Home";
import { ExportPage } from "./pages/DataExport";
Expand Down Expand Up @@ -61,23 +56,16 @@ class App extends React.Component {
this.state = {
visible: false
}

Parse.initialize(process.env.REACT_APP_parseAppId , process.env.REACT_APP_parseJavascriptKey);
Parse.serverURL = process.env.REACT_APP_parseServerUrl;
}

handleHideClick = () => this.setState({ visible: !this.state.visible })

render() {
// if (!this.props.isLoggedIn) {
// return <Redirect to="/login" />
// }

render() {
if(this.props.authInfo.isAuthenticated === false){
return <Redirect to='/login' />
}


return (
<div className={appStyle.background}>
<AppBar position="static" style={{ background: '#333'}}>
Expand Down
34 changes: 0 additions & 34 deletions src/js/components/map-manager/MapManager.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,22 +76,6 @@ class MapManagerControls extends React.Component {

render() {
return (
// <div className={ this.state.show ? dashboardManagerStyle.show : dashboardManagerStyle.hide }>
// <div>
// {!this.state.show && <p className={dashboardManagerStyle.hidden}><FontAwesomeIcon onClick={this.handleShowHide} icon={faAngleDoubleLeft} /> </p>}{this.state.show && <p className={dashboardManagerStyle.shown}><FontAwesomeIcon onClick={this.handleShowHide} icon={faAngleDoubleRight} /></p>}
// </div>

// <Dropdown style={{marginBottom:"1em"}}>
// <Dropdown.Toggle variant="success" id="dropdown-basic">
// Sex
// </Dropdown.Toggle>
// <Dropdown.Menu>
// <Dropdown.Item onClick={()=>{this.sendSex('')}}>All</Dropdown.Item>
// <Dropdown.Item onClick={()=>{this.sendSex('Male')}}>Male</Dropdown.Item>
// <Dropdown.Item onClick={()=>{this.sendSex('Female')}}>Female</Dropdown.Item>
// </Dropdown.Menu>
// </Dropdown>
// </div>
<Card className={ this.state.show ? dashboardManagerStyle.hide : dashboardManagerStyle.show } style={cardStyle.card}>
{/* <div>
{!this.state.show && <p className={dashboardManagerStyle.hidden}><FontAwesomeIcon onClick={this.handleShowHide} icon={faAngleDoubleLeft} /> </p>}{this.state.show && <p className={dashboardManagerStyle.shown}><FontAwesomeIcon onClick={this.handleShowHide} icon={faAngleDoubleRight} /></p>}
Expand All @@ -116,24 +100,6 @@ class MapManagerControls extends React.Component {
<span className={labelStyle.tag} onClick={()=>{this.sendQuery(allHistoryMedicalsByOrganization)}}>medical-history</span>

</div>

{/* <Typography variant="h6" component="h6" color="textSecondary" gutterBottom>
Metrics on Records
</Typography>
<Typography variant="h4" component="h4">
Hello
</Typography>
<Dropdown style={{marginBottom:"1em"}}>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Sex
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item onClick={()=>{this.sendSex('')}}>All</Dropdown.Item>
<Dropdown.Item onClick={()=>{this.sendSex('Male')}}>Male</Dropdown.Item>
<Dropdown.Item onClick={()=>{this.sendSex('Female')}}>Female</Dropdown.Item>
</Dropdown.Menu>
</Dropdown> */}
{/* <Button onClick={()=>{this.sendQuery('')}} /> */}

</CardContent>
</Card>
Expand Down
2 changes: 1 addition & 1 deletion src/js/components/recharts/LineChart_General.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export class LineChartGeneralComponent extends React.Component{
let getWOF = (x)=>{return x.values.WOF;}
return (
<div>
<h1>Number of Records Collected Throughout Time</h1>
<h2>Number of Records Collected Throughout Time</h2>
<ResponsiveContainer width="100%"height={400}>
<LineChart
data={this.state.modded}
Expand Down
45 changes: 45 additions & 0 deletions src/js/components/styles/LoadingDots.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import React, { Component } from "react";
import styled, { keyframes } from "styled-components";
import Typography from '@material-ui/core/Typography';
import { styles } from '../../../styles';

const BounceAnimation = keyframes`
0% { margin-bottom: 0; }
50% { margin-bottom: 15px }
100% { margin-bottom: 0 }
`;
const DotWrapper = styled.div`
display: flex;
align-items: flex-end;
margin: 10px;
`;
const Dot = styled.div`
background-color: ${styles.theme.primaryAppColor};
border-radius: 50%;
width: 10px;
height: 10px;
margin: 5px;
/* Animation */
animation: ${BounceAnimation} 0.5s linear infinite;
animation-delay: ${props => props.delay};
`;
class LoadingDots extends Component {
render() {
return (
<>
{/* <Typography variant="h2" >
<div style={{color:styles.theme.primaryAppColor}}>Loading</div>
</Typography> */}
<DotWrapper>
<Typography variant="h4" style={{color:styles.theme.primaryAppColor}} >
<div >Loading</div>
</Typography>
<Dot delay="0s" />
<Dot delay=".1s" />
<Dot delay=".2s" />
</DotWrapper>
</>
)
}
}
export default LoadingDots
18 changes: 11 additions & 7 deletions src/js/components/styles/Styles.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import styled, { css } from "styled-components";
import { styles } from '../../../styles';

const btn = (light, dark) => css`
white-space: nowrap;
Expand Down Expand Up @@ -36,12 +37,12 @@ export default styled.div`
h1 {
text-align: center;
color: #222;
color: rgba(255, 255, 255);
}
h2 {
text-align: center;
color: #222;
color: rgba(255, 255, 255);
}
& > div {
Expand All @@ -51,26 +52,28 @@ export default styled.div`
a {
display: block;
text-align: center;
color: #222;
color: rgba(255, 255, 255);
margin-bottom: 10px;
}
form {
max-width: 500px;
margin: 10px auto;
border: 1px solid #ccc;
// border: 1px solid #ccc;
padding: 20px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
border-radius: 3px;
position: relative;
background-color: ${styles.theme.lighter_darkbg};
& > div {
display: flex;
flex-flow: row nowrap;
line-height: 2em;
margin: 5px;
& > label {
color: #333;
color: ${styles.theme.primaryAppColor};
width: 110px;
font-size: 1em;
line-height: 32px;
Expand Down Expand Up @@ -100,7 +103,7 @@ export default styled.div`
& > span {
line-height: 32px;
margin-left: 10px;
color: #800;
color: #000;
font-weight: bold;
}
}
Expand All @@ -120,7 +123,8 @@ export default styled.div`
}
}
pre {
border: 1px solid #ccc;
// border: 1px solid #ccc;
color: ${styles.theme.primaryAppColor};
background: rgba(0, 0, 0, 0.1);
box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.2);
padding: 20px;
Expand Down
66 changes: 36 additions & 30 deletions src/js/pages/DataExport.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import React from 'react';
import { Button } from 'react-bootstrap'
// import { Button } from 'react-bootstrap'
import { Query } from 'react-apollo';
import { Form, Field } from 'react-final-form';

// Styles
import Paper from '@material-ui/core/Paper';
import Button from '@material-ui/core/Button';
import { cardStyle, styles } from '../../styles';

//Components
import { DataTable } from '../components/widget/Table/DataTable';
import LoadingDots from '../components/styles/LoadingDots';

//Queries
import {
allRecordsByOrganization,
Expand All @@ -22,26 +28,26 @@ import { CSVLink } from "react-csv";
import Styles from '../components/styles/Styles'
import 'bootstrap/dist/css/bootstrap.css';

const styles = {
container: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
//alignItems: 'flex-center',
alignContent: 'flex-start',
paddingTop: '5%'
},
row: {
//height:'100vh',
justifyContent: 'center',
flex:1,
marginBottom:0,
paddingBottom:0
},
button: {
backgroundColor:'white'
}
}
// const styles = {
// container: {
// flexDirection: 'row',
// flexWrap: 'wrap',
// justifyContent: 'center',
// //alignItems: 'flex-center',
// alignContent: 'flex-start',
// paddingTop: '5%'
// },
// row: {
// //height:'100vh',
// justifyContent: 'center',
// flex:1,
// marginBottom:0,
// paddingBottom:0
// },
// button: {
// backgroundColor:'white'
// }
// }

const Dem = ({ organization }) => (
<Query
Expand All @@ -51,12 +57,12 @@ const Dem = ({ organization }) => (
>
{({ loading, error, data, refetch, networkStatus }) => {
if (networkStatus === 4) return "Refetching!";
if (loading) return null;
if (loading) return <LoadingDots />;
if (error) return `Error!: ${error}`;

return (
<>
<Button style={styles.button}>
<Button variant="contained" style={{backgroundColor: styles.theme.lighter_darkbg}}>
{console.log(data)}
<CSVLink data={data.getPeopleByOrganization}>
Download
Expand All @@ -76,7 +82,7 @@ const Vitals = ({ organization }) => (
>
{({ loading, error, data, refetch, networkStatus }) => {
if (networkStatus === 4) return "Refetching!";
if (loading) return null;
if (loading) return <LoadingDots />;
if (error) return `Error!: ${error}`;

return (
Expand All @@ -102,7 +108,7 @@ const EnvHealth = ({ organization }) => (
>
{({ loading, error, data, refetch, networkStatus }) => {
if (networkStatus === 4) return "Refetching!";
if (loading) return null;
if (loading) return <LoadingDots />;
if (error) return `Error!: ${error}`;

return (
Expand All @@ -128,12 +134,12 @@ const EvalMedical = ({ organization }) => (
>
{({ loading, error, data, refetch, networkStatus }) => {
if (networkStatus === 4) return "Refetching!";
if (loading) return null;
if (loading) return <LoadingDots />;
if (error) return `Error!: ${error}`;

return (
<>
<Button style={styles.button}>
<Button variant="contained" style={{backgroundColor: styles.theme.lighter_darkbg}}>
{console.log(data)}
<CSVLink data={data.getEvalMedicalByOrganization}>
Download
Expand All @@ -154,7 +160,7 @@ const HistoryMedical = ({ organization }) => (
>
{({ loading, error, data, refetch, networkStatus }) => {
if (networkStatus === 4) return "Refetching!";
if (loading) return null;
if (loading) return <LoadingDots />;
if (error) return `Error!: ${error}`;

return (
Expand Down Expand Up @@ -217,7 +223,7 @@ export class ExportPage extends React.Component {
onSubmit={this.onSubmit}
initialValues={{ type: 'Demographics', organization: '' }}
render={({ handleSubmit, form, submitting, pristine, values }) => (
<form onSubmit={handleSubmit}>
<form onSubmit={handleSubmit} style={{backgroundColor: styles.theme.lighter_darkbg}} >
<div>
<label>Record Type</label>
<Field name="type" component="select">
Expand Down Expand Up @@ -259,7 +265,7 @@ export class ExportPage extends React.Component {
)}
/>
</Styles>
<div>
<div style={{margin:"20px"}}>
{aThing}
</div>
</>
Expand Down
Loading

0 comments on commit de7ab3d

Please sign in to comment.