- Large Input
-
+ Large Input
-
+
+
+
@@ -630,16 +625,26 @@ class Forms extends Component {
+
+
+
-
+
+
+
.00
+
+ .00
+
@@ -654,16 +659,16 @@ class Forms extends Component {
- Buttons Groups
+ Button Groups
diff --git a/React_Full_Project/src/views/Components/Forms/package.json b/React_Full_Project/src/views/Base/Forms/package.json
similarity index 100%
rename from React_Full_Project/src/views/Components/Forms/package.json
rename to React_Full_Project/src/views/Base/Forms/package.json
diff --git a/React_Full_Project/src/views/Base/Jumbotrons/Jumbotrons.js b/React_Full_Project/src/views/Base/Jumbotrons/Jumbotrons.js
new file mode 100644
index 0000000..83eaa95
--- /dev/null
+++ b/React_Full_Project/src/views/Base/Jumbotrons/Jumbotrons.js
@@ -0,0 +1,57 @@
+import React, {Component} from 'react';
+import {
+ Row,
+ Col,
+ Card,
+ CardHeader,
+ CardBody,
+ CardFooter,
+ Jumbotron, Button, Container
+} from 'reactstrap';
+
+class Jumbotrons extends Component {
+
+ render() {
+ return (
+
+
+
+ Jumbotron
+
+
+
+
+ Hello, world!
+ This is a simple hero unit, a simple Jumbotron-style component for calling extra
+ attention to featured content or information.
+ It uses utility classes for typgraphy and spacing to space content out within the larger container.
+
+ Learn More
+
+
+
+
+
+
+ Jumbotron fluid
+
+
+
+
+ Fluid jumbotron
+ This is a modified jumbotron that occupies the entire horizontal space of its parent.
+
+
+
+
+
+
+
+
+ List Group
+
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+
+
+
+
+
+ List Group
+ tags
+
+
+
+ Cras justo odio 14
+ Dapibus ac facilisis in 2
+ Morbi leo risus 1
+
+
+
+
+
+
+
+
+ List Group
+ disabled items
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+
+
+
+
+
+ List Group
+ contextual classes
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+
+
+
+
+
+
+
+
+ List Group
+ anchors
+
+
+ Be sure to not use the standard .btn classes here .
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+
+
+
+
+
+
+ List Group
+ buttons
+
+
+
+ Cras justo odio
+ Dapibus ac facilisis in
+ Morbi leo risus
+ Porta ac consectetur ac
+ Vestibulum at eros
+
+
+
+
+
+
+
+
+ List Group
+ custom content
+
+
+
+
+ List group item heading
+
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+
+
+
+ List group item heading
+
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+
+
+
+ List group item heading
+
+ Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
+
+
+
+
+
+
+
+
+
+
+ Navbar
+
+
+
+
+ Bootstrap
+
+
+
+
+ Components
+
+
+ Github
+
+
+ {/*Warning: React does not recognize the `inNavbar` prop on a DOM element.*/}
+ {/*waiting for reactstrap@5.0.0-alpha.5*/}
+
+ Options
+
+
+
+ Option 1
+
+
+ Option 2
+
+
+ Reset
+
+
+
+
+
+
+
+
+
+
+ Navbar Toggler
+
+
+
+ Bootstrap
+
+
+
+ Components
+
+
+ Github
+
+
+
+
+
+
+
+
+
+ Navs
+
+
+
+ List Based
+
+
+ Link
+
+
+ Link
+
+
+ Another Link
+
+
+ Disabled Link
+
+
+ Link Based
+
+ Link Link Another Link Disabled Link
+
+
+
+
+
+ Navs Tabs
+
+
+
+
+ Link
+
+ {this.toggle(0)}}>
+
+ Dropdown
+
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+
+ Link
+
+
+ Another Link
+
+
+ Disabled Link
+
+
+
+
+
+
+ Navs Pills
+
+
+
+
+ Link
+
+ {this.toggle(1)}}>
+
+ Dropdown
+
+
+ Header
+ Action
+ Another Action
+ Another Action
+
+
+
+ Link
+
+
+ Another Link
+
+
+ Disabled Link
+
+
+
+
+
+
+ Navs Vertical
+
+
+ List Based
+
+
+ Link
+
+
+ Link
+
+
+ Another Link
+
+
+ Disabled Link
+
+
+ Link based
+
+ Link Link Another Link Disabled Link
+
+
+
+
+
+
+ Pagination
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ 2
+
+
+
+
+ 3
+
+
+
+
+ 4
+
+
+
+
+ 5
+
+
+
+
+
+
+
+
+
+ Pagination disabled and active states
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ 2
+
+
+
+
+ 3
+
+
+
+
+ 4
+
+
+
+
+ 5
+
+
+
+
+
+
+
+
+
+ Pagination sizing
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ 2
+
+
+
+
+ 3
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ 2
+
+
+
+
+ 3
+
+
+
+
+
+
+
+
+
+
+ 1
+
+
+
+
+ 2
+
+
+
+
+ 3
+
+
+
+
+
+
+
+
+
+ {this.props.item.text}
+
+
+ Popover Title
+ Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+
+ );
+ }
+}
+
+class Popovers extends Component {
+
+ constructor(props) {
+ super(props);
+
+ this.toggle = this.toggle.bind(this);
+ this.state = {
+ popoverOpen: false,
+ popovers: [
+ {
+ placement: 'top',
+ text: 'Top'
+ },
+ {
+ placement: 'bottom',
+ text: 'Bottom'
+ },
+ {
+ placement: 'left',
+ text: 'Left'
+ },
+ {
+ placement: 'right',
+ text: 'Right'
+ }
+ ]
+ };
+ }
+
+ toggle() {
+ this.setState({
+ popoverOpen: !this.state.popoverOpen
+ });
+ }
+
+ render() {
+ return (
+
+
+
+ Popovers
+
+
+
+
+ Launch Popover
+
+
+ Popover Title
+ Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
+
+
+
+
+
+ Popovers
+ list
+
+
+ { this.state.popovers.map((popover, i) => {
+ return
+
+
+
+
+ Progress
+
+
+
+ 0%
+ 25%
+ 50%
+
+ 75%
+
+ 100%
+ Multiple bars
+
+
+
+
+
+
+ Progress
+ color variants
+
+
+
+
+
+
+ Progress
+ labels
+
+
+ 25%
+ 1/2
+ You're almost there!
+ You did it!
+
+ Meh
+ Wow!
+ Cool
+ 20%
+ !!
+
+
+
+
+
+ Progress
+ striped
+
+
+
+
+
+
+
+
+ Progress
+ animated
+
+
+
+
+
+
+
+
+ Progress
+ multiple bars / stacked
+
+
+ Plain
+
+
+ With Labels
+
+ Meh
+ Wow!
+ 25%
+ LOOK OUT!!
+
+ Stripes and Animations
+
+ Stripes
+ Animated Stripes
+ Plain
+
+
+
+
+
+ Progress
+ max value
+
+
+ 1 of 5
+ 50 of 135
+ 75 of 111
+
+ 463 of 500
+
+
+ Various (40) of 55
+
+ 5
+ 15
+ 10
+ 10
+
+
+
+
+
+ {this.props.item.text}
+
+
+ Tooltip Content!
+
+
+ );
+ }
+}
+
+class Tooltips extends Component {
+
+ constructor(props) {
+ super(props);
+
+ this.toggle = this.toggle.bind(this);
+ this.state = {
+ tooltipOpen: [false, false],
+ tooltips: [
+ {
+ placement: 'top',
+ text: 'Top'
+ },
+ {
+ placement: 'bottom',
+ text: 'Bottom'
+ },
+ {
+ placement: 'left',
+ text: 'Left'
+ },
+ {
+ placement: 'right',
+ text: 'Right'
+ }
+ ]
+ };
+ }
+
+ toggle(i) {
+ const newArray = this.state.tooltipOpen.map((element, index) => {
+ return (index === i ? !element : false);
+ });
+ this.setState({
+ tooltipOpen: newArray
+ });
+ }
+
+ render() {
+ return (
+
+
+
+ Tooltips
+
+
+
+ Somewhere in here is a tooltip .
+ {this.toggle(0)}}>
+ Hello world!
+
+
+
+
+
+ Tooltip disable autohide
+
+
+ Sometimes you need to allow users to select text within a tooltip .
+ {this.toggle(1)}}>
+ Try to select this text!
+
+
+
+
+
+ Tooltip list
+
+
+ { this.state.tooltips.map((tooltip, i) => {
+ return
+
+
+
+ Tooltip uncontrolled
+
+
+ Somewhere in here is a tooltip .
+
+ Hello world!
+
+
+
+
+
+
+
+ Button Dropdown
+
+
+
+ { this.toggle(0); }}>
+
+ Button Dropdown
+
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+
+
+
+
+ Single button dropdowns
+
+
+ { this.toggle(1); }}>
+
+ Primary
+
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+ { this.toggle(2); }}>
+
+ Secondary
+
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+ { this.toggle(3); }}>
+
+ Success
+
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+ { this.toggle(4); }}>
+
+ Info
+
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+ { this.toggle(5); }}>
+
+ Warning
+
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+ { this.toggle(6); }}>
+
+ Danger
+
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+
+
+
+
+ Split button dropdowns
+
+
+ { this.toggle(7); }}>
+ Primary
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+ { this.toggle(8); }}>
+ Secondary
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+ { this.toggle(9); }}>
+ Success
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+ { this.toggle(10); }}>
+ Info
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+ { this.toggle(11); }}>
+ Warning
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+ { this.toggle(12); }}>
+ Danger
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+
+
+
+
+ Button Dropdown sizing
+
+
+ { this.toggle(13); }}>
+
+ Large Button
+
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+ { this.toggle(14); }}>
+
+ Small Button
+
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+
+
+
+
+ Button Dropup variation
+
+
+ { this.toggle(15); }}>
+
+ Dropup
+
+
+ Header
+ Action Disabled
+ Action
+ Another Action
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+ this.onRadioBtnClick(1)} active={this.state.radioSelected === 1}>Day
+ this.onRadioBtnClick(2)} active={this.state.radioSelected === 2}>Month
+ this.onRadioBtnClick(3)} active={this.state.radioSelected === 3}>Year
@@ -1017,7 +1019,7 @@ class Dashboard extends Component {
-
@@ -1053,7 +1055,7 @@ class Dashboard extends Component {
-
@@ -1088,7 +1090,7 @@ class Dashboard extends Component {
-
@@ -1123,7 +1125,7 @@ class Dashboard extends Component {
-
@@ -1158,7 +1160,7 @@ class Dashboard extends Component {
-
@@ -1193,7 +1195,7 @@ class Dashboard extends Component {
-
diff --git a/React_Full_Project/src/views/Icons/Flags/Flags.js b/React_Full_Project/src/views/Icons/Flags/Flags.js
new file mode 100644
index 0000000..a0be326
--- /dev/null
+++ b/React_Full_Project/src/views/Icons/Flags/Flags.js
@@ -0,0 +1,1022 @@
+import React, {Component} from 'react';
+import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
+
+
+class Flags extends Component {
+ render() {
+ return (
+
+
+
+
+
+
+ .flag-icon and .flag-icon-xx (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.
+
+ flag-icon-ad
+
+ flag-icon-ae
+
+ flag-icon-af
+
+ flag-icon-ag
+
+ flag-icon-ai
+
+ flag-icon-al
+
+ flag-icon-am
+
+ flag-icon-ao
+
+ flag-icon-aq
+
+ flag-icon-ar
+
+ flag-icon-as
+
+ flag-icon-at
+
+ flag-icon-au
+
+ flag-icon-aw
+
+ flag-icon-ax
+
+ flag-icon-az
+
+ flag-icon-ba
+
+ flag-icon-bb
+
+ flag-icon-bd
+
+ flag-icon-be
+
+ flag-icon-bf
+
+ flag-icon-bg
+
+ flag-icon-bh
+
+ flag-icon-bi
+
+ flag-icon-bj
+
+ flag-icon-bl
+
+ flag-icon-bm
+
+ flag-icon-bn
+
+ flag-icon-bo
+
+ flag-icon-bq
+
+ flag-icon-br
+
+ flag-icon-bs
+
+ flag-icon-bt
+
+ flag-icon-bv
+
+ flag-icon-bw
+
+ flag-icon-by
+
+ flag-icon-bz
+
+ flag-icon-ca
+
+ flag-icon-cc
+
+ flag-icon-cd
+
+ flag-icon-cf
+
+ flag-icon-cg
+
+ flag-icon-ch
+
+ flag-icon-ci
+
+ flag-icon-ck
+
+ flag-icon-cl
+
+ flag-icon-cm
+
+ flag-icon-cn
+
+ flag-icon-co
+
+ flag-icon-cr
+
+ flag-icon-cu
+
+ flag-icon-cv
+
+ flag-icon-cw
+
+ flag-icon-cx
+
+ flag-icon-cy
+
+ flag-icon-cz
+
+ flag-icon-de
+
+ flag-icon-dj
+
+ flag-icon-dk
+
+ flag-icon-dm
+
+ flag-icon-do
+
+ flag-icon-dz
+
+ flag-icon-ec
+
+ flag-icon-ee
+
+ flag-icon-eg
+
+ flag-icon-eh
+
+ flag-icon-er
+
+ flag-icon-es
+
+ flag-icon-et
+
+ flag-icon-fi
+
+ flag-icon-fj
+
+ flag-icon-fk
+
+ flag-icon-fm
+
+ flag-icon-fo
+
+ flag-icon-fr
+
+ flag-icon-ga
+
+ flag-icon-gb
+
+ flag-icon-gd
+
+ flag-icon-ge
+
+ flag-icon-gf
+
+ flag-icon-gg
+
+ flag-icon-gh
+
+ flag-icon-gi
+
+ flag-icon-gl
+
+ flag-icon-gm
+
+ flag-icon-gn
+
+ flag-icon-gp
+
+ flag-icon-gq
+
+ flag-icon-gr
+
+ flag-icon-gs
+
+ flag-icon-gt
+
+ flag-icon-gu
+
+ flag-icon-gw
+
+ flag-icon-gy
+
+ flag-icon-hk
+
+ flag-icon-hm
+
+ flag-icon-hn
+
+ flag-icon-hr
+
+ flag-icon-ht
+
+ flag-icon-hu
+
+ flag-icon-id
+
+ flag-icon-ie
+
+ flag-icon-il
+
+ flag-icon-im
+
+ flag-icon-in
+
+ flag-icon-io
+
+ flag-icon-iq
+
+ flag-icon-ir
+
+ flag-icon-is
+
+ flag-icon-it
+
+ flag-icon-je
+
+ flag-icon-jm
+
+ flag-icon-jo
+
+ flag-icon-jp
+
+ flag-icon-ke
+
+ flag-icon-kg
+
+ flag-icon-kh
+
+ flag-icon-ki
+
+ flag-icon-km
+
+ flag-icon-kn
+
+ flag-icon-kp
+
+ flag-icon-kr
+
+ flag-icon-kw
+
+ flag-icon-ky
+
+ flag-icon-kz
+
+ flag-icon-la
+
+ flag-icon-lb
+
+ flag-icon-lc
+
+ flag-icon-li
+
+ flag-icon-lk
+
+ flag-icon-lr
+
+ flag-icon-ls
+
+ flag-icon-lt
+
+ flag-icon-lu
+
+ flag-icon-lv
+
+ flag-icon-ly
+
+ flag-icon-ma
+
+ flag-icon-mc
+
+ flag-icon-md
+
+ flag-icon-me
+
+ flag-icon-mf
+
+ flag-icon-mg
+
+ flag-icon-mh
+
+ flag-icon-mk
+
+ flag-icon-ml
+
+ flag-icon-mm
+
+ flag-icon-mn
+
+ flag-icon-mo
+
+ flag-icon-mp
+
+ flag-icon-mq
+
+ flag-icon-mr
+
+ flag-icon-ms
+
+ flag-icon-mt
+
+ flag-icon-mu
+
+ flag-icon-mv
+
+ flag-icon-mw
+
+ flag-icon-mx
+
+ flag-icon-my
+
+ flag-icon-mz
+
+ flag-icon-na
+
+ flag-icon-nc
+
+ flag-icon-ne
+
+ flag-icon-nf
+
+ flag-icon-ng
+
+ flag-icon-ni
+
+ flag-icon-nl
+
+ flag-icon-no
+
+ flag-icon-np
+
+ flag-icon-nr
+
+ flag-icon-nu
+
+ flag-icon-nz
+
+ flag-icon-om
+
+ flag-icon-pa
+
+ flag-icon-pe
+
+ flag-icon-pf
+
+ flag-icon-pg
+
+ flag-icon-ph
+
+ flag-icon-pk
+
+ flag-icon-pl
+
+ flag-icon-pm
+
+ flag-icon-pn
+
+ flag-icon-pr
+
+ flag-icon-ps
+
+ flag-icon-pt
+
+ flag-icon-pw
+
+ flag-icon-py
+
+ flag-icon-qa
+
+ flag-icon-re
+
+ flag-icon-ro
+
+ flag-icon-rs
+
+ flag-icon-ru
+
+ flag-icon-rw
+
+ flag-icon-sa
+
+ flag-icon-sb
+
+ flag-icon-sc
+
+ flag-icon-sd
+
+ flag-icon-se
+
+ flag-icon-sg
+
+ flag-icon-sh
+
+ flag-icon-si
+
+ flag-icon-sj
+
+ flag-icon-sk
+
+ flag-icon-sl
+
+ flag-icon-sm
+
+ flag-icon-sn
+
+ flag-icon-so
+
+ flag-icon-sr
+
+ flag-icon-ss
+
+ flag-icon-st
+
+ flag-icon-sv
+
+ flag-icon-sx
+
+ flag-icon-sy
+
+ flag-icon-sz
+
+ flag-icon-tc
+
+ flag-icon-td
+
+ flag-icon-tf
+
+ flag-icon-tg
+
+ flag-icon-th
+
+ flag-icon-tj
+
+ flag-icon-tk
+
+ flag-icon-tl
+
+ flag-icon-tm
+
+ flag-icon-tn
+
+ flag-icon-to
+
+ flag-icon-tr
+
+ flag-icon-tt
+
+ flag-icon-tv
+
+ flag-icon-tw
+
+ flag-icon-tz
+
+ flag-icon-ua
+
+ flag-icon-ug
+
+ flag-icon-um
+
+ flag-icon-us
+
+ flag-icon-uy
+
+ flag-icon-uz
+
+ flag-icon-va
+
+ flag-icon-vc
+
+ flag-icon-ve
+
+ flag-icon-vg
+
+ flag-icon-vi
+
+ flag-icon-vn
+
+ flag-icon-vu
+
+ flag-icon-wf
+
+ flag-icon-ws
+
+ flag-icon-ye
+
+ flag-icon-yt
+
+ flag-icon-za
+
+ flag-icon-zm
+
+ flag-icon-zw
+
+
+
+
+
+ )
+ }
+}
+
+export default Flags;
diff --git a/React_Full_Project/src/views/Icons/Flags/package.json b/React_Full_Project/src/views/Icons/Flags/package.json
new file mode 100644
index 0000000..5bf64ea
--- /dev/null
+++ b/React_Full_Project/src/views/Icons/Flags/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "Flags",
+ "version": "0.0.0",
+ "private": true,
+ "main": "./Flags.js"
+}
diff --git a/React_Full_Project/src/views/Icons/FontAwesome/FontAwesome.js b/React_Full_Project/src/views/Icons/FontAwesome/FontAwesome.js
index 7d4ae40..61462aa 100644
--- a/React_Full_Project/src/views/Icons/FontAwesome/FontAwesome.js
+++ b/React_Full_Project/src/views/Icons/FontAwesome/FontAwesome.js
@@ -7,7 +7,9 @@ class FontAwesome extends Component {
return (
- 55 New Icons in 4.7
+
+
+
+
+
+ Alerts
+
+
+
+
+ This is a primary alert — check it out!
+
+
+ This is a secondary alert — check it out!
+
+
+ This is a success alert — check it out!
+
+
+ This is a danger alert — check it out!
+
+
+ This is a warning alert — check it out!
+
+
+ This is a info alert — check it out!
+
+
+ This is a light alert — check it out!
+
+
+ This is a dark alert — check it out!
+
+
+
+
+
+
+ Alerts use .alert-link to provide links
+
+
+
+ This is a primary alert with an example link . Give it a click if you like.
+
+
+ This is a secondary alert with an example link . Give it a click if you like.
+
+
+ This is a success alert with an example link . Give it a click if you like.
+
+
+ This is a danger alert with an example link . Give it a click if you like.
+
+
+ This is a warning alert with an example link . Give it a click if you like.
+
+
+ This is a info alert with an example link . Give it a click if you like.
+
+
+ This is a light alert with an example link . Give it a click if you like.
+
+
+ This is a dark alert with an example link . Give it a click if you like.
+
+
+
+
+
+
+
+
+ Alerts additional content
+
+
+
+ Well done!
+
+ Aww yeah, you successfully read this important alert message. This example text is going
+ to run a bit longer so that you can see how spacing within an alert works with this kind
+ of content.
+
+
+ Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
+
+
+
+
+
+
+
+ Alerts dismissing
+
+
+
+ I am an alert and I can be dismissed!
+
+
+
+
+
+
+
+
+
+ Badges
+
+
+
+ Heading New
+ Heading New
+ Heading New
+ Heading New
+ Heading New
+ Heading New
+
+
+
+ Notifications 4
+
+
+
+
+
+
+ Badges contextual variations
+
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+
+
+
+ Badges pill badges
+
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+
+
+
+ Badges links
+
+
+ Primary
+ Secondary
+ Success
+ Danger
+ Warning
+ Info
+ Light
+ Dark
+
+
+
+
+
Login
Sign In to your account
-
+
+
+
-
+
+
+
diff --git a/React_Full_Project/src/views/Pages/Page404/Page404.js b/React_Full_Project/src/views/Pages/Page404/Page404.js
index c74e7cf..8f8ee3f 100644
--- a/React_Full_Project/src/views/Pages/Page404/Page404.js
+++ b/React_Full_Project/src/views/Pages/Page404/Page404.js
@@ -14,11 +14,15 @@ class Page404 extends Component {
The page you are looking for was not found.
-
+
+
+
+
Search
-
+
diff --git a/React_Full_Project/src/views/Pages/Page500/Page500.js b/React_Full_Project/src/views/Pages/Page500/Page500.js
index c444033..a215298 100644
--- a/React_Full_Project/src/views/Pages/Page500/Page500.js
+++ b/React_Full_Project/src/views/Pages/Page500/Page500.js
@@ -14,11 +14,15 @@ class Page500 extends Component {
The page you are looking for is temporarily unavailable.
-
+
+
+
+
Search
-
+
diff --git a/React_Full_Project/src/views/Pages/Register/Register.js b/React_Full_Project/src/views/Pages/Register/Register.js
index d9c7ac0..87c1f84 100644
--- a/React_Full_Project/src/views/Pages/Register/Register.js
+++ b/React_Full_Project/src/views/Pages/Register/Register.js
@@ -13,19 +13,33 @@ class Register extends Component {
Register
Create your account
-
+
+
+
- @
+
+ @
+
-
+
+
+
-
+
+
+
Create Account
diff --git a/React_Full_Project/src/views/Theme/Colors/Colors.js b/React_Full_Project/src/views/Theme/Colors/Colors.js
new file mode 100644
index 0000000..1401e9a
--- /dev/null
+++ b/React_Full_Project/src/views/Theme/Colors/Colors.js
@@ -0,0 +1,104 @@
+import React, {Component} from 'react';
+
+class Colors extends Component {
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
100
+
200
+
300
+
400
+
500
+
600
+
700
+
800
+
900
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+}
+
+export default Colors;
diff --git a/React_Full_Project/src/views/Theme/Colors/package.json b/React_Full_Project/src/views/Theme/Colors/package.json
new file mode 100644
index 0000000..6a2c041
--- /dev/null
+++ b/React_Full_Project/src/views/Theme/Colors/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "Colors",
+ "version": "0.0.0",
+ "private": true,
+ "main": "./Colors.js"
+}
diff --git a/React_Full_Project/src/views/Theme/Typography/Typography.js b/React_Full_Project/src/views/Theme/Typography/Typography.js
new file mode 100644
index 0000000..9a6a66c
--- /dev/null
+++ b/React_Full_Project/src/views/Theme/Typography/Typography.js
@@ -0,0 +1,160 @@
+import React, {Component} from 'react';
+
+class Typography extends Component {
+ render() {
+ return (
+
+
+
+ Headings
+
+
+
Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.
+
+
+
+ Heading
+ Example
+
+
+
+
+
+ <h1></h1>
+
+ h1. Bootstrap heading
+
+
+ <h2></h2>
+
+ h2. Bootstrap heading
+
+
+ <h3></h3>
+
+ h3. Bootstrap heading
+
+
+ <h4></h4>
+
+ h4. Bootstrap heading
+
+
+ <h5></h5>
+
+ h5. Bootstrap heading
+
+
+ <h6></h6>
+
+ h6. Bootstrap heading
+
+
+
+
+
+
+ Headings
+
+
+
.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.
+
+
h1. Bootstrap heading
+
h2. Bootstrap heading
+
h3. Bootstrap heading
+
h4. Bootstrap heading
+
h5. Bootstrap heading
+
h6. Bootstrap heading
+
+
+
+
+
+ Display headings
+
+
+
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading —a larger, slightly more opinionated heading style.
+
+
+
+
+ Display 1
+
+ Display 2
+
+ Display 3
+
+ Display 4
+
+
+
+
+
+
+
+ Inline text elements
+
+
+
Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading —a larger, slightly more opinionated heading style.
+
+
You can use the mark tag to highlight text.
+
This line of text is meant to be treated as deleted text.
+
This line of text is meant to be treated as no longer accurate.
+
This line of text is meant to be treated as an addition to the document.
+
This line of text will render as underlined
+
This line of text is meant to be treated as fine print.
+
This line rendered as bold text.
+
This line rendered as italicized text.
+
+
+
+
+
+ Description list alignment
+
+
+
Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.
+
+
+ Description lists
+ A description list is perfect for defining terms.
+
+ Euismod
+
+ Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
+ Donec id elit non mi porta gravida at eget metus.
+
+
+ Malesuada porta
+ Etiam porta sem malesuada magna mollis euismod.
+
+ Truncated term is truncated
+ Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
+
+ Nesting
+
+
+ Nested definition list
+ Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
+
+
+
+
+
+
+
+ )
+ }
+}
+
+export default Typography;
diff --git a/React_Full_Project/src/views/Theme/Typography/package.json b/React_Full_Project/src/views/Theme/Typography/package.json
new file mode 100644
index 0000000..565eac2
--- /dev/null
+++ b/React_Full_Project/src/views/Theme/Typography/package.json
@@ -0,0 +1,6 @@
+{
+ "name": "Typography",
+ "version": "0.0.0",
+ "private": true,
+ "main": "./Typography.js"
+}
diff --git a/React_Starter/package.json b/React_Starter/package.json
index dd11fd0..dbbefce 100644
--- a/React_Starter/package.json
+++ b/React_Starter/package.json
@@ -1,6 +1,6 @@
{
"name": "@coreui/react",
- "version": "1.0.6",
+ "version": "1.0.8",
"description": "Open Source Bootstrap Admin Template",
"author": "Łukasz Holeczek",
"homepage": "http://coreui.io",
@@ -13,31 +13,32 @@
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
- "copy-webpack-plugin": "4.2.1",
- "css-hot-loader": "1.3.3",
- "css-loader": "0.28.7",
+ "copy-webpack-plugin": "4.3.1",
+ "css-hot-loader": "1.3.5",
+ "css-loader": "0.28.8",
"extract-text-webpack-plugin": "3.0.2",
- "file-loader": "1.1.5",
- "html-loader": "0.5.1",
+ "file-loader": "1.1.6",
+ "html-loader": "0.5.4",
"html-webpack-plugin": "2.30.1",
- "node-sass": "4.7.1",
+ "node-sass": "4.7.2",
"rimraf": "2.6.2",
"sass-loader": "6.0.6",
"source-list-map": "2.0.0",
- "style-loader": "0.19.0",
- "uglify-js": "3.1.10",
+ "style-loader": "0.19.1",
+ "uglify-js": "3.3.7",
"url-loader": "0.6.2",
- "webpack": "3.8.1",
- "webpack-dev-server": "2.9.4"
+ "webpack": "3.10.0",
+ "webpack-dev-server": "2.9.7"
},
"dependencies": {
- "bootstrap": "4.0.0-beta.2",
+ "bootstrap": "4.0.0-beta.3",
"chart.js": "2.7.1",
+ "flag-icon-css": "2.9.0",
"font-awesome": "4.7.0",
"history": "4.7.2",
- "react": "16.1.1",
- "react-chartjs-2": "2.6.4",
- "react-dom": "16.1.1",
+ "react": "16.2.0",
+ "react-chartjs-2": "2.7.0",
+ "react-dom": "16.2.0",
"react-router-dom": "4.2.2",
"react-transition-group": "2.2.1",
"reactstrap": "5.0.0-alpha.4",
@@ -45,12 +46,12 @@
},
"scripts": {
"dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
- "start": "webpack-dev-server --progress --colors --inline --env.dev",
+ "start": "webpack-dev-server --progress --color --inline --env.dev",
"build": "webpack -p --progress --env.prod",
"clean": "rimraf ./build"
},
"engines": {
- "node": ">= 6.4.0",
- "npm": ">= 5.0.0"
+ "node": ">= 6.12.3",
+ "npm": ">= 5.6.0"
}
}
diff --git a/React_Starter/scss/_bootstrap-variables.scss b/React_Starter/scss/_bootstrap-variables.scss
index 9a9c272..8d9e717 100644
--- a/React_Starter/scss/_bootstrap-variables.scss
+++ b/React_Starter/scss/_bootstrap-variables.scss
@@ -51,7 +51,28 @@ $theme-colors: (
warning: $yellow,
danger: $red,
light: $gray-100,
- dark: $gray-800
+ dark: $gray-800,
+
+ blue: $blue,
+ indigo: $indigo,
+ purple: $purple,
+ pink: $pink,
+ red: $red,
+ orange: $orange,
+ yellow: $yellow,
+ green: $green,
+ teal: $teal,
+ cyan: $cyan,
+
+ gray-100: $gray-100,
+ gray-200: $gray-200,
+ gray-300: $gray-300,
+ gray-400: $gray-400,
+ gray-500: $gray-500,
+ gray-600: $gray-600,
+ gray-700: $gray-700,
+ gray-800: $gray-800,
+ gray-900: $gray-900
);
// Options
diff --git a/React_Starter/scss/core/_buttons.scss b/React_Starter/scss/core/_buttons.scss
index 7ab4953..9d66544 100644
--- a/React_Starter/scss/core/_buttons.scss
+++ b/React_Starter/scss/core/_buttons.scss
@@ -2,15 +2,6 @@ button {
cursor: pointer;
}
-.btn {
- .badge {
- position: absolute;
- top: 2px;
- right: 6px;
- font-size: 9px;
- }
-}
-
.btn-transparent {
color: #fff;
background-color: transparent;
diff --git a/React_Starter/scss/core/_layout.scss b/React_Starter/scss/core/_layout.scss
index 8a05003..1800abb 100644
--- a/React_Starter/scss/core/_layout.scss
+++ b/React_Starter/scss/core/_layout.scss
@@ -129,6 +129,9 @@ app-root {
}
}
}
+ .sidebar-minimizer {
+ display: none;
+ }
}
.sidebar-minimized {
diff --git a/React_Starter/scss/core/_sidebar.scss b/React_Starter/scss/core/_sidebar.scss
index b77cd5f..ae76bd4 100644
--- a/React_Starter/scss/core/_sidebar.scss
+++ b/React_Starter/scss/core/_sidebar.scss
@@ -207,7 +207,7 @@
border-radius: $border-radius;
}
> .nav-dropdown-items {
- max-height: 1000px;
+ max-height: 1500px;
}
.nav-link {
diff --git a/React_Starter/scss/style.scss b/React_Starter/scss/style.scss
index 571b6ea..5432fff 100644
--- a/React_Starter/scss/style.scss
+++ b/React_Starter/scss/style.scss
@@ -1,8 +1,8 @@
/*!
* CoreUI - Open Source Bootstrap Admin Template
- * @version v1.0.6
+ * @version v1.0.8
* @link http://coreui.io
- * Copyright (c) 2017 creativeLabs Łukasz Holeczek
+ * Copyright (c) 2018 creativeLabs Łukasz Holeczek
* @license MIT
*/
diff --git a/React_Starter/src/components/Footer/Footer.js b/React_Starter/src/components/Footer/Footer.js
index 6dfaf74..5136228 100644
--- a/React_Starter/src/components/Footer/Footer.js
+++ b/React_Starter/src/components/Footer/Footer.js
@@ -4,7 +4,7 @@ class Footer extends Component {
render() {
return (
)
diff --git a/React_Starter/src/components/Sidebar/Sidebar.js b/React_Starter/src/components/Sidebar/Sidebar.js
index 9de4184..1d47995 100644
--- a/React_Starter/src/components/Sidebar/Sidebar.js
+++ b/React_Starter/src/components/Sidebar/Sidebar.js
@@ -10,6 +10,15 @@ import SidebarMinimizer from './../SidebarMinimizer';
class Sidebar extends Component {
+ constructor(props) {
+ super(props);
+
+ this.handleClick = this.handleClick.bind(this);
+ this.activeRoute = this.activeRoute.bind(this);
+ this.hideMobile = this.hideMobile.bind(this);
+ }
+
+
handleClick(e) {
e.preventDefault();
e.target.parentElement.classList.toggle('open');
@@ -21,6 +30,12 @@ class Sidebar extends Component {
}
+ hideMobile() {
+ if (document.body.classList.contains('sidebar-mobile-show')) {
+ document.body.classList.toggle('sidebar-mobile-show')
+ }
+ }
+
// todo Sidebar nav secondLevel
// secondLevelActive(routeName) {
// return this.props.location.pathname.indexOf(routeName) > -1 ? "nav nav-second-level collapse in" : "nav nav-second-level collapse";
@@ -30,8 +45,6 @@ class Sidebar extends Component {
render() {
const props = this.props;
- const activeRoute = this.activeRoute;
- const handleClick = this.handleClick;
// badge addon to NavItem
const badge = (badge) => {
@@ -78,7 +91,7 @@ class Sidebar extends Component {
{item.name}{badge(item.badge)}
:
-
+
}
@@ -89,8 +102,8 @@ class Sidebar extends Component {
// nav dropdown
const navDropdown = (item, key) => {
return (
-
-
+