Skip to content

Commit 43008f9

Browse files
prasanna1211prasanna1211
committed
pending fixes
1 parent 1884f1a commit 43008f9

File tree

9 files changed

+87
-47
lines changed

9 files changed

+87
-47
lines changed

‎docs/client/components/HomePage/index.js

Lines changed: 36 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,28 +20,46 @@ const HomePage = () => (
2020
</div>
2121
<div className="advantage-section">
2222
<Row>
23-
<Col xsOffset={1} xs={3} className="advantage">
24-
<div className="header">
25-
10+ UI components
26-
</div>
27-
<div className="content">
28-
The collection has more than 10+ UI components which we use regularly
23+
<Col xs={4} className="advantage-wrapper">
24+
<div className="advantage">
25+
<div className="header">
26+
Complete Set of components
27+
</div>
28+
<div className="content">
29+
<ul>
30+
<li> 10+ UI components </li>
31+
<li> Most commonly used </li>
32+
<li> Responsive fit for all screen </li>
33+
</ul>
34+
</div>
2935
</div>
3036
</Col>
31-
<Col xsOffset={1} xs={3} className="advantage">
32-
<div className="header">
33-
Light Weight
34-
</div>
35-
<div className="content">
36-
Total gzipped size is 20KB.
37+
<Col xs={4} className="advantage-wrapper">
38+
<div className="advantage">
39+
<div className="header">
40+
Light Weight
41+
</div>
42+
<div className="content">
43+
<ul>
44+
<li> Total gzipped size less than 20KB </li>
45+
<li> Delta Increase for each Import</li>
46+
<li> Blazingly fast </li>
47+
</ul>
48+
</div>
3749
</div>
3850
</Col>
39-
<Col xsOffset={1} xs={3} className="advantage">
40-
<div className="header">
41-
Highly Themeable
42-
</div>
43-
<div className="content">
44-
You can literally customize anything
51+
<Col xs={4} className="advantage-wrapper">
52+
<div className="advantage">
53+
<div className="header">
54+
Highly Themeable
55+
</div>
56+
<div className="content">
57+
<ul>
58+
<li>Theme using SASS / SCSS</li>
59+
<li>Have Global / Local Theming</li>
60+
<li>Customization for all DOM elements</li>
61+
</ul>
62+
</div>
4563
</div>
4664
</Col>
4765
</Row>

‎docs/client/components/HomePage/styles.scss

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@import '../common/styles.scss';
22

33
:local(.home-page) {
4+
margin-top: 150px;
45
.title {
56
width: 300px;
67
margin: 0 auto;
78
font-weight: bold;
89
font-size: 45px;
9-
color: $primary-grey;
1010
}
1111
.about {
1212
margin: 40px auto;
@@ -17,22 +17,30 @@
1717
.advantage-section {
1818
margin: 30px auto;
1919
width: 90%;
20-
.advantage {
21-
padding: 10px;
22-
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
23-
border-radius: 5px;
24-
25-
.header {
26-
font-weight: bold;
27-
text-align: center;
28-
padding-top: 5px;
29-
font-size: 20px;
30-
}
31-
32-
.content {
33-
margin-top: 20px;
34-
font-size: 15px;
35-
text-align: center;
20+
.advantage-wrapper {
21+
padding: 0px 15px;
22+
.advantage {
23+
min-height: 160px;
24+
padding: 10px;
25+
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
26+
// border-radius: 5px;
27+
28+
.header {
29+
font-weight: bold;
30+
text-align: center;
31+
padding-top: 5px;
32+
font-size: 20px;
33+
}
34+
35+
.content {
36+
margin-top: 20px;
37+
font-size: 15px;
38+
ul {
39+
li {
40+
margin-top: 10px;
41+
}
42+
}
43+
}
3644
}
3745
}
3846
}

‎docs/client/components/PlaygroundPage/ComponentBar/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import { componentList } from '../../common/componentList';
44

55
import styles from './styles.scss';
66

7-
const ComponentBarPage = ({ children, onClickComponent }) => (
7+
const ComponentBarPage = ({ children, onClickComponent, activeComponent }) => (
88
<div className={styles['component-bar']}>
99
<aside className="component-sidebar">
1010
{map(componentList, component => (
1111
<div
12-
className="each-component-item"
12+
className={`each-component-item ${activeComponent === component.name ? 'active' : ''}`}
1313
key={component.name}
1414
onClick={() => { onClickComponent(component.name, component.defaultCode, component.docs) }}
1515
>

‎docs/client/components/PlaygroundPage/ComponentBar/styles.scss

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,18 @@
99
padding-top: 25px;
1010
box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
1111
.each-component-item {
12-
font-size: 23px;
12+
font-size: 16px;
1313
color: $primary-dark-font;
1414
padding: 15px 5px 15px 15px;
1515
font-weight: bold;
1616
&:hover {
1717
background-color: $primary-grey;
1818
cursor: pointer;
1919
}
20+
&.active {
21+
background-color: $primary-blue;
22+
color: $primary-white
23+
}
2024
}
2125
}
2226
.playground-content {

‎docs/client/components/PlaygroundPage/PlaygroundWithPreview/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ class PlaygroundWithPreview extends React.Component {
4040
return (
4141
<div className={styles['playground-preview']}>
4242
<div className="header">
43-
PlaygroundWithPreview
43+
Playground
4444
</div>
4545
<div>
4646
<Playground
@@ -55,7 +55,7 @@ class PlaygroundWithPreview extends React.Component {
5555
code={this.state.code}
5656
/>
5757
</div>
58-
{activeComponent}
58+
5959
</div>
6060
);
6161
}

‎docs/client/components/PlaygroundPage/PlaygroundWithPreview/styles.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,13 @@
66
font-size: 24px;
77
font-weight: bold;
88
margin-bottom: 20px;
9+
margin: 10px 25px;
910
}
1011
}
1112

1213
:local(.playground) {
1314
position: fixed;
15+
left: 15%;
1416
width: 40%;
1517
height: 100%;
1618
.doc-enabler {
@@ -29,7 +31,7 @@
2931
font-weight: bold;
3032
}
3133
position: fixed;
32-
left: 55%;
34+
left: 60%;
3335
width: 35%;
3436
height: 100%;
3537
}

‎docs/client/components/PlaygroundPage/index.js

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,22 @@ import ComponentBar from './ComponentBar';
33
import PlaygroundWithPreview from './PlaygroundWithPreview';
44
import Documentation from './Documentation';
55

6+
import Card from '../../../../src/card';
7+
import CardReadme from '../../../../src/card/readMe.md';
8+
9+
import {
10+
CardDefaultCode,
11+
} from '../common/DefaultCode';
12+
13+
614
class PlaygroundPage extends React.Component {
715
constructor(props) {
816
super(props);
917
this.state = {
1018
isDocumentationOn: false,
11-
activeComponent: '',
12-
activeDocs: '',
19+
activeComponent: 'Card',
20+
defaultCode: CardDefaultCode,
21+
activeDocs: CardReadme,
1322
};
1423
this.expandDocumentation = this.expandDocumentation.bind(this);
1524
this.handleClickComponent = this.handleClickComponent.bind(this);
@@ -33,6 +42,7 @@ class PlaygroundPage extends React.Component {
3342
return (
3443
<div>
3544
<ComponentBar
45+
activeComponent={this.state.activeComponent}
3646
onClickComponent={this.handleClickComponent}
3747
>
3848
<PlaygroundWithPreview

‎docs/client/components/common/DefaultCode/Card/index.js

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,8 @@ class Demo extends React.Component {
55
<Card
66
header='Card String header'
77
wrapContent
8-
noPadding
98
theme={theme}>
10-
<div>Card Content</div>
11-
<div>Card Content</div>
12-
<div>Card Content</div>
9+
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.
1310
</Card>
1411
)
1512
}

‎docs/public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4+
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
45
<meta charset="utf-8">
56
<title>React Lite Components</title>
67
</head>

0 commit comments

Comments
 (0)