33 | }
37 | />
38 |
39 |
40 |
43 | */}
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 | );
54 | }
55 | }
56 |
57 | const mapStateToProps = state => ({
58 | isAuthenticated: state.auth.isAuthenticated,
59 | });
60 |
61 | export default connect(mapStateToProps)(App);
62 |
--------------------------------------------------------------------------------
/src/components/Footer/Footer.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Flatlogic Dashboards (https://flatlogic.com/admin-dashboards)
3 | *
4 | * Copyright © 2015-present Flatlogic, 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 | */
9 |
10 | import React from 'react';
11 | import PropTypes from 'prop-types';
12 | import cx from 'classnames';
13 | import { Link } from 'react-router-dom';
14 |
15 | import s from './Footer.module.scss';
16 |
17 | class Footer extends React.Component {
18 | static propTypes = {
19 | className: PropTypes.string,
20 | };
21 |
22 | static defaultProps = {
23 | className: '',
24 | };
25 |
26 | render() {
27 | return (
28 |
39 | );
40 | }
41 | }
42 |
43 | export default Footer;
44 |
--------------------------------------------------------------------------------
/src/components/Footer/Footer.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Flatlogic Dashboards (https://flatlogic.com/admin-dashboards)
3 | *
4 | * Copyright © 2015-present Flatlogic, 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 | */
9 |
10 | @import '../../styles/app';
11 |
12 | .root {
13 | position: absolute;
14 | bottom: 0;
15 | left: 0;
16 | right: 0;
17 | font-size: $font-size-small - 1;
18 | }
19 |
20 | .container {
21 | margin: 0 auto;
22 | padding: 7px $content-padding-horizontal;
23 | }
24 |
25 | .spacer {
26 | display: inline-block;
27 | padding: 0 5px;
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/Footer/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Footer",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Footer.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/Header/Header.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Flatlogic Dashboards (https://flatlogic.com/admin-dashboards)
3 | *
4 | * Copyright © 2015-present Flatlogic, 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 | */
9 |
10 | import { connect } from 'react-redux';
11 | import cx from 'classnames';
12 | import React from 'react';
13 | import PropTypes from 'prop-types';
14 | import {
15 | Navbar,
16 | Nav,
17 | NavItem,
18 | Button,
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';
30 |
31 | import photo from '../../images/photo.jpg';
32 | import { logoutUser } from '../../actions/user';
33 | import s from './Header.module.scss';
34 |
35 | class Header extends React.Component {
36 | static propTypes = {
37 | sidebarToggle: PropTypes.func,
38 | dispatch: PropTypes.func.isRequired,
39 | };
40 |
41 | static defaultProps = {
42 | sidebarToggle: () => {},
43 | };
44 |
45 | state = { isOpen: false };
46 |
47 | toggleDropdown = () => {
48 | this.setState(prevState => ({
49 | isOpen: !prevState.isOpen,
50 | }));
51 | }
52 |
53 | doLogout = () => {
54 | this.props.dispatch(logoutUser());
55 | }
56 |
57 | render() {
58 | const {isOpen} = this.state;
59 | return (
60 |
45 |
75 | );
76 | }
77 | }
78 |
79 | export default withRouter(Layout);
80 |
--------------------------------------------------------------------------------
/src/components/Layout/Layout.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/app';
2 |
3 | .root {
4 | height: 100%;
5 | }
6 |
7 | .wrap {
8 | min-height: 100%;
9 | position: absolute;
10 | left: 0;
11 | right: 0;
12 | transition: left 0.3s ease-in-out, right 0.3s ease-in-out;
13 |
14 | @include media-breakpoint-up(md) {
15 | left: $sidebar-width-open;
16 | right: 0;
17 | }
18 | }
19 |
20 | .sidebarOpen {
21 | @include media-breakpoint-down(sm) {
22 | left: $sidebar-width-open;
23 | right: -$sidebar-width-open;
24 | }
25 | }
26 |
27 | .content {
28 | min-height: 100%;
29 | // 20px for footer height
30 | padding: #{$navbar-height + $content-padding-vertical} $content-padding-horizontal ($content-padding-vertical + 20px);
31 | background-color: $body-bg;
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/Layout/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Layout",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Layout.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/components/Sidebar/LinksGroup/LinksGroup.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import cx from 'classnames';
3 | import PropTypes from 'prop-types';
4 | import { NavLink } from 'react-router-dom';
5 | import { Collapse } from 'reactstrap';
6 | import { Route } from 'react-router';
7 |
8 | import Icon from '../../Icon/Icon';
9 |
10 | import s from './LinksGroup.module.scss';
11 |
12 | class LinksGroup extends Component {
13 | /* eslint-disable */
14 | static propTypes = {
15 | header: PropTypes.node.isRequired,
16 | headerLink: PropTypes.string,
17 | childrenLinks: PropTypes.array,
18 | glyph: PropTypes.string,
19 | className: PropTypes.string,
20 | };
21 | /* eslint-enable */
22 |
23 | static defaultProps = {
24 | headerLink: null,
25 | childrenLinks: null,
26 | className: '',
27 | glyph: null,
28 | };
29 |
30 | constructor(props) {
31 | super(props);
32 |
33 | this.state = {
34 | isOpen: false,
35 | };
36 | }
37 |
38 | render() {
39 | const { className, childrenLinks, headerLink, header, glyph } = this.props;
40 | const { isOpen } = this.state;
41 | if (!childrenLinks) {
42 | return (
43 |
49 |
51 | this.setState({
52 | sidebarOpen: !this.state.sidebarOpen,
53 | })
54 | }
55 | />
56 |
57 |
58 |
71 |
72 |
73 |
74 |
50 | {glyph &&
53 |
69 | {glyph &&
72 |
73 |
74 | {/* eslint-enable */}
75 | -
77 | {childrenLinks &&
78 | childrenLinks.map(child => (
79 |
-
80 |
84 | this.setState({ 85 | isOpen: true, 86 | }) 87 | } 88 | activeClassName={s.headerLinkActive} 89 | > 90 | {child.name} 91 | 92 |
93 | ))}
94 |
{this.props.title}
38 | ) : ( 39 |{this.props.children}
42 |
17 |
64 | );
65 | }
66 | }
67 |
68 | export default About;
69 |
--------------------------------------------------------------------------------
/src/pages/buttons/Buttons.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Row,
4 | Col,
5 | Button,
6 | ButtonGroup,
7 | ButtonToolbar,
8 | ButtonDropdown,
9 | DropdownToggle,
10 | DropdownMenu,
11 | DropdownItem,
12 | } from 'reactstrap';
13 |
14 | import Widget from '../../components/Widget';
15 |
16 | class Buttons extends React.Component {
17 | constructor(props) {
18 | super(props);
19 |
20 | this.toggleOne = this.toggleOne.bind(this);
21 | this.toggleTwo = this.toggleTwo.bind(this);
22 | this.toggleThree = this.toggleThree.bind(this);
23 | this.toggleFour = this.toggleFour.bind(this);
24 |
25 | this.onRadioBtnClickOne = this.onRadioBtnClickOne.bind(this);
26 | this.onRadioBtnClickTwo = this.onRadioBtnClickTwo.bind(this);
27 | this.onCheckboxBtnClickOne = this.onCheckboxBtnClickOne.bind(this);
28 | this.onCheckboxBtnClickTwo = this.onCheckboxBtnClickTwo.bind(this);
29 |
30 | this.state = {
31 | dropdownOpenOne: false,
32 | dropdownOpenTwo: false,
33 | dropdownOpenThree: false,
34 | dropdownOpenFour: false,
35 | cSelectedOne: [2],
36 | cSelectedTwo: [1, 3],
37 | rSelectedTwo: 2,
38 | rSelectedOne: null,
39 | };
40 | }
41 |
42 | onRadioBtnClickOne(rSelectedOne) {
43 | this.setState({ rSelectedOne });
44 | }
45 |
46 | onRadioBtnClickTwo(rSelectedTwo) {
47 | this.setState({ rSelectedTwo });
48 | }
49 |
50 | onCheckboxBtnClickOne(selected) {
51 | const index = this.state.cSelectedOne.indexOf(selected);
52 | if (index < 0) {
53 | this.state.cSelectedOne.push(selected);
54 | } else {
55 | this.state.cSelectedOne.splice(index, 1);
56 | }
57 | this.setState({ cSelectedOne: [...this.state.cSelectedOne] });
58 | }
59 |
60 | onCheckboxBtnClickTwo(selected) {
61 | const index = this.state.cSelectedTwo.indexOf(selected);
62 | if (index < 0) {
63 | this.state.cSelectedTwo.push(selected);
64 | } else {
65 | this.state.cSelectedTwo.splice(index, 1);
66 | }
67 | this.setState({ cSelectedTwo: [...this.state.cSelectedTwo] });
68 | }
69 |
70 | toggleOne() {
71 | this.setState({
72 | dropdownOpenOne: !this.state.dropdownOpenOne,
73 | });
74 | }
75 |
76 | toggleTwo() {
77 | this.setState({
78 | dropdownOpenTwo: !this.state.dropdownOpenTwo,
79 | });
80 | }
81 |
82 | toggleThree() {
83 | this.setState({
84 | dropdownOpenThree: !this.state.dropdownOpenThree,
85 | });
86 | }
87 |
88 | toggleFour() {
89 | this.setState({
90 | dropdownOpenFour: !this.state.dropdownOpenFour,
91 | });
92 | }
93 |
94 | render() {
95 | return (
96 | About Us
18 |
19 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat
20 | tortor fermentum mi fermentum dignissim. Nullam vel ipsum ut ligula elementum
21 | lobortis. Maecenas aliquam, massa laoreet lacinia pretium, nisi urna venenatis
22 | tortor, nec imperdiet tellus libero efficitur metus. Fusce semper posuere
23 | ligula, et facilisis metus bibendum interdum. Mauris at mauris sit amet sem
24 | pharetra commodo a eu leo. Nam at est non risus cursus maximus. Nam feugiat
25 | augue libero, id consectetur tortor bibendum non. Quisque nec fringilla lorem.
26 | Nullam efficitur vulputate mauris, nec maximus leo dignissim id.
27 |
28 | In hac habitasse platea dictumst. Duis sagittis dui ac ex suscipit maximus.
29 | Morbi pellentesque venenatis felis sed convallis. Nulla varius, nibh vitae
30 | placerat tempus, mauris sem elementum ipsum, eget sollicitudin nisl est vel
31 | purus. Fusce malesuada odio velit, non cursus leo fermentum id. Cras pharetra
32 | sodales fringilla. Etiam quis est a dolor egestas pellentesque. Maecenas non
33 | scelerisque purus, congue cursus arcu. Donec vel dapibus mi. Mauris maximus
34 | posuere placerat. Sed et libero eu nibh tristique mollis a eget lectus. Donec
35 | interdum augue sollicitudin vehicula hendrerit. Vivamus justo orci, molestie
36 | ac sollicitudin ac, lobortis at tellus. Etiam rhoncus ullamcorper risus eu
37 | tempor. Sed porttitor, neque ac efficitur gravida, arcu lacus pharetra dui, in
38 | consequat elit tellus auctor nulla. Donec placerat elementum diam, vitae
39 | imperdiet lectus luctus at.
40 |
41 | Nullam eu feugiat mi. Quisque nec tristique nisl, dignissim dictum leo. Nam
42 | non quam nisi. Donec rutrum turpis ac diam blandit, id pulvinar mauris
43 | suscipit. Pellentesque tincidunt libero ultricies risus iaculis, sit amet
44 | consequat velit blandit. Fusce quis varius nulla. Nullam nisi nisi, suscipit
45 | ut magna quis, feugiat porta nibh. Sed id enim lectus. Suspendisse elementum
46 | justo sapien, sit amet consequat orci accumsan et. Aliquam ornare ullamcorper
47 | sem sed finibus. Nullam ac lacus pulvinar, egestas felis ut, accumsan est.
48 |
49 | Pellentesque sagittis vehicula sem quis luctus. Proin sodales magna in lorem
50 | hendrerit aliquam. Integer eu varius orci. Vestibulum ante ipsum primis in
51 | faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum
52 | primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut at mauris
53 | nibh. Suspendisse maximus ac eros at vestibulum.
54 |
55 | Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque egestas
56 | tortor et dui consequat faucibus. Nunc vitae odio ornare, venenatis ligula a,
57 | vulputate nisl. Aenean congue varius ex, sit amet bibendum odio posuere at.
58 | Nulla facilisi. In finibus, nulla vitae tincidunt ornare, sapien nulla
59 | fermentum mauris, sed consectetur tortor arcu eget arcu. Vestibulum vel quam
60 | enim.
61 |
62 |
63 |
97 |
105 | {/* Color options */}
106 | Color Options
109 | } close collapse
110 | >
111 |
128 |
129 |
130 | {/* Size variants */}
131 | Size Variants
134 | } close collapse
135 | >
136 |
150 |
151 |
152 | Outline Buttons
155 | } close collapse
156 | >
157 |
175 |
176 |
177 | Rounded Buttons
180 | } close collapse
181 | >
182 |
199 |
200 |
201 | {/* Block Buttons */}
202 | Block Buttons
205 | } close collapse
206 | >
207 |
223 |
224 |
225 | {/* Disabled Buttons */}
226 | Disabled Buttons
229 | } close collapse
230 | >
231 |
246 |
247 |
248 | {/* Buttons Groups */}
249 | Button Groups
252 | } close collapse
253 | >
254 |
286 |
287 |
288 | {/* Button Dropdowns */}
289 | {/* todo: check after reactstrap update */}
290 | Button Dropdowns
293 | } close collapse
294 | >
295 |
362 |
363 |
364 |
365 |
366 | Button Options
369 | } close collapse
370 | >
371 |
372 | {/* Checkboxes */}
373 |
501 |
502 |
503 |
504 |
505 |
506 | );
507 | }
508 |
509 | }
510 |
511 | export default Buttons;
512 |
--------------------------------------------------------------------------------
/src/pages/buttons/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Buttons",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Buttons.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/charts/Charts.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import { Row, Col, Breadcrumb, BreadcrumbItem } from 'reactstrap';
3 |
4 | import Widget from '../../components/Widget';
5 |
6 | // Charts
7 | import LineChart from './charts/LineChart';
8 | import BarChart from './charts/BarChart';
9 | import PercentAreaChart from './charts/PercentAreaChart';
10 | import PieChart from './charts/PieChart';
11 |
12 | const data = [
13 | {name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
14 | {name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
15 | {name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
16 | {name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
17 | {name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
18 | {name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
19 | {name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
20 | ];
21 |
22 | export default class Charts extends PureComponent {
23 | render() {
24 | return(
25 | -
98 |
- YOU ARE HERE 99 |
- UI Buttons 100 |
Buttons - Styles
103 | 104 |
112 |
127 | 113 | Use any of the available button classes to quickly create a styled button. 114 | Semantically distinguishable beauty. 115 |
116 |117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 |
126 |
137 |
149 | 138 | Fancy larger or smaller buttons? 139 | Four separate sizes available for all use cases: 140 | from tiny 10px button to large one. 141 |
142 |143 | 144 | 145 | 146 | 147 |
148 |
158 |
174 |
159 | In need of a button, but not the hefty background colors they bring?
160 | Use outline property to remove all
161 | background images and colors on any button.
162 |
164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 |
173 |
183 |
198 |
184 | Use any of the available button properties to quickly create a styled button.
185 | Semantically distinguishable beauty. Use .btn-rounded or .btn-rounded-f.
186 |
188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 |
197 |
208 |
222 |
209 | Create block level buttons - those that span the full width
210 | of a parent— by adding block
211 | to <Button> component.
212 | Great for menu & social buttons.
213 |
232 |
245 |
233 | Make buttons look unclickable by fading them back 50%.
234 | Add the disabled to <Button> component.
235 |
237 | 238 | 239 |
240 |241 | 242 | 243 |
244 |
255 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
276 |
277 |
278 |
279 |
280 |
281 |
282 |
283 |
284 |
285 | 256 | Group a series of buttons together on a single 257 | line with the button group. 258 | Add on optional JavaScript radio and checkbox 259 | style behavior with Bootstrap buttons plugin. 260 |
261 |
296 |
361 | 297 | Add dropdown menus to nearly anything with 298 | this simple plugin, including the buttons, 299 | navbar, tabs, and pills. 300 | Both solid & segmented dropdown options available. 301 |
302 | 303 |
304 |
308 |
309 | One
310 |
311 |
312 | Action
313 | Another action
314 | Something else here
315 | Separated link
317 |
318 |
319 |
320 |
321 |
322 | One
323 |
324 |
325 | Action
326 | Another action
327 | Something else here
328 | Separated link
330 |
331 |
332 |
333 |
334 |
338 |
339 |
341 | Action
342 | Another action
343 | Something else here
344 | Separated link
346 |
347 |
348 |
349 |
350 |
352 | Action
353 | Another action
354 | Something else here
355 | Separated link
357 |
358 |
359 |
360 | Button Checkboxes
375 |
376 | Do more with buttons. Control button states
377 | or create groups of buttons for more components like
378 | toolbars.
379 | Use ButtonGroup to a group
380 | of checkboxes for checkbox style toggling on
381 | btn-group.
382 |
384 |
385 |
389 |
393 |
397 |
398 |
399 |
400 |
401 |
405 |
409 |
413 |
414 |
415 |
416 |
417 |
418 | {/* Radios */}
419 | Button Radios
421 |
422 | Do more with buttons. Control button states
423 | or create groups of buttons for more components like toolbars.
424 | Use ButtonGroup to a group of radio
425 | inputs for radio style toggling on btn-group.
426 |
428 |
429 |
433 |
437 |
441 |
442 |
443 |
444 |
445 |
449 |
453 |
457 |
458 |
459 |
460 |
461 | {/* Buttons with Icons */}
462 | Use with Icons
464 |465 | Fontawesome and Glyph- icons may be used in buttons, 466 | button groups for a toolbar, navigation, or prepended form inputs. 467 | Let your buttons shine! 468 |
469 |
470 |
474 |
478 |
482 |
483 |
484 |
488 |
492 |
498 |
499 |
500 |
26 |
27 | YOU ARE HERE
28 | Charts
29 |
30 |
32 | Simple Line Chart}>
35 |
37 |
38 | Simple Bar Chart}>
41 |
43 |
44 | Percent Area Chart}>
47 |
49 |
50 | Pie Chart}>
53 |
55 |
56 |
57 |
58 | )
59 | }
60 | }
--------------------------------------------------------------------------------
/src/pages/charts/charts/BarChart.js:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | BarChart,
5 | Bar,
6 | XAxis,
7 | YAxis,
8 | CartesianGrid,
9 | Tooltip,
10 | Legend,
11 | ResponsiveContainer
12 | } from 'recharts';
13 |
14 | class SimpleBarChart extends PureComponent {
15 | static propTypes = {
16 | data: PropTypes.arrayOf(PropTypes.shape({
17 | name: PropTypes.string,
18 | uv: PropTypes.number,
19 | pv: PropTypes.number,
20 | })).isRequired,
21 | }
22 |
23 | render () {
24 | return (
25 | Pretty Charts
31 |
36 |
49 | );
50 | };
51 |
52 | render () {
53 | return (
54 | {`${label} (Total: ${total})`}
37 |-
38 | {
39 | payload.map((entry, index) => (
40 | /* eslint-disable */
41 |
- 42 | {`${entry.name}: ${entry.value}(${this.getPercent(entry.value, total)})`} 43 | 44 | /* eslint-enable */ 45 | )) 46 | } 47 |
67 |
68 | YOU ARE HERE
69 | Dashboard
70 |
71 |
73 |
77 |
89 | }
90 | >
91 | Dashboard
72 |
78 |
83 |
84 | 85 | {' '} 86 | Users 87 |
88 || ID | 95 |Username | 96 |Status | 98 ||
|---|---|---|---|
| 1 | 103 |Alice | 104 |alice@email.com | 105 |106 | active 107 | | 108 |
| 2 | 111 |Bob | 112 |bob@email.com | 113 |114 | delayed 115 | | 116 |
| 3 | 119 |Duck | 120 |duck@email.com | 121 |122 | active 123 | | 124 |
| 4 | 127 |Shepherd | 128 |shepherd@email.com | 129 |130 | removed 131 | | 132 |
183 | Options
184 |
185 |
186 | Recent posts{' '}
187 |
188 | 5
189 |
190 |
191 | 192 | posts, that have been published recently 193 |
194 | 195 | } 196 | > 197 || {this.formatDate(new Date(post.updatedAt).toLocaleString())} | 203 |204 | {post.title} 205 | | 206 |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| {post.updatedAt} | 213 |214 | {post.title} 215 | | 216 |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Loading... | 222 ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
227 |
228 | View all Posts 13
229 |
230 |
231 |
261 |
264 |
267 |
270 |
273 |
276 |
277 | 291 | For more components please checkout{' '} 292 | 297 | reactstrap documentation 298 | 299 |
300 | 301 |
17 |
20 | );
21 | }
22 | }
23 |
24 | export default ErrorPage;
25 |
--------------------------------------------------------------------------------
/src/pages/error/ErrorPage.scss:
--------------------------------------------------------------------------------
1 | * {
2 | line-height: 1.2;
3 | margin: 0;
4 | }
5 |
6 | html {
7 | color: #888;
8 | display: table;
9 | font-family: sans-serif;
10 | height: 100%;
11 | text-align: center;
12 | width: 100%;
13 | }
14 |
15 | body {
16 | display: table-cell;
17 | vertical-align: middle;
18 | padding: 2em;
19 | }
20 |
21 | h1 {
22 | color: #555;
23 | font-size: 2em;
24 | font-weight: 400;
25 | }
26 |
27 | p {
28 | margin: 0 auto;
29 | width: 280px;
30 | }
31 |
32 | pre {
33 | text-align: left;
34 | margin-top: 2rem;
35 | }
36 |
37 | @media only screen and (max-width: 280px) {
38 | body,
39 | p {
40 | width: 95%;
41 | }
42 |
43 | h1 {
44 | font-size: 1.5em;
45 | margin: 0 0 0.3em;
46 | }
47 | }
--------------------------------------------------------------------------------
/src/pages/error/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "error",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./ErrorPage.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/google/Google.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | withGoogleMap,
4 | withScriptjs,
5 | GoogleMap,
6 | Marker,
7 | } from 'react-google-maps';
8 |
9 | import s from './Google.module.scss';
10 |
11 | const BasicMap = withScriptjs(withGoogleMap(() =>
12 | Error
18 |Sorry, a critical error occurred on this page.
19 |
25 |
34 | );
35 | }
36 | }
37 |
38 | export default Maps;
39 |
--------------------------------------------------------------------------------
/src/pages/google/Google.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/app';
2 |
3 | .MapContainer {
4 | position: absolute;
5 | top: 0;
6 | left: 0;
7 | bottom: 0;
8 | right: 0;
9 | height: 100%;
10 | }
11 |
--------------------------------------------------------------------------------
/src/pages/google/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Google",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Google.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/icons/Icons.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/app';
2 |
3 | .root {
4 | :global {
5 | .icon-list {
6 | margin-top: 1rem;
7 | }
8 |
9 | .icon-list-item {
10 | height: 32px;
11 | font-size: 14px;
12 | line-height: 32px;
13 |
14 | > a {
15 | color: $text-color;
16 | text-decoration: none;
17 | }
18 |
19 | .bi,
20 | .fa,
21 | .fi {
22 | width: 32px;
23 | margin-right: 10px;
24 | }
25 |
26 | &:hover {
27 | .bi,
28 | .fa,
29 | .fi {
30 | font-size: 28px;
31 | top: 2px;
32 | }
33 |
34 | .fa,
35 | .fi {
36 | vertical-align: -5px;
37 | }
38 |
39 | .bi {
40 | vertical-align: -6px;
41 | }
42 | }
43 | }
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/pages/icons/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Icons",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Icons.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/login/Login.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { withRouter, Redirect } from 'react-router-dom';
4 | import { connect } from 'react-redux';
5 | import {
6 | Alert,
7 | Button,
8 | FormGroup,
9 | Input,
10 | Row,
11 | Col,
12 | Form
13 | } from 'reactstrap';
14 | import s from './Login.module.scss';
15 | import Widget from '../../components/Widget';
16 | import Footer from "../../components/Footer";
17 | import { loginUser } from '../../actions/user';
18 | import jwt from 'jsonwebtoken';
19 | import config from '../../config'
20 |
21 | class Login extends React.Component {
22 | static propTypes = {
23 | dispatch: PropTypes.func.isRequired,
24 | isAuthenticated: PropTypes.bool,
25 | isFetching: PropTypes.bool,
26 | location: PropTypes.any, // eslint-disable-line
27 | errorMessage: PropTypes.string,
28 | };
29 |
30 | static defaultProps = {
31 | isAuthenticated: false,
32 | isFetching: false,
33 | location: {},
34 | errorMessage: null,
35 | };
36 |
37 | static isAuthenticated(token) {
38 | // We check if app runs with backend mode
39 | if (!config.isBackend && token) return true;
40 | if (!token) return;
41 | const date = new Date().getTime() / 1000;
42 | const data = jwt.decode(token);
43 | return date < data.exp;
44 | }
45 |
46 | constructor(props) {
47 | super(props);
48 |
49 | this.state = {
50 | login: 'user',
51 | password: 'password',
52 | };
53 | }
54 |
55 | changeLogin = (event) => {
56 | this.setState({login: event.target.value});
57 | }
58 |
59 | changePassword = (event) => {
60 | this.setState({password: event.target.value});
61 | }
62 |
63 | doLogin = (e) => {
64 | this.props.dispatch(
65 | loginUser({
66 | login: this.state.login,
67 | password: this.state.password,
68 | }),
69 | );
70 | e.preventDefault();
71 | }
72 |
73 | render() {
74 | const {from} = this.props.location.state || {
75 | from: {pathname: '/app'},
76 | };
77 |
78 | if (this.props.isAuthenticated) {
79 | // cant access login page while logged in
80 | return
26 |
33 |
85 |
86 |
89 |
135 |
136 |
137 |
138 |
139 | );
140 | }
141 | }
142 |
143 | function mapStateToProps(state) {
144 | return {
145 | isFetching: state.auth.isFetching,
146 | isAuthenticated: state.auth.isAuthenticated,
147 | errorMessage: state.auth.errorMessage,
148 | };
149 | }
150 |
151 | export default withRouter(connect(mapStateToProps)(Login));
152 |
153 |
--------------------------------------------------------------------------------
/src/pages/login/Login.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/app';
2 |
3 | .root {
4 | padding-top: 25vh;
5 | }
6 |
7 | .widget {
8 | max-width: 360px;
9 | margin: 0 auto;
10 | padding: 30px !important;
11 |
12 | :global .form-control {
13 | font-size: 14px;
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/src/pages/login/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "login",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Login.js"
6 |
7 | }
8 |
--------------------------------------------------------------------------------
/src/pages/notFound/NotFound.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Flatlogic Dashboards (https://flatlogic.com/admin-dashboards)
3 | *
4 | * Copyright © 2015-present Flatlogic, 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 | */
9 |
10 | import React from 'react';
11 |
12 | import s from './NotFound.module.scss';
13 |
14 | class NotFound extends React.Component {
15 | render() {
16 | return (
17 | React Dashboard
88 |Login to your Web App
90 |
91 | User your username and password to sign in
92 | Don't have an account? Sign up now!
93 |
18 |
21 | );
22 | }
23 | }
24 |
25 | export default NotFound
--------------------------------------------------------------------------------
/src/pages/notFound/NotFound.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Flatlogic Dashboards (https://flatlogic.com/admin-dashboards)
3 | *
4 | * Copyright © 2015-present Flatlogic, 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 | */
9 |
10 | @import '../../styles/app';
11 |
12 | .root {
13 | padding-top: 20vh;
14 | text-align: center;
15 | }
16 |
17 | .title {
18 | font-size: 80px;
19 | }
20 |
--------------------------------------------------------------------------------
/src/pages/notFound/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Not Found",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./NotFound.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/notifications/Notifications.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Row, Col, Button,
4 | } from 'reactstrap';
5 |
6 | import { toast } from 'react-toastify';
7 | import 'react-toastify/dist/ReactToastify.css';
8 | import uuid from 'uuid/v4'
9 | import Widget from '../../components/Widget';
10 | import s from './Notifications.module.scss';
11 |
12 | class Notifications extends React.Component {
13 |
14 | state = {
15 | options: {
16 | position: "top-right",
17 | autoClose: 5000,
18 | closeOnClick: false,
19 | pauseOnHover: false,
20 | draggable: true
21 | }
22 | }
23 |
24 | componentDidMount() {
25 | toast.success('Thanks for checking out Messenger!', {
26 | position: "bottom-right",
27 | autoClose: 5000,
28 | closeOnClick: true,
29 | pauseOnHover: false,
30 | draggable: true
31 | });
32 | }
33 |
34 | addSuccessNotification = () => toast.success('Showing success message was successful!', this.state.options);
35 |
36 | toggleLocation = (location) => {
37 | this.setState(prevState => ({
38 | options: {
39 | ...prevState.options,
40 | position: location
41 | }
42 | }));
43 | }
44 |
45 | addInfoNotification = () => {
46 | let id = uuid();
47 | toast.info(
48 | 404
19 |Sorry, the page you were trying to view does not exist.
20 |
49 | Launching thermonuclear war...
50 |
51 |
,
52 | {...this.state.options,toastId: id},
53 | );
54 | }
55 |
56 | launchNotification = (id) => toast.update(id, { ...this.state.options, render: "Thermonuclear war averted", type: toast.TYPE.SUCCESS });
57 |
58 | addErrorNotification = () => {
59 | let id = uuid();
60 | toast.error(
61 |
62 | Error destroying alien planet
63 |
64 |
,
65 | {...this.state.options,toastId: id}
66 | );
67 | }
68 |
69 | retryNotification = (id) => toast.update(id, {...this.state.options, render: 'Alien planet destroyed!', type: toast.TYPE.SUCCESS });
70 |
71 | render() {
72 | return (
73 |
74 | Messenger } close collapse settings>
82 |
83 |
-
75 |
- YOU ARE HERE 76 |
- UI Notifications 77 |
Messages - Notifications 79 |
80 | 81 |Layout options
85 |There are few position options available for notifications. You can click any of 86 | them 87 | to change notifications position:
88 |
89 |
{
91 | this.toggleLocation('top-left');
92 | }}
93 | />
94 |
{
96 | this.toggleLocation('top-right');
97 | }}
98 | />
99 |
{
101 | this.toggleLocation('top-center');
102 | }}
103 | />
104 |
{
106 | this.toggleLocation('bottom-left');
107 | }}
108 | />
109 |
11 |
14 | );
15 | }
16 | }
17 |
18 | export default withRouter(Posts);
19 |
--------------------------------------------------------------------------------
/src/pages/posts/list/PostList.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import { Link } from 'react-router-dom';
4 | import { connect } from 'react-redux';
5 | import {
6 | Table,
7 | Breadcrumb,
8 | BreadcrumbItem,
9 | } from 'reactstrap';
10 | import { mock } from './mock'
11 |
12 | import s from './PostList.module.scss';
13 | import Widget from '../../../components/Widget';
14 | import { fetchPosts } from '../../../actions/posts';
15 |
16 | class PostList extends React.Component {
17 | static propTypes = {
18 | dispatch: PropTypes.func.isRequired,
19 | posts: PropTypes.array, // eslint-disable-line
20 | isFetching: PropTypes.bool,
21 | };
22 |
23 | static defaultProps = {
24 | isFetching: false,
25 | posts: [],
26 | };
27 |
28 | static meta = {
29 | title: 'Posts list',
30 | description: 'About description',
31 | };
32 |
33 | componentDidMount() {
34 | if(process.env.NODE_ENV === "development") {
35 | this.props.dispatch(fetchPosts());
36 | }
37 | }
38 |
39 | formatDate = (str) => {
40 | return str.replace(/,.*$/,"")
41 | }
42 |
43 | render() {
44 | return (
45 |
104 | );
105 | }
106 | }
107 |
108 | function mapStateToProps(state) {
109 | return {
110 | isFetching: state.posts.isFetching,
111 | posts: state.posts.posts,
112 | };
113 | }
114 |
115 | export default connect(mapStateToProps)(PostList);
116 |
--------------------------------------------------------------------------------
/src/pages/posts/list/PostList.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/app';
2 |
3 | .root {
4 | // styles
5 | }
6 |
--------------------------------------------------------------------------------
/src/pages/posts/list/mock.js:
--------------------------------------------------------------------------------
1 | export const mock = [
2 | {
3 | id: 123325,
4 | updatedAt: '2019-11-14',
5 | title: ' React Native Starter - Mobile Template',
6 | content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
7 | },
8 | {
9 | id: 56785,
10 | updatedAt: '2019-12-14',
11 | title: 'Light Blue React Node.js - update version 7.0.1',
12 | content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
13 | },
14 | {
15 | id: 943325,
16 | updatedAt: '2019-15-14',
17 | title: 'Sing App React Node.js - update version 7.0.1',
18 | content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
19 | },
20 | {
21 | id: 84767,
22 | updatedAt: '2019-10-14',
23 | title: 'Sing App Vue Node.js - update version 5.0.3',
24 | content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
25 | },
26 | {
27 | id: 889412,
28 | updatedAt: '2019-11-14',
29 | title: 'Light Blue Vue Node.js - update version 3.0.5',
30 | content: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.'
31 | },
32 | ]
--------------------------------------------------------------------------------
/src/pages/posts/new/PostNew.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 | import {
4 | Row,
5 | Col,
6 | Form,
7 | FormGroup,
8 | Input,
9 | Button,
10 | ButtonGroup,
11 | Alert,
12 | Label,
13 | Breadcrumb,
14 | BreadcrumbItem,
15 | } from 'reactstrap';
16 | import { connect } from 'react-redux';
17 |
18 | import Widget from '../../../components/Widget';
19 |
20 | import { createPost } from '../../../actions/posts';
21 | import s from './PostNew.module.scss';
22 |
23 | class PostNew extends React.Component {
24 | static propTypes = {
25 | dispatch: PropTypes.func.isRequired,
26 | message: PropTypes.string,
27 | isFetching: PropTypes.bool,
28 | };
29 |
30 | static defaultProps = {
31 | isFetching: false,
32 | message: null,
33 | };
34 |
35 | static meta = {
36 | title: 'Create new post',
37 | description: 'About description',
38 | };
39 |
40 | constructor(props) {
41 | super(props);
42 |
43 | this.state = {
44 | title: '',
45 | content: '',
46 | };
47 | }
48 |
49 | changeTitle = (event) => {
50 | this.setState({title: event.target.value});
51 | }
52 |
53 | changeContent = (event) => {
54 | this.setState({content: event.target.value});
55 | }
56 |
57 | doCreatePost = (e) => {
58 | this.props
59 | .dispatch(
60 | createPost({
61 | title: this.state.title,
62 | content: this.state.content,
63 | }),
64 | )
65 | .then(() =>
66 | this.setState({
67 | title: '',
68 | content: '',
69 | }),
70 | );
71 | e.preventDefault();
72 | }
73 |
74 | render() {
75 | return (
76 | {
111 | this.toggleLocation('bottom-right');
112 | }}
113 | />
114 |
150 | );
151 | }
152 | }
153 |
154 | export default Notifications;
155 |
--------------------------------------------------------------------------------
/src/pages/notifications/Notifications.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/app';
2 |
3 | .root {
4 | :global {
5 | .location-selector {
6 | width: 100%;
7 | height: 220px;
8 | border: 1px dashed #bbb;
9 | background-color: $white;
10 | position: relative;
11 | }
12 |
13 | .location-selector .bit {
14 | @include transition(background-color 0.15s ease-in-out);
15 |
16 | background-color: $gray-300;
17 | cursor: pointer;
18 | position: absolute;
19 | }
20 |
21 | .location-selector .bit:hover {
22 | background-color: $gray-400;
23 | }
24 |
25 | .location-selector .bit.top,
26 | .location-selector .bit.bottom {
27 | height: 20%;
28 | width: 20%;
29 | margin: 0 40%;
30 | }
31 |
32 | .location-selector .bit.top {
33 | top: 0;
34 | }
35 |
36 | .location-selector .bit.bottom {
37 | bottom: 0;
38 | }
39 |
40 | .location-selector .bit.right,
41 | .location-selector .bit.left {
42 | height: 20%;
43 | width: 20%;
44 | margin-left: 0;
45 | margin-right: 0;
46 | }
47 |
48 | .location-selector .bit.right {
49 | right: 0;
50 | }
51 |
52 | .location-selector .bit.left {
53 | left: 0;
54 | }
55 |
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/src/pages/notifications/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Notifications",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Notifications.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/posts/Posts.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Switch, Route, withRouter } from 'react-router';
3 |
4 | import PostList from './list/PostList';
5 | import PostNew from './new/PostNew';
6 |
7 | class Posts extends React.Component {
8 | render() {
9 | return (
10 | {
116 | this.toggleLocation('bottom-center');
117 | }}
118 | />
119 |
120 |
121 |
122 | Notification Types
124 |Different types of notifications for lost of use cases. Custom classes are also 125 | supported.
126 | 128 | 130 | 134 | 135 | 136 |Dead Simple Usage
138 |Just few lines of code to instantiate a notifications object. Does not require 139 | passing any options:
140 |{'toast("Thanks for checking out Messenger!");'}More complex example:
142 |
143 | {'\ntoast.success( \'There was an explosion while processing your request.\', { \n position: location,\n autoClose: 5000, \n hideProgressBar: false, \n closeOnClick: true,\n pauseOnHover: true, \n draggable: true \n});\n\n'}
144 |
145 |
146 |
147 |
148 |
149 |
46 |
47 | YOU ARE HERE
48 | Posts
49 |
50 |
55 |
64 | }
65 | >
66 | Posts
51 |
56 |
57 | Create new
58 |
59 |
60 | 61 | Posts List 62 |
63 |
67 |
68 |
69 |
101 |
102 |
103 | | Title | 71 |Content | 72 |Last Updated | 73 ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {post.title} | 80 |{post.content.slice(0, 80)}... | 81 |{this.formatDate(new Date(post.updatedAt).toLocaleString())} | 82 ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| {post.title} | 89 |{post.content.slice(0, 80)}... | 90 |{post.updatedAt} | 91 ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Loading... | 97 ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
77 |
78 | YOU ARE HERE
79 | New Post
80 |
81 |
83 |
87 | Add Post Form
88 |
89 | }
90 | >
91 |
128 |
129 |
130 |
131 |
132 | );
133 | }
134 | }
135 |
136 | function mapStateToProps(state) {
137 | return {
138 | isFetching: state.posts.isFetching,
139 | message: state.posts.message,
140 | };
141 | }
142 |
143 | export default connect(mapStateToProps)(PostNew);
144 |
--------------------------------------------------------------------------------
/src/pages/posts/new/PostNew.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../../styles/app';
2 |
3 | .root {
4 | // styles
5 | }
6 |
--------------------------------------------------------------------------------
/src/pages/posts/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Posts",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Posts.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/privacy/Privacy.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Flatlogic Dashboards (https://flatlogic.com/admin-dashboards)
3 | *
4 | * Copyright © 2015-present Flatlogic, 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 | */
9 |
10 | import React from 'react';
11 |
12 | const Privacy = () => {
13 |
14 | return (
15 | Create new post
82 |
16 |
63 | );
64 | }
65 |
66 |
67 | export default Privacy;
68 |
--------------------------------------------------------------------------------
/src/pages/privacy/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Privacy",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Privacy.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/profile/Profile.js:
--------------------------------------------------------------------------------
1 | import React, {PureComponent} from 'react';
2 | import {
3 | Row,
4 | Col,
5 | Form,
6 | FormGroup,
7 | Label,
8 | Input,
9 | Button,
10 | ButtonGroup,
11 | Breadcrumb,
12 | BreadcrumbItem,
13 | } from 'reactstrap';
14 |
15 | import Widget from '../../components/Widget';
16 |
17 | import s from './Profile.module.scss';
18 |
19 | class Profile extends PureComponent {
20 | onSubmit(e) {
21 | e.preventDefault();
22 | }
23 |
24 | render() {
25 | return (
26 | Privacy Policy
17 |
18 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consequat
19 | tortor fermentum mi fermentum dignissim. Nullam vel ipsum ut ligula elementum
20 | lobortis. Maecenas aliquam, massa laoreet lacinia pretium, nisi urna venenatis
21 | tortor, nec imperdiet tellus libero efficitur metus. Fusce semper posuere
22 | ligula, et facilisis metus bibendum interdum. Mauris at mauris sit amet sem
23 | pharetra commodo a eu leo. Nam at est non risus cursus maximus. Nam feugiat
24 | augue libero, id consectetur tortor bibendum non. Quisque nec fringilla lorem.
25 | Nullam efficitur vulputate mauris, nec maximus leo dignissim id.
26 |
27 | In hac habitasse platea dictumst. Duis sagittis dui ac ex suscipit maximus.
28 | Morbi pellentesque venenatis felis sed convallis. Nulla varius, nibh vitae
29 | placerat tempus, mauris sem elementum ipsum, eget sollicitudin nisl est vel
30 | purus. Fusce malesuada odio velit, non cursus leo fermentum id. Cras pharetra
31 | sodales fringilla. Etiam quis est a dolor egestas pellentesque. Maecenas non
32 | scelerisque purus, congue cursus arcu. Donec vel dapibus mi. Mauris maximus
33 | posuere placerat. Sed et libero eu nibh tristique mollis a eget lectus. Donec
34 | interdum augue sollicitudin vehicula hendrerit. Vivamus justo orci, molestie
35 | ac sollicitudin ac, lobortis at tellus. Etiam rhoncus ullamcorper risus eu
36 | tempor. Sed porttitor, neque ac efficitur gravida, arcu lacus pharetra dui, in
37 | consequat elit tellus auctor nulla. Donec placerat elementum diam, vitae
38 | imperdiet lectus luctus at.
39 |
40 | Nullam eu feugiat mi. Quisque nec tristique nisl, dignissim dictum leo. Nam
41 | non quam nisi. Donec rutrum turpis ac diam blandit, id pulvinar mauris
42 | suscipit. Pellentesque tincidunt libero ultricies risus iaculis, sit amet
43 | consequat velit blandit. Fusce quis varius nulla. Nullam nisi nisi, suscipit
44 | ut magna quis, feugiat porta nibh. Sed id enim lectus. Suspendisse elementum
45 | justo sapien, sit amet consequat orci accumsan et. Aliquam ornare ullamcorper
46 | sem sed finibus. Nullam ac lacus pulvinar, egestas felis ut, accumsan est.
47 |
48 | Pellentesque sagittis vehicula sem quis luctus. Proin sodales magna in lorem
49 | hendrerit aliquam. Integer eu varius orci. Vestibulum ante ipsum primis in
50 | faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum
51 | primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut at mauris
52 | nibh. Suspendisse maximus ac eros at vestibulum.
53 |
54 | Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque egestas
55 | tortor et dui consequat faucibus. Nunc vitae odio ornare, venenatis ligula a,
56 | vulputate nisl. Aenean congue varius ex, sit amet bibendum odio posuere at.
57 | Nulla facilisi. In finibus, nulla vitae tincidunt ornare, sapien nulla
58 | fermentum mauris, sed consectetur tortor arcu eget arcu. Vestibulum vel quam
59 | enim.
60 |
61 |
62 |
27 |
28 | YOU ARE HERE
29 | Profile
30 |
31 |
33 |
37 | Edit Profile Form
38 |
39 | }
40 | >
41 |
68 |
69 |
70 |
71 |
72 | )
73 | }
74 | }
75 |
76 | export default Profile;
77 |
--------------------------------------------------------------------------------
/src/pages/profile/Profile.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Flatlogic Dashboards (https://flatlogic.com/admin-dashboards)
3 | *
4 | * Copyright © 2015-present Flatlogic, 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 | */
9 |
10 | @import '../../styles/app';
11 |
12 | .root {
13 | // some styles
14 | }
15 |
--------------------------------------------------------------------------------
/src/pages/profile/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Profile",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Profile.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/register/Register.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 |
4 | class Register extends React.Component {
5 | render() {
6 | return (
7 | Profile
32 |register
8 | );
9 | }
10 | }
11 |
12 | export default Register;
13 |
--------------------------------------------------------------------------------
/src/pages/register/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "register",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Register.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/tables/Static.module.scss:
--------------------------------------------------------------------------------
1 | @import '../../styles/app';
2 |
3 | .mainTable {
4 | td,
5 | thead {
6 | border-top: 1px solid $gray-200;
7 | padding: 1.25rem 1rem;
8 | }
9 |
10 | thead th {
11 | color: theme-color('light');
12 | text-transform: uppercase;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/pages/tables/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Tables",
3 | "version": "0.0.0",
4 | "private": true,
5 | "main": "./Tables.js"
6 | }
7 |
--------------------------------------------------------------------------------
/src/pages/typography/Typography.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Breadcrumb,
4 | BreadcrumbItem,
5 | Row,
6 | Col,
7 | } from 'reactstrap';
8 |
9 | import Widget from '../../components/Widget';
10 |
11 | const Typography = () => (
12 |
13 |
14 | YOU ARE HERE
15 | Typography
16 |
17 |
19 | Headings Default and customized}
22 | close collapse
23 | >
24 |
59 |
60 | Body texts Variations}
63 | close collapse
64 | >
65 |
105 |
106 |
107 |
108 | );
109 |
110 | export default Typography;
111 |
--------------------------------------------------------------------------------
/src/pages/typography/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "Typography",
3 | "version": "0.0.0",
4 | "main": "./Typography.js",
5 | "private": true
6 | }
7 |
--------------------------------------------------------------------------------
/src/reducers/auth.js:
--------------------------------------------------------------------------------
1 | import {
2 | LOGIN_REQUEST, LOGIN_SUCCESS, LOGIN_FAILURE, LOGOUT_SUCCESS,
3 | } from '../actions/user';
4 |
5 | const token = localStorage.getItem('token');
6 | export default function auth(state = {
7 | isFetching: false,
8 | isAuthenticated: !!token,
9 | }, action) {
10 | switch (action.type) {
11 | case LOGIN_REQUEST:
12 | return Object.assign({}, state, {
13 | isFetching: true,
14 | isAuthenticated: false,
15 | });
16 | case LOGIN_SUCCESS:
17 | return Object.assign({}, state, {
18 | isFetching: false,
19 | isAuthenticated: true,
20 | errorMessage: '',
21 | });
22 | case LOGIN_FAILURE:
23 | return Object.assign({}, state, {
24 | isFetching: false,
25 | isAuthenticated: false,
26 | errorMessage: action.payload,
27 | });
28 | case LOGOUT_SUCCESS:
29 | return Object.assign({}, state, {
30 | isAuthenticated: false,
31 | });
32 | default:
33 | return state;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/reducers/index.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import auth from './auth';
3 | import runtime from './runtime';
4 | import navigation from './navigation';
5 | import posts from './posts';
6 |
7 | export default combineReducers({
8 | auth,
9 | runtime,
10 | navigation,
11 | posts,
12 | });
13 |
--------------------------------------------------------------------------------
/src/reducers/navigation.js:
--------------------------------------------------------------------------------
1 | import { TOGGLE_SIDEBAR, OPEN_SIDEBAR, CLOSE_SIDEBAR } from '../constants';
2 |
3 | const initialState = {
4 | sidebarOpened: false,
5 | sidebarStatic: false,
6 | };
7 |
8 | export default function runtime(state = initialState, action) {
9 | switch (action.type) {
10 | case TOGGLE_SIDEBAR:
11 | return {
12 | ...state,
13 | sidebarOpened: !state.sidebarOpened,
14 | };
15 | case OPEN_SIDEBAR:
16 | return {
17 | ...state,
18 | sidebarOpened: true,
19 | };
20 | case CLOSE_SIDEBAR:
21 | return {
22 | ...state,
23 | sidebarOpened: false,
24 | };
25 | default:
26 | return state;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/reducers/posts.js:
--------------------------------------------------------------------------------
1 | import {
2 | CREATE_POST_INITIAL,
3 | CREATE_POST_REQUEST,
4 | CREATE_POST_SUCCESS,
5 | CREATE_POST_FAILURE,
6 | FETCH_POSTS_REQUEST,
7 | FETCH_POSTS_SUCCESS,
8 | FETCH_POSTS_FAILURE,
9 | } from '../actions/posts';
10 |
11 | export default function posts(
12 | state = {
13 | isFetching: false,
14 | },
15 | action,
16 | ) {
17 | switch (action.type) {
18 | case CREATE_POST_INITIAL:
19 | return Object.assign({}, state, {
20 | isFetching: false,
21 | message: null,
22 | });
23 | case CREATE_POST_REQUEST:
24 | return Object.assign({}, state, {
25 | isFetching: true,
26 | });
27 | case CREATE_POST_SUCCESS:
28 | return Object.assign({}, state, {
29 | isFetching: false,
30 | message: 'Post created successfully',
31 | });
32 | case CREATE_POST_FAILURE:
33 | return Object.assign({}, state, {
34 | isFetching: false,
35 | message:
36 | 'Due to security reasons posts creation is closed in demo version. Please setup locally to test',
37 | });
38 | case FETCH_POSTS_REQUEST:
39 | return Object.assign({}, state, {
40 | isFetching: true,
41 | });
42 | case FETCH_POSTS_SUCCESS:
43 | return Object.assign({}, state, {
44 | isFetching: false,
45 | posts: action.posts,
46 | });
47 | case FETCH_POSTS_FAILURE:
48 | return Object.assign({}, state, {
49 | isFetching: false,
50 | message: 'Something wrong happened. Please come back later',
51 | });
52 | default:
53 | return state;
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/src/reducers/runtime.js:
--------------------------------------------------------------------------------
1 | import { SET_RUNTIME_VARIABLE } from '../constants';
2 |
3 | export default function runtime(state = {}, action) {
4 | switch (action.type) {
5 | case SET_RUNTIME_VARIABLE:
6 | return {
7 | ...state,
8 | [action.payload.name]: action.payload.value,
9 | };
10 | default:
11 | return state;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | const isLocalhost = Boolean(
14 | window.location.hostname === 'localhost' ||
15 | // [::1] is the IPv6 localhost address.
16 | window.location.hostname === '[::1]' ||
17 | // 127.0.0.1/8 is considered localhost for IPv4.
18 | window.location.hostname.match(
19 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
20 | )
21 | );
22 |
23 | export function register(config) {
24 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
25 | // The URL constructor is available in all browsers that support SW.
26 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
27 | if (publicUrl.origin !== window.location.origin) {
28 | // Our service worker won't work if PUBLIC_URL is on a different origin
29 | // from what our page is served on. This might happen if a CDN is used to
30 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
31 | return;
32 | }
33 |
34 | window.addEventListener('load', () => {
35 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
36 |
37 | if (isLocalhost) {
38 | // This is running on localhost. Let's check if a service worker still exists or not.
39 | checkValidServiceWorker(swUrl, config);
40 |
41 | // Add some additional logging to localhost, pointing developers to the
42 | // service worker/PWA documentation.
43 | navigator.serviceWorker.ready.then(() => {
44 | console.log(
45 | 'This web app is being served cache-first by a service ' +
46 | 'worker. To learn more, visit https://bit.ly/CRA-PWA'
47 | );
48 | });
49 | } else {
50 | // Is not localhost. Just register service worker
51 | registerValidSW(swUrl, config);
52 | }
53 | });
54 | }
55 | }
56 |
57 | function registerValidSW(swUrl, config) {
58 | navigator.serviceWorker
59 | .register(swUrl)
60 | .then(registration => {
61 | registration.onupdatefound = () => {
62 | const installingWorker = registration.installing;
63 | if (installingWorker == null) {
64 | return;
65 | }
66 | installingWorker.onstatechange = () => {
67 | if (installingWorker.state === 'installed') {
68 | if (navigator.serviceWorker.controller) {
69 | // At this point, the updated precached content has been fetched,
70 | // but the previous service worker will still serve the older
71 | // content until all client tabs are closed.
72 | console.log(
73 | 'New content is available and will be used when all ' +
74 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
75 | );
76 |
77 | // Execute callback
78 | if (config && config.onUpdate) {
79 | config.onUpdate(registration);
80 | }
81 | } else {
82 | // At this point, everything has been precached.
83 | // It's the perfect time to display a
84 | // "Content is cached for offline use." message.
85 | console.log('Content is cached for offline use.');
86 |
87 | // Execute callback
88 | if (config && config.onSuccess) {
89 | config.onSuccess(registration);
90 | }
91 | }
92 | }
93 | };
94 | };
95 | })
96 | .catch(error => {
97 | console.error('Error during service worker registration:', error);
98 | });
99 | }
100 |
101 | function checkValidServiceWorker(swUrl, config) {
102 | // Check if the service worker can be found. If it can't reload the page.
103 | fetch(swUrl)
104 | .then(response => {
105 | // Ensure service worker exists, and that we really are getting a JS file.
106 | const contentType = response.headers.get('content-type');
107 | if (
108 | response.status === 404 ||
109 | (contentType != null && contentType.indexOf('javascript') === -1)
110 | ) {
111 | // No service worker found. Probably a different app. Reload the page.
112 | navigator.serviceWorker.ready.then(registration => {
113 | registration.unregister().then(() => {
114 | window.location.reload();
115 | });
116 | });
117 | } else {
118 | // Service worker found. Proceed as normal.
119 | registerValidSW(swUrl, config);
120 | }
121 | })
122 | .catch(() => {
123 | console.log(
124 | 'No internet connection found. App is running in offline mode.'
125 | );
126 | });
127 | }
128 |
129 | export function unregister() {
130 | if ('serviceWorker' in navigator) {
131 | navigator.serviceWorker.ready.then(registration => {
132 | registration.unregister();
133 | });
134 | }
135 | }
136 |
--------------------------------------------------------------------------------
/src/static.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": "build/",
3 | "routes": {
4 | "/**": "index.html"
5 | }
6 | }
--------------------------------------------------------------------------------
/src/styles/_general.scss:
--------------------------------------------------------------------------------
1 | html {
2 | font-weight: 100;
3 | font-size: 14px;
4 | }
5 |
6 | body {
7 | overflow-x: hidden;
8 | }
9 |
10 | html,
11 | body,
12 | .app {
13 | height: 100%;
14 | }
15 |
16 | a {
17 | cursor: pointer;
18 | transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
19 | }
20 |
21 | th {
22 | font-weight: 600;
23 | }
24 |
25 | label {
26 | font-weight: 600;
27 | }
28 |
--------------------------------------------------------------------------------
/src/styles/_mixins.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Custom application mixins available through out the app
3 | */
4 |
5 | // define sass mixin
6 | // Generates single property classes
7 | // -------------------------
8 | @mixin property-variants($base, $property, $variants: ()) {
9 | @each $size, $value in $variants {
10 | @if $size == 'md' {
11 | #{$base} {
12 | #{$property}: $value;
13 | }
14 |
15 | #{$base}-n {
16 | #{$property}: $value;
17 | }
18 | }
19 |
20 | #{$base}-#{$size} {
21 | #{$property}: $value;
22 | }
23 |
24 | #{$base}-n-#{$size} {
25 | #{$property}: -$value;
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/styles/_overrides.scss:
--------------------------------------------------------------------------------
1 | // Container
2 |
3 | .container-fluid {
4 | padding-left: 30px;
5 | padding-right: 30px;
6 | }
7 |
8 | // Navbar
9 |
10 | .navbar {
11 | border: none;
12 | height: $navbar-height;
13 | border-radius: $navbar-border-radius;
14 | margin-bottom: $navbar-margin-bottom;
15 | padding: 0.5rem 2.25rem;
16 | }
17 |
18 | @media (min-width: $grid-float-breakpoint) {
19 | .navbar-right {
20 | .dropdown-menu {
21 | left: 0;
22 | }
23 | }
24 | }
25 |
26 | // Nav
27 |
28 | .nav {
29 | &.nav-tabs {
30 | .nav-item {
31 | a {
32 | color: $text-color;
33 |
34 | &.active {
35 | background-color: theme-color('danger');
36 | border-color: theme-color('danger');
37 | color: white;
38 | }
39 | }
40 | }
41 | }
42 | }
43 |
44 | // Progress
45 |
46 | .progress-bar {
47 | @include box-shadow(none);
48 | }
49 |
50 | .progress-sm {
51 | height: 1rem;
52 | margin-bottom: 1rem;
53 | }
54 |
55 | .progress-xs {
56 | height: 5px;
57 | margin-bottom: 0.5rem;
58 | }
59 |
60 | // Breadcrumb
61 |
62 | .breadcrumb {
63 | margin-top: -15px;
64 | font-size: $font-size-small;
65 |
66 | > .active {
67 | font-weight: 600;
68 | }
69 |
70 | > li + li::before {
71 | color: $gray-light;
72 | }
73 | }
74 |
75 | // Form
76 |
77 | .form-control {
78 | font-size: $font-size-base;
79 |
80 | @include box-shadow(none);
81 | @include transition(border-color ease-in-out 0.15s, background-color ease-in-out 0.15s);
82 |
83 | &:focus {
84 | @include box-shadow(none);
85 | }
86 |
87 | &.no-border {
88 | border: none;
89 | background-color: darken($input-bg, 5%);
90 |
91 | &:focus {
92 | background-color: darken($input-bg, 7%);
93 | }
94 | }
95 | }
96 |
97 | .input-sm {
98 | font-size: 13px;
99 | }
100 |
101 | // Buttons
102 |
103 | .btn-inverse {
104 | @include button-variant($btn-inverse-color, $btn-inverse-bg, $btn-inverse-border);
105 | }
106 |
107 | // Alerts
108 |
109 | .alert {
110 | font-size: $font-size-small;
111 |
112 | .close {
113 | color: rgba(#000, 0.4);
114 | }
115 | }
116 |
117 | .alert-sm {
118 | padding: 10px 15px;
119 |
120 | .close {
121 | font-size: 20px;
122 | top: 0;
123 | right: -8px;
124 | }
125 | }
126 |
127 | // Badge
128 |
129 | .badge {
130 | font-size: 12px;
131 |
132 | .list-group-item > & {
133 | margin-top: 2px;
134 | }
135 | }
136 |
137 | // Table
138 |
139 | .table-no-border {
140 | margin-left: -$table-cell-padding;
141 | margin-right: -$table-cell-padding;
142 |
143 | > thead > tr > th,
144 | > thead > tr > td,
145 | > tbody > tr > th,
146 | > tbody > tr > td,
147 | > tfoot > tr > th,
148 | > tfoot > tr > td {
149 | border-top: 0;
150 | }
151 | }
152 |
153 | .table-sm {
154 | font-size: $font-size-small;
155 |
156 | > thead > tr > th,
157 | > thead > tr > td,
158 | > tbody > tr > th,
159 | > tbody > tr > td,
160 | > tfoot > tr > th,
161 | > tfoot > tr > td {
162 | padding: 4px;
163 | }
164 |
165 | &.table-no-border {
166 | margin-left: -4px;
167 | margin-right: -4px;
168 | }
169 | }
170 |
171 | // Code
172 |
173 | pre {
174 | display: block;
175 | padding: 6.5px;
176 | margin: 0 0 (1rem / 2);
177 | font-size: 13px;
178 | line-height: 1rem;
179 | word-break: break-all;
180 | word-wrap: break-word;
181 | color: $pre-color;
182 | background-color: $gray-100;
183 | border: 1px solid $gray-400;
184 | border-radius: $border-radius;
185 |
186 | // Account for some code outputs that place code tags in pre tags
187 | code {
188 | padding: 0;
189 | font-size: inherit;
190 | color: inherit;
191 | white-space: pre-wrap;
192 | background-color: transparent;
193 | border-radius: 0;
194 | }
195 | }
196 |
197 | // List
198 |
199 | .list-group {
200 | padding: 0 1.25rem;
201 | background: $white;
202 |
203 | .list-group-item {
204 | border: none;
205 | padding: 1.25rem 0;
206 | color: theme-color('info');
207 | border-top: 1px solid $gray-200;
208 |
209 | &:hover {
210 | z-index: 0;
211 | }
212 |
213 | &:first-child {
214 | border-top: none;
215 | }
216 | }
217 | }
218 |
--------------------------------------------------------------------------------
/src/styles/_utils.scss:
--------------------------------------------------------------------------------
1 | $margin-vertical-variants: (xlg: 40px, lg: $line-height-computed*3/2, md: $line-height-computed, sm: $line-height-computed/2, xs: $line-height-computed/4, 0: 0);
2 | $margin-horizontal-variants: (lg: 20px, md: 15px, sm: 10px, xs: 5px, 0: 0);
3 |
4 | @include property-variants('.mt', 'margin-top', $margin-vertical-variants);
5 | @include property-variants('.mb', 'margin-bottom', $margin-vertical-variants);
6 | @include property-variants('.ml', 'margin-left', $margin-horizontal-variants);
7 | @include property-variants('.mr', 'margin-right', $margin-horizontal-variants);
8 |
9 | $opacity-variants: (10: 0.1, 20: 0.2, 30: 0.3, 40: 0.4, 50: 0.5, 60: 0.6, 70: 0.7, 80: 0.8, 90: 0.9);
10 |
11 | @include property-variants('.opacity', 'opacity', $opacity-variants);
12 |
13 | .fw-thin {
14 | font-weight: 300;
15 | }
16 |
17 | .fw-normal {
18 | font-weight: 400;
19 | }
20 |
21 | .fw-semi-bold {
22 | font-weight: 600;
23 | }
24 |
25 | .fw-bold {
26 | font-weight: 700;
27 | }
28 |
29 | .fs-sm {
30 | font-size: $font-size-small;
31 | }
32 |
33 | .text-default {
34 | color: $text-color;
35 | }
36 |
37 | @include bg-variant('.bg-dark', $text-color);
38 |
39 | .td-underline {
40 | text-decoration: underline;
41 | }
42 |
43 | .widget-table-overflow {
44 | margin: 0 #{-$widget-padding-x} #{-$widget-padding-y};
45 | }
46 |
--------------------------------------------------------------------------------
/src/styles/_variables.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Flatlogic Dashboards (https://flatlogic.com/admin-dashboards)
3 | *
4 | * Copyright © 2015-present Flatlogic, 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 | */
9 |
10 | /*
11 | * Typography
12 | * ======================================================================== */
13 | $font-size-base: 1rem;
14 | $font-size-lg: 1.25rem !default;
15 | $font-size-sm: 0.875rem !default;
16 | $font-size-large: 1.1rem;
17 | $font-size-small: 0.9rem;
18 | $font-size-index: 0.7rem;
19 | $font-family-base: 'Nunito', 'HelveticaNeue-Light', sans-serif;
20 |
21 | $line-height-computed: 1.5rem;
22 |
23 | $font-weight-thin: 300;
24 | $font-weight-normal: 400;
25 | $font-weight-semi-bold: 600;
26 | $font-weight-bold: 700;
27 |
28 | $gray-100: #f9f6f2;
29 | $gray-200: #efedea;
30 | $gray-300: #cccbca;
31 | $gray-400: #ccc;
32 | $gray-500: #666;
33 | $gray-600: #6c757d;
34 | $gray-700: #4d4d4d;
35 | $gray-800: #343a40;
36 | $gray-900: #212529;
37 |
38 | $gray-light: $gray-100;
39 | $text-muted: $gray-300 !default;
40 |
41 | $brand-primary: #3754a5 !default; // #337ab7
42 | $brand-secondary: #beccfd !default;
43 | $brand-success: #1ab394 !default;
44 | $brand-info: #5d80f9 !default;
45 | $brand-warning: #f3c363 !default;
46 | $brand-danger: #eb3349 !default;
47 |
48 | $theme-colors: (
49 | primary: $brand-primary,
50 | secondary: $brand-secondary,
51 | success: $brand-success,
52 | info: $brand-info,
53 | warning: $brand-warning,
54 | danger: $brand-danger,
55 | light: $gray-300,
56 | dark: $gray-800,
57 | inverse: $gray-700,
58 | gray: $gray-400,
59 | default: #f8f8f8
60 | );
61 |
62 | $text-color: $gray-700;
63 | $link-color: #337ab7;
64 |
65 | $state-success-text: $brand-success !default;
66 | $state-success-bg: lighten($brand-success, 70%) !default;
67 |
68 | $state-info-text: $brand-info !default;
69 | $state-info-bg: lighten($brand-info, 70%) !default;
70 |
71 | $state-warning-text: $brand-warning !default;
72 | $state-warning-bg: lighten($brand-warning, 70%) !default;
73 |
74 | $state-danger-text: $brand-danger !default;
75 | $state-danger-bg: lighten($brand-danger, 70%) !default;
76 |
77 | $alert-success-bg: #e6fff2 !default;
78 | $alert-success-text: $state-success-text !default;
79 | $alert-success-border: rgba($alert-success-text, 0.15) !default;
80 |
81 | $alert-info-bg: #d2f1fb !default;
82 | $alert-info-text: $link-color !default;
83 | $alert-info-border: rgba($alert-info-text, 0.09) !default;
84 |
85 | $alert-warning-bg: #fff8e6 !default;
86 | $alert-warning-text: darken($state-warning-text, 5%) !default;
87 | $alert-warning-border: rgba($state-warning-text, 0.2) !default;
88 |
89 | $alert-danger-bg: #fbdcd7 !default;
90 | $alert-danger-text: $state-danger-text !default;
91 | $alert-danger-border: rgba($alert-danger-text, 0.09) !default;
92 |
93 | //== Gradients
94 | //
95 |
96 | $logo-gradient: linear-gradient(to right, $brand-danger, #f45c43);
97 |
98 | //== Iconography
99 | //
100 | $icon-font-path: '../../node_modules/bootstrap-sass/assets/fonts/bootstrap/'; // overriding bootstrap variable
101 |
102 | /*
103 | * Layout
104 | * ======================================================================== */
105 |
106 | $max-content-width: 1000px;
107 |
108 | $grid-float-breakpoint: 0;
109 |
110 | $body-bg: $gray-100;
111 |
112 | /*
113 | * Media queries breakpoints
114 | * ======================================================================== */
115 |
116 | $screen-xs-min: 480px; /* Extra small screen / phone */
117 | $screen-sm-min: 768px; /* Small screen / tablet */
118 | $screen-md-min: 992px; /* Medium screen / desktop */
119 | $screen-lg-min: 1200px; /* Large screen / wide desktop */
120 |
121 | //== Components
122 | //
123 |
124 | $content-padding-horizontal: 30px;
125 | $content-padding-vertical: 40px;
126 |
127 | $navbar-bg-color: #fff;
128 | $navbar-height: 75px !default;
129 | $navbar-border-radius: 0;
130 | $navbar-margin-bottom: -$navbar-height !default;
131 |
132 | $sidebar-width-open: 200px;
133 | $sidebar-transition-time: 0.3s !default;
134 |
135 | $sidebar-bg-color: #fff;
136 | $sidebar-color: #4d4d4d;
137 |
138 | $breadcrumb-separator: '>';
139 | $breadcrumb-padding-horizontal: 0;
140 | $breadcrumb-bg: transparent;
141 |
142 | $badge-font-weight: 600;
143 |
144 | $breadcrumb-divider: '>';
145 | $breadcrumb-padding-y: 0;
146 | $breadcrumb-padding-x: 0;
147 | $breadcrumb-bg: transparent;
148 |
149 | $widget-bg: #fff;
150 | $widget-title-color: #444;
151 | $widget-padding-y: 15px;
152 | $widget-padding-x: 20px;
153 |
154 | $btn-inverse-color: #fff;
155 | $btn-inverse-bg: $gray-700;
156 | $btn-inverse-border: #414749;
157 |
158 | $input-height-small: 2rem;
159 |
160 | $enable-rounded: false;
161 |
--------------------------------------------------------------------------------
/src/styles/app.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Customized version of bootstrap using variables from _variables.scss.
3 | * This file is loaded via separate loader thus allowing to use original bootstrap classes (e.g. .btn-default) through out the app.
4 | */
5 |
6 |
7 | @import '../../node_modules/bootstrap/scss/functions';
8 | @import '_variables';
9 | @import '../../node_modules/bootstrap/scss/variables';
10 | @import '../../node_modules/bootstrap/scss/mixins';
11 | @import '_mixins';
12 |
--------------------------------------------------------------------------------
/src/styles/theme.scss:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Nunito:300,400,600,800');
2 | @import '../../node_modules/bootstrap/scss/functions';
3 | @import '_variables';
4 | @import '../../node_modules/bootstrap/scss/bootstrap';
5 | @import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
6 | @import '../../node_modules/bootstrap-icons/font/bootstrap-icons.css';
7 | @import '../../node_modules/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox';
8 | @import '../../node_modules/font-awesome/css/font-awesome.min.css';
9 | @import '_mixins';
10 | @import '_overrides';
11 | @import '_general';
12 | @import '_utils';
13 |
--------------------------------------------------------------------------------
/table.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/flatlogic/react-dashboard/0a45547c50246dc8f3da058196f2d87f10b421c5/table.png
--------------------------------------------------------------------------------
Typography - Texts & Display
18 |Default headings
25 |Basic headings for everyday use
26 |
27 |
28 |
45 |
46 | h1. Heading
30 |h2. Heading
31 |h3. Heading
32 |h4. Heading
33 |h5. Heading
34 |h6. Heading
35 | 36 |h1. Heading
38 |h2. Heading
39 |h3. Heading
40 |h4. Heading
41 |h5. Heading
42 |h6. Heading
43 | 44 |Customized headings
47 |Enhanced with additional text
48 |
49 |
53 | 50 | Headings And some clarification text 51 |
52 |Lead
54 |Make a paragraph stand out by adding .lead.
56 |
58 | Sing App is admin dashboard template built with Bootstrap
57 |Basic texts
66 |Styling for common texts
67 |
68 |
75 | You can use the mark tag to highlight text.
69 |This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as an addition to the document.
71 |This line of text is meant to be treated as fine print.
72 |This line rendered as italicized text.
73 |This line rendered as bold text.
74 |Font weights
76 |Various font weights supported
77 |
78 |
83 | Thin (default) font weight
79 |Normal font weight
80 |Semi bold to empasize important thing
81 |Bold font as a high priority
82 |Colors
84 |Bootstrap state colors can be applied to texts too
85 |
86 |
92 | Some danger text
87 |Some warning text
88 |Some succes text
89 |Some primary text
90 |Some info text
91 |Blockquotes
93 |Citing someone is really easy
94 |
95 |
104 | 96 |103 |Don't get set into one form, adapt it and build your own, and let 97 | it grow, be like water. Empty your mind, be formless, shapeless — like water. 98 | Now you put water in a cup, it becomes the cup; You put water into a bottle it 99 | becomes the bottle; You put it in a teapot it becomes the teapot. Now water can 100 | flow or it can crash. Be water, my friend.
101 | 102 |