Skip to content

Commit dbe8491

Browse files
ansuman-ghosh-infrrdansuman-ghosh-infrrd
committed
Fixed breaking changes for mobile devices
1 parent c8d0772 commit dbe8491

14 files changed

Lines changed: 158 additions & 104 deletions

‎.gitignore‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,4 +40,7 @@ jspm_packages
4040
.DS_Store
4141

4242
# Ignore config
43-
.vscode
43+
.vscode
44+
45+
# local history
46+
.history

‎dist/pdf-viewer-reactjs.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/package-lock.json‎

Lines changed: 12 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Alert.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33

44
const Alert = ({ message }) => (
5-
<div className='columns has-text-danger has-margin-top-5'>
5+
<div className='columns has-text-danger has-margin-top-5 is-mobile'>
66
<div className='column is-4 has-text-right has-padding-5'>
7-
<i className='material-icons'>error_outline</i>
7+
<span className='icon'>
8+
<i className='material-icons'>error_outline</i>
9+
</span>
810
</div>
911
<div className='column is-8 has-text-left has-padding-5'>
1012
<small>{message}</small>

‎src/components/NavigationBar.js‎

Lines changed: 65 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -34,80 +34,74 @@ const Navigation = ({
3434
<div
3535
className={
3636
css.navbarWrapper ||
37-
'container box has-height-50 is-marginless has-padding-top-10 has-text-white has-background-black'
37+
'columns box is-gapless is-mobile has-text-white has-background-black has-margin-top-15 has-margin-bottom-15'
3838
}>
39-
<div className='columns is-gapless'>
40-
<div className='column is-4'>
41-
{hideZoom ? (
42-
undefined
43-
) : (
44-
<div className='buttons are-small'>
45-
<ZoomOut
46-
scale={scale}
47-
minScale={minScale}
48-
css={css.zoomOutBtn}
49-
handleZoomOut={handleZoomOut}
50-
/>
51-
<ResetZoom
52-
scale={scale}
53-
defaultScale={defaultScale}
54-
css={css.resetZoomBtn}
55-
handleResetZoom={handleResetZoom}
56-
/>
57-
<ZoomIn
58-
scale={scale}
59-
maxScale={maxScale}
60-
css={css.zoomInBtn}
61-
handleZoomIn={handleZoomIn}
62-
/>
63-
</div>
64-
)}
65-
</div>
66-
<div className='column is-4'>
67-
<div className='buttons are-small'>
68-
<PreviousPageButton
69-
css={css.previousPageBtn}
70-
page={page}
71-
pages={pages}
72-
handlePrevClick={handlePrevClick}
73-
/>
74-
<PagesIndicator
75-
css={css.pageIndicator}
76-
page={page}
77-
pages={pages}
78-
/>
79-
<NextPageButton
80-
css={css.nextPageBtn}
81-
page={page}
82-
pages={pages}
83-
handleNextClick={handleNextClick}
84-
/>
85-
</div>
86-
</div>
87-
<div className='column is-4'>
88-
{hideRotation ? (
89-
undefined
90-
) : (
91-
<div className='buttons are-small'>
92-
<RotateLeft
93-
css={css.rotateLeftBtn}
94-
rotationAngle={rotationAngle}
95-
handleRotateLeft={handleRotateLeft}
96-
/>
97-
<ResetRotation
98-
css={css.resetRotationBtn}
99-
rotationAngle={rotationAngle}
100-
handleResetRotation={handleResetRotation}
101-
/>
102-
<RotateRight
103-
css={css.rotateRightBtn}
104-
rotationAngle={rotationAngle}
105-
handleRotateRight={handleRotateRight}
106-
/>
107-
</div>
108-
)}
39+
{hideZoom ? (
40+
<div className='column is-3'></div>
41+
) : (
42+
<div className='column is-3 buttons are-small has-addons'>
43+
<ZoomOut
44+
scale={scale}
45+
minScale={minScale}
46+
css={css.zoomOutBtn}
47+
handleZoomOut={handleZoomOut}
48+
/>
49+
<ResetZoom
50+
scale={scale}
51+
defaultScale={defaultScale}
52+
css={css.resetZoomBtn}
53+
handleResetZoom={handleResetZoom}
54+
/>
55+
<ZoomIn
56+
scale={scale}
57+
maxScale={maxScale}
58+
css={css.zoomInBtn}
59+
handleZoomIn={handleZoomIn}
60+
/>
10961
</div>
62+
)}
63+
<div className='column is-1'></div>
64+
<div className='column is-4 buttons are-small has-addons is-centered'>
65+
<PreviousPageButton
66+
css={css.previousPageBtn}
67+
page={page}
68+
pages={pages}
69+
handlePrevClick={handlePrevClick}
70+
/>
71+
<PagesIndicator
72+
css={css.pageIndicator}
73+
page={page}
74+
pages={pages}
75+
/>
76+
<NextPageButton
77+
css={css.nextPageBtn}
78+
page={page}
79+
pages={pages}
80+
handleNextClick={handleNextClick}
81+
/>
11082
</div>
83+
<div className='column is-1'></div>
84+
{hideRotation ? (
85+
<div className='column is-3'></div>
86+
) : (
87+
<div className='column is-3 buttons are-small has-addons is-right'>
88+
<RotateLeft
89+
css={css.rotateLeftBtn}
90+
rotationAngle={rotationAngle}
91+
handleRotateLeft={handleRotateLeft}
92+
/>
93+
<ResetRotation
94+
css={css.resetRotationBtn}
95+
rotationAngle={rotationAngle}
96+
handleResetRotation={handleResetRotation}
97+
/>
98+
<RotateRight
99+
css={css.rotateRightBtn}
100+
rotationAngle={rotationAngle}
101+
handleRotateRight={handleRotateRight}
102+
/>
103+
</div>
104+
)}
111105
</div>
112106
)
113107
}

‎src/components/navigationComponents/NextPageButton.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
22
import PropTypes from 'prop-types'
33

44
const NextPageButton = ({ css, page, pages, handleNextClick }) => {
5-
const nextClass = css || 'button is-black'
5+
const nextClass = css || 'button is-black is-marginless'
66

77
const [state, setState] = useState(false)
88

@@ -17,14 +17,18 @@ const NextPageButton = ({ css, page, pages, handleNextClick }) => {
1717
if (state || page === pages) {
1818
return (
1919
<button className={nextClass} disabled>
20-
<i className='material-icons'>keyboard_arrow_right</i>
20+
<span className='icon is-small'>
21+
<i className='material-icons'>keyboard_arrow_right</i>
22+
</span>
2123
</button>
2224
)
2325
}
2426

2527
return (
2628
<button className={nextClass} onClick={handleClick} disabled={state}>
27-
<i className='material-icons'>keyboard_arrow_right</i>
29+
<span className='icon is-small'>
30+
<i className='material-icons'>keyboard_arrow_right</i>
31+
</span>
2832
</button>
2933
)
3034
}

‎src/components/navigationComponents/PagesIndicator.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,11 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33

44
const PagesIndicator = ({ css, page, pages }) => {
5-
const pagesClass = css || 'is-size-7'
5+
const pagesClass =
6+
css ||
7+
'is-size-7 is-vcentered has-text-centered is-inline-flex has-padding-top-5 button is-black is-marginless has-margin-left-5 has-margin-right-5'
68

7-
return <div className={pagesClass}>{`Page ${page} / ${pages}`}</div>
9+
return <span className={pagesClass}>{`Page ${page} / ${pages}`}</span>
810
}
911

1012
PagesIndicator.propTypes = {

‎src/components/navigationComponents/PreviousPageButton.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
22
import PropTypes from 'prop-types'
33

44
const PreviousPageButton = ({ css, page, handlePrevClick }) => {
5-
const prevClass = css || 'button is-black'
5+
const prevClass = css || 'button is-black is-marginless'
66

77
const [state, setState] = useState(false)
88

@@ -17,14 +17,18 @@ const PreviousPageButton = ({ css, page, handlePrevClick }) => {
1717
if (state || page === 1) {
1818
return (
1919
<button className={prevClass} disabled>
20-
<i className='material-icons'>keyboard_arrow_left</i>
20+
<span className='icon is-small'>
21+
<i className='material-icons'>keyboard_arrow_left</i>
22+
</span>
2123
</button>
2224
)
2325
}
2426

2527
return (
2628
<button className={prevClass} onClick={handleClick}>
27-
<i className='material-icons'>keyboard_arrow_left</i>
29+
<span className='icon is-small'>
30+
<i className='material-icons'>keyboard_arrow_left</i>
31+
</span>
2832
</button>
2933
)
3034
}

‎src/components/navigationComponents/ResetRotation.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,25 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33

44
const ResetRotation = ({ css, rotationAngle, handleResetRotation }) => {
5-
const resetRotationClass = css || 'button is-black'
5+
const resetRotationClass =
6+
css ||
7+
'button is-black is-marginless has-margin-left-5 has-margin-right-5'
68

79
if (rotationAngle === 0) {
810
return (
911
<button className={resetRotationClass} disabled>
10-
<i className='material-icons'>refresh</i>
12+
<span className='icon is-small'>
13+
<i className='material-icons'>refresh</i>
14+
</span>
1115
</button>
1216
)
1317
}
1418

1519
return (
1620
<button className={resetRotationClass} onClick={handleResetRotation}>
17-
<i className='material-icons'>refresh</i>
21+
<span className='icon is-small'>
22+
<i className='material-icons'>refresh</i>
23+
</span>
1824
</button>
1925
)
2026
}

‎src/components/navigationComponents/ResetZoom.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,25 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33

44
const ResetZoom = ({ css, scale, defaultScale, handleResetZoom }) => {
5-
const resetZoomClass = css || 'button is-black'
5+
const resetZoomClass =
6+
css ||
7+
'button is-black is-marginless has-margin-left-5 has-margin-right-5'
68

79
if (scale === defaultScale) {
810
return (
911
<button className={resetZoomClass} disabled>
10-
<i className='material-icons'>refresh</i>
12+
<span className='icon is-small'>
13+
<i className='material-icons'>refresh</i>
14+
</span>
1115
</button>
1216
)
1317
}
1418

1519
return (
1620
<button className={resetZoomClass} onClick={handleResetZoom}>
17-
<i className='material-icons'>refresh</i>
21+
<span className='icon is-small'>
22+
<i className='material-icons'>refresh</i>
23+
</span>
1824
</button>
1925
)
2026
}

0 commit comments

Comments
 (0)