Skip to content

Commit 5b10ee2

Browse files
kulgavykulgavy
committed
feat: updated base version
1 parent 4f135c5 commit 5b10ee2

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

78 files changed

+5766
-529
lines changed

‎package.json

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,37 +9,48 @@
99
"browserslist": [">1%", "last 4 versions", "Firefox ESR", "not ie < 9"],
1010
"dependencies": {
1111
"@babel/polyfill": "7.0.0-beta.32",
12+
"awesome-bootstrap-checkbox": "^1.0.1",
1213
"bluebird": "^3.5.1",
1314
"body-parser": "^1.18.2",
14-
"bootstrap-sass": "^3.3.6",
15+
"bootstrap": "^4.1.1",
16+
"bootstrap-sass": "^3.3.7",
1517
"bundle-loader": "^0.5.5",
1618
"classnames": "^2.2.5",
1719
"cookie-parser": "^1.4.3",
1820
"core-js": "^2.5.1",
1921
"express": "^4.16.2",
2022
"express-graphql": "^0.6.11",
2123
"express-jwt": "^5.3.0",
24+
"font-awesome": "^4.7.0",
25+
"glyphicons-halflings": "^1.9.1",
2226
"graphql": "^0.11.7",
2327
"graphql-relay": "^0.5.1",
2428
"graphql-sequelize": "^5.3.2",
2529
"history": "^4.7.2",
30+
"imports-loader": "0.7.1",
2631
"isomorphic-fetch": "^2.2.1",
2732
"isomorphic-style-loader": "^4.0.0",
33+
"jquery": "^3.3.1",
2834
"jsonwebtoken": "^8.1.0",
35+
"messenger": "git+https://github.com/HubSpot/messenger.git#v1.4.2",
2936
"node-fetch": "^1.7.3",
3037
"normalize.css": "^7.0.0",
3138
"passport": "^0.4.0",
3239
"passport-facebook": "^2.1.1",
3340
"pretty-error": "^2.1.1",
34-
"prop-types": "^15.6.0",
41+
"prop-types": "^15.6.1",
3542
"query-string": "^5.0.1",
3643
"react": "^16.1.1",
3744
"react-bootstrap": "^0.31.5",
3845
"react-cookie": "^1.0.5",
3946
"react-dom": "^16.1.1",
47+
"react-google-maps": "^9.4.5",
4048
"react-redux": "^5.0.4",
4149
"react-router": "^4.0.0",
4250
"react-router-dom": "^4.0.0",
51+
"react-sparklines": "^1.7.0",
52+
"reactstrap": "^6.0.1",
53+
"recharts": "^1.0.0-beta.10",
4354
"redux": "^3.6.0",
4455
"redux-logger": "^3.0.1",
4556
"redux-thunk": "^2.2.0",
@@ -133,6 +144,9 @@
133144
"webpack-hot-middleware": "^2.20.0",
134145
"webpack-node-externals": "^1.6.0"
135146
},
147+
"resolutions": {
148+
"jquery": "3.3.1"
149+
},
136150
"lint-staged": {
137151
"*.{js,jsx}": ["eslint --fix", "git add --force"],
138152
"*.{json,graphql}": ["prettier --write", "git add --force"],

‎src/components/Footer/Footer.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
import React from 'react';
1111
import PropTypes from 'prop-types';
12+
import cx from 'classnames';
1213
import withStyles from 'isomorphic-style-loader/lib/withStyles';
1314
import { Link } from 'react-router-dom';
1415
import s from './Footer.scss';
@@ -24,7 +25,7 @@ class Footer extends React.Component {
2425

2526
render() {
2627
return (
27-
<footer className={[s.root, this.props.className].join(' ')}>
28+
<footer className={cx(s.root, this.props.className)}>
2829
<div className={s.container}>
2930
<span>© 2017 &nbsp;Flatlogic LLC </span>
3031
<span className={s.spacer}>·</span>

‎src/components/Header/Header.js

Lines changed: 66 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -8,20 +8,28 @@
88
*/
99

1010
import { connect } from 'react-redux';
11+
import cx from 'classnames';
1112
import React from 'react';
1213
import PropTypes from 'prop-types';
1314
import withStyles from 'isomorphic-style-loader/lib/withStyles';
1415
import {
1516
Navbar,
16-
MenuItem,
1717
Nav,
18-
NavDropdown,
1918
NavItem,
20-
Glyphicon,
21-
Badge,
22-
} from 'react-bootstrap';
23-
import { logoutUser } from '../../actions/user';
19+
Dropdown,
20+
DropdownToggle,
21+
DropdownMenu,
22+
DropdownItem,
23+
Input,
24+
InputGroup,
25+
InputGroupAddon,
26+
} from 'reactstrap';
27+
import {NavLink} from 'react-router-dom';
28+
29+
import Icon from '../Icon';
2430

31+
import photo from '../../images/photo.jpg';
32+
import { logoutUser } from '../../actions/user';
2533
import s from './Header.scss';
2634

2735
class Header extends React.Component {
@@ -34,50 +42,68 @@ class Header extends React.Component {
3442
sidebarToggle: () => {},
3543
};
3644

37-
doLogout() {
45+
state = { isOpen: false };
46+
47+
toggleDropdown = () => {
48+
this.setState(prevState => ({
49+
isOpen: !prevState.isOpen,
50+
}));
51+
}
52+
53+
doLogout = () => {
3854
this.props.dispatch(logoutUser());
3955
}
4056

4157
render() {
58+
const {isOpen} = this.state;
4259
return (
43-
<Navbar fluid>
44-
<Nav pullLeft>
60+
<Navbar className={s.root}>
61+
<Nav>
4562
<NavItem
46-
className={['visible-xs', s.menuButton].join(' ')}
47-
eventKey={1}
63+
className={cx('visible-xs', s.headerIcon)}
4864
href="#"
4965
onClick={this.props.sidebarToggle}
5066
>
51-
<Glyphicon glyph="menu-hamburger" />
67+
<i className="fa fa-bars fa-2x text-muted" />
68+
</NavItem>
69+
<NavItem>
70+
<InputGroup>
71+
<Input placeholder="Search for..." />
72+
<InputGroupAddon addonType="append" className="px-2">
73+
<i className="fa fa-search text-muted" />
74+
</InputGroupAddon>
75+
</InputGroup>
5276
</NavItem>
5377
</Nav>
54-
<Nav pullRight>
55-
<NavDropdown
56-
eventKey={1}
57-
title={
58-
<span>
59-
<Glyphicon glyph="user" className="mr-sm" />
60-
John <span className="fw-semi-bold">Willington</span>
61-
<Badge className="ml-sm badge-warning">4</Badge>
62-
</span>
63-
}
64-
noCaret
65-
id="basic-nav-dropdown"
66-
>
67-
<MenuItem eventKey={3.1}>Notifications</MenuItem>
68-
<MenuItem eventKey={3.2}>Action</MenuItem>
69-
<MenuItem eventKey={3.3}>Something else here</MenuItem>
70-
<MenuItem divider />
71-
<MenuItem eventKey={3.4}>Separated link</MenuItem>
72-
</NavDropdown>
73-
{/* eslint-disable */}
74-
<NavItem
75-
className="hidden-xs"
76-
eventKey={2}
77-
onClick={this.doLogout.bind(this)}
78-
>
79-
{/* eslint-enable */}
80-
Logout
78+
<Nav className="ml-auto">
79+
<Dropdown isOpen={isOpen} toggle={this.toggleDropdown}>
80+
<DropdownToggle nav>
81+
<img className={cx('rounded-circle mr-sm', s.adminPhoto)} src={photo} alt="administrator" />
82+
<span className="text-body">Administrator</span>
83+
<i className={cx('fa fa-angle-down ml-sm', s.arrow, {[s.arrowActive]: isOpen})} />
84+
</DropdownToggle>
85+
<DropdownMenu style={{width: '100%'}}>
86+
<DropdownItem>
87+
<NavLink to="/app/posts">Posts</NavLink>
88+
</DropdownItem>
89+
<DropdownItem>
90+
<NavLink to="/app/profile">Profile</NavLink>
91+
</DropdownItem>
92+
<DropdownItem onClick={this.doLogout}>
93+
Logout
94+
</DropdownItem>
95+
</DropdownMenu>
96+
</Dropdown>
97+
<NavItem className={cx('', s.headerIcon)}>
98+
<Icon glyph="mail"/>
99+
<span>8</span>
100+
</NavItem>
101+
<NavItem className={cx('', s.headerIcon)}>
102+
<Icon glyph="notification"/>
103+
<span>13</span>
104+
</NavItem>
105+
<NavItem className={cx('', s.headerIcon)}>
106+
<Icon glyph="settings"/>
81107
</NavItem>
82108
</Nav>
83109
</Navbar>
@@ -90,4 +116,4 @@ function mapStateToProps(state) {
90116
init: state.runtime.initialNow,
91117
};
92118
}
93-
export default connect(mapStateToProps)(withStyles(s)(Header));
119+
export default connect(mapStateToProps)(withStyles(s)(Header));

‎src/components/Header/Header.scss

Lines changed: 131 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,136 @@
11
/**
2-
* React Starter Kit (https://www.reactstarterkit.com/)
3-
*
4-
* Copyright © 2014-present Kriasoft, LLC. All rights reserved.
5-
*
6-
* This source code is licensed under the MIT license found in the
7-
* LICENSE.txt file in the root directory of this source tree.
8-
*/
2+
* React Starter Kit (https://www.reactstarterkit.com/)
3+
*
4+
* Copyright © 2014-present Kriasoft, LLC. All rights reserved.
5+
*
6+
* This source code is licensed under the MIT license found in the
7+
* LICENSE.txt file in the root directory of this source tree.
8+
*/
99

1010
@import '../../styles/app';
1111

12-
.menuButton {
13-
font-size: $font-size-large;
14-
margin-left: -$navbar-padding-horizontal + 5;
15-
margin-top: -1px;
16-
margin-bottom: -2px;
12+
.root {
13+
background: $navbar-bg-color;
14+
15+
:global {
16+
.input-group {
17+
background-color: $gray-100;
18+
19+
@include media-breakpoint-down(xs) {
20+
display: none;
21+
}
22+
23+
input {
24+
background: transparent;
25+
border: none;
26+
width: 250px;
27+
28+
@include media-breakpoint-down(md) {
29+
width: 125px;
30+
}
31+
32+
@include media-breakpoint-down(sm) {
33+
width: 175px;
34+
}
35+
36+
&:hover,
37+
&:active,
38+
&:focus {
39+
border: none;
40+
outline: none;
41+
box-shadow: none;
42+
}
43+
}
44+
45+
.input-group-append {
46+
display: flex;
47+
align-items: center;
48+
justify-content: center;
49+
50+
i {
51+
font-size: 1.25rem;
52+
}
53+
}
54+
}
55+
56+
.dropdown-menu {
57+
border: none;
58+
margin-top: 0.7rem;
59+
}
60+
61+
.dropdown-item {
62+
&:active {
63+
background-color: $gray-200;
64+
color: $text-color;
65+
}
66+
67+
&:focus {
68+
outline: none;
69+
}
70+
71+
a {
72+
display: block;
73+
color: $text-color;
74+
75+
&:hover {
76+
color: $text-color;
77+
text-decoration: none;
78+
cursor: default;
79+
}
80+
}
81+
}
82+
}
83+
}
84+
85+
.arrow {
86+
color: $gray-400;
87+
transition: 0.3s;
88+
right: 0;
89+
}
90+
91+
.arrowActive {
92+
transform: rotate(180deg);
93+
}
94+
95+
.adminPhoto {
96+
width: 40px;
97+
height: 40px;
98+
}
99+
100+
.headerIcon {
101+
display: flex;
102+
align-items: center;
103+
position: relative;
104+
105+
&:nth-child(n + 2) {
106+
margin-left: 1.25rem;
107+
108+
@include media-breakpoint-down(sm) {
109+
display: none;
110+
}
111+
}
112+
113+
&:first-child {
114+
margin-right: 1.25rem;
115+
}
116+
117+
img {
118+
max-height: 1.65rem;
119+
width: 1.65rem;
120+
}
121+
122+
span {
123+
position: absolute;
124+
display: flex;
125+
justify-content: center;
126+
align-items: center;
127+
top: 12px;
128+
right: -6px;
129+
color: $white;
130+
font-size: 0.55rem;
131+
width: 12px;
132+
height: 12px;
133+
border-radius: 50%;
134+
background-color: theme-color('danger');
135+
}
17136
}

‎src/components/Header/logo-small.png

-2.77 KB
Binary file not shown.

‎src/components/Header/[email protected]

-6.65 KB
Binary file not shown.

‎src/components/Icon/Icon.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
import icons from './icons';
5+
6+
const Icon = ({glyph}) => (
7+
icons[glyph] ? <img src={icons[glyph]} alt={`${glyph}-icon`} /> : null
8+
);
9+
10+
Icon.propTypes = {
11+
glyph: PropTypes.string.isRequired
12+
};
13+
14+
export default Icon;

0 commit comments

Comments
 (0)