Skip to content

Commit cbc58b4

Browse files
KRRISH96KRRISH96
authored
Merge pull request #261 from Codebrahma/minor-fixes
Minor fixes
2 parents 680358e + a703fa4 commit cbc58b4

11 files changed

Lines changed: 1058 additions & 5588 deletions

File tree

‎doc/src/components/common/componentData/Button/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ export const componentData = {
122122
this.style = {
123123
buttonContainer: {
124124
display: "grid",
125-
gridTemplateColumns: "repeat(auto-fill, 150px)",
125+
gridTemplateColumns: "repeat(auto-fit, 150px)",
126126
gridGap: 20,
127127
alignItems: "center"
128128
}

‎doc/src/components/common/componentData/Pagination/index.js‎

Lines changed: 39 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const componentData = {
4545
{
4646
prop: 'navigationButtons',
4747
type: 'boolean',
48-
defaultValue: 'false',
48+
defaultValue: 'true',
4949
description: 'Shows navigation buttons when `true`.',
5050
},
5151
],
@@ -83,16 +83,50 @@ export const componentData = {
8383
<Pagination total={10}/>
8484
`,
8585
componentUsage: `
86-
class Demo extends React.Component {
86+
// Component.js
87+
88+
class Demo extends React.Component {
8789
render() {
8890
return (
89-
<div>
91+
<PreviewElements>
9092
<PreviewBlock header="Pagination">
91-
<Pagination total={10}/>
93+
<PreviewElements>
94+
95+
{/* Default Pagination Component */}
96+
<Pagination total={10}/>
97+
98+
</PreviewElements>
9299
</PreviewBlock>
93-
</div>
100+
<PreviewBlock header="Custom Pagination">
101+
<PreviewElements>
102+
103+
{/* Custom themed Pagination Component, Refer theme.scss below */}
104+
<Pagination total={5} theme={componentTheme} navigationButtons={false}/>
105+
106+
</PreviewElements>
107+
</PreviewBlock>
108+
</PreviewElements>
94109
)
95110
}
96111
}
97112
`,
113+
componentUsageTheme: `
114+
// theme.scss
115+
116+
:local(.pagination-steps) {
117+
border-color: transparent;
118+
color: #8047c7;
119+
}
120+
121+
:local(.active) {
122+
color: #ff8600;
123+
}
124+
125+
:local(.dots) {
126+
span {
127+
height: 0.3em;
128+
width: 0.3em;
129+
}
130+
}
131+
`,
98132
};

‎doc/src/components/common/componentData/Pagination/theme.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
:local(.pagination-steps) {
2+
border-color: transparent;
3+
color: #8047c7;
4+
}
5+
6+
:local(.active) {
7+
color: #ff8600;
8+
}
9+
10+
:local(.dots) {
11+
span {
12+
height: 0.3em;
13+
width: 0.3em;
14+
}
15+
}

‎doc/src/components/common/componentData/Toggle/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ export const componentData = {
102102
/>
103103
104104
</PreviewBlock>
105-
<PreviewBlock header="Toggle with switch on (with toggable)">
105+
<PreviewBlock header="Custom Toggle">
106106
107107
{/* Custom Toggle, Refer theme.scss */}
108108
<Toggle

‎doc/src/components/common/componentData/theme.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
@import './Modal/theme.scss';
99
@import './MultiSelect/theme.scss';
1010
@import './Navbar/theme.scss';
11+
@import './Pagination/theme.scss';
1112
@import './Select/theme.scss';
1213
@import './Slider/theme.scss';
1314
@import './TextInput/theme.scss';

‎doc/src/pages/playground.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,8 @@
109109
}
110110

111111
.playground-editor {
112-
margin: 0 10% !important;
113-
overflow: scroll;
112+
margin: 0 10% 10% !important;
113+
overflow: auto;
114114
&::before {
115115
content: '// Edit the code here and preview the changes above.';
116116
display: flex;

‎doc/src/templates/landing-main/contrib-section/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ div.contrib-section>div:nth-child(3) {
3535
color: rgb(228, 228, 228);
3636
font-weight: bold;
3737
align-items: center;
38+
text-align: center;
3839
width: 100%;
3940
background-color: transparent !important;
4041
&>* {

‎doc/src/templates/landing-main/index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@
7575
font-size: 1.5em;
7676
font-weight: bold;
7777
letter-spacing: 0.1rem;
78+
text-align: center;
7879
}
7980

8081
a {

‎lib/autocomplete/theme.module.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,15 @@
2828
:local(.autocomplete-list) {
2929
z-index: 1;
3030
box-sizing: border-box;
31-
height: 45vh;
31+
height: fit-content;
32+
height: -moz-fit-content;
33+
max-height: 300px;
3234
width: 100%;
3335
overflow-y: auto;
3436
box-shadow: $dropdown-menu-shadow;
3537
border-radius: 2px;
3638
margin-top: 10px;
39+
padding: 2% 0;
3740
position: absolute;
3841
background-color: white;
3942

‎lib/pagination/index.js‎

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -36,34 +36,38 @@ class Pagination extends Component {
3636

3737
const steps = [];
3838

39-
// eslint-disable-next-line no-restricted-syntax
40-
for (const key of Array(3).keys()) {
41-
let page;
42-
43-
if (currentActive > 2) {
44-
if (currentActive >= total - 1) {
45-
page = (key - 3) + total;
39+
if (total >= 3) {
40+
const innerSteps = total > 5 ? 3 : (total - 2); // FIX THIS for 3,4 pages
41+
// eslint-disable-next-line no-restricted-syntax
42+
for (const key of Array(innerSteps).keys()) {
43+
let page;
44+
45+
if (currentActive > 2) {
46+
if ((currentActive >= total - 1) && total > 4) {
47+
page = (key - 3) + total;
48+
} else if (total === 4 && currentActive === 4) {
49+
page = currentActive + (key - 2);
50+
} else {
51+
page = currentActive + (key - 1);
52+
}
4653
} else {
47-
page = currentActive + (key - 1);
54+
page = key + 2;
4855
}
49-
} else {
50-
page = key + 2;
56+
/* eslint-disable jsx-a11y/click-events-have-key-events */
57+
/* eslint-disable jsx-a11y/no-static-element-interactions */
58+
steps.push(<div
59+
className={classnames(theme['pagination-steps'], {
60+
[theme.active]: page === currentActive,
61+
})}
62+
data-react-active-page={page === currentActive ? 'active' : undefined}
63+
key={page}
64+
onClick={() => this.navigate(page)}
65+
>
66+
{page}
67+
{/* eslint-disable-next-line react/jsx-closing-tag-location */}
68+
</div>);
5169
}
52-
/* eslint-disable jsx-a11y/click-events-have-key-events */
53-
/* eslint-disable jsx-a11y/no-static-element-interactions */
54-
steps.push(<div
55-
className={classnames(theme['pagination-steps'], {
56-
[theme.active]: page === currentActive,
57-
})}
58-
data-react-active-page={page === currentActive ? 'active' : undefined}
59-
key={page}
60-
onClick={() => this.navigate(page)}
61-
>
62-
{page}
63-
{/* eslint-disable-next-line react/jsx-closing-tag-location */}
64-
</div>);
6570
}
66-
6771
return [
6872
<div
6973
className={classnames(theme['pagination-steps'], {
@@ -75,19 +79,21 @@ class Pagination extends Component {
7579
>
7680
{1}
7781
</div>,
78-
currentActive > 2 ? this.renderDots('left') : null,
79-
steps,
80-
currentActive < total - 1 ? this.renderDots('right') : null,
81-
<div
82-
className={classnames(theme['pagination-steps'], {
83-
[theme.active]: total === currentActive,
84-
})}
85-
key={total}
86-
data-react-active-page={total === currentActive ? 'active' : undefined}
87-
onClick={() => this.navigate(total)}
88-
>
89-
{total}
90-
</div>,
82+
total > 5 && currentActive > 3 ? this.renderDots('left') : null,
83+
total >= 3 && steps,
84+
total > 5 && currentActive < total - 2 ? this.renderDots('right') : null,
85+
total >= 2 && (
86+
<div
87+
className={classnames(theme['pagination-steps'], {
88+
[theme.active]: total === currentActive,
89+
})}
90+
key={total}
91+
data-react-active-page={total === currentActive ? 'active' : undefined}
92+
onClick={() => this.navigate(total)}
93+
>
94+
{total}
95+
</div>
96+
),
9197
];
9298
};
9399

0 commit comments

Comments
 (0)