Skip to content

Commit c8d0772

Browse files
ansuman-ghosh-infrrdansuman-ghosh-infrrd
committed
Removed Bootstrap and added Bulma
1 parent d06c436 commit c8d0772

17 files changed

Lines changed: 133 additions & 90 deletions

‎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/src/App.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React from 'react'
22
import PDFViewer from 'pdf-viewer-reactjs'
3+
import 'bootstrap/dist/css/bootstrap.min.css'
4+
import 'bootstrap/dist/js/bootstrap.min.js'
35

46
import CustomNavigation from './Navigation'
57
import sources from './Sources'

‎package-lock.json‎

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

‎package.json‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,10 @@
5353
"rollup-plugin-uglify": "^6.0.4"
5454
},
5555
"dependencies": {
56-
"bootstrap": "^4.4.1",
57-
"jquery": "^3.4.1",
56+
"bulma": "^0.8.0",
57+
"bulma-helpers": "^0.3.8",
5858
"material-design-icons": "^3.0.1",
5959
"pdfjs-dist": "^2.2.228",
60-
"popper.js": "^1.16.0",
6160
"prop-types": "^15.7.2"
6261
},
6362
"husky": {

‎src/components/Alert.js‎

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

44
const Alert = ({ message }) => (
5-
<div className='row alert text-danger h-auto h6 m-0'>
6-
<div className='col-sm-2 text-right px-2'>
5+
<div className='columns has-text-danger has-margin-top-5'>
6+
<div className='column is-4 has-text-right has-padding-5'>
77
<i className='material-icons'>error_outline</i>
88
</div>
9-
<div className='col-sm-10 text-left px-0'>
9+
<div className='column is-8 has-text-left has-padding-5'>
1010
<small>{message}</small>
1111
</div>
1212
</div>

‎src/components/Loader.js‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,21 @@
11
import React from 'react'
22

3-
const loader = { width: '0.5rem', height: '0.5rem', animationDuration: '0.75s' }
3+
const loader = {
4+
display: 'inline-block',
5+
verticalAlign: 'text-bottom',
6+
backgroundColor: 'currentColor',
7+
borderRadius: '50%',
8+
opacity: 0,
9+
width: '0.5rem',
10+
height: '0.5rem',
11+
animationDuration: '0.75s',
12+
animationTimingFunction: 'linear',
13+
animationIterationCount: 'infinite',
14+
animationDirection: 'normal',
15+
animationFillMode: 'none',
16+
animationPlayState: 'running',
17+
animationName: 'spinner-grow',
18+
}
419

520
const loader1 = { ...loader, animationDelay: '0s' }
621

@@ -9,16 +24,16 @@ const loader2 = { ...loader, animationDelay: '0.25s' }
924
const loader3 = { ...loader, animationDelay: '0.5s' }
1025

1126
const Loader = () => (
12-
<div className='d-flex justify-content-center vertical-align-middle text-dark'>
13-
<p className='h4 loader-text'>Loading</p>
14-
<div className='p-2'>
15-
<div className='spinner-grow' style={loader1} />
27+
<div className='flex-row has-margin-10 justify-center align-items-flex-end'>
28+
<p className='is-size-3 flex-column is-marginless'>Loading</p>
29+
<div className='flex-column has-padding-10'>
30+
<div style={loader1} />
1631
</div>
17-
<div className='p-2'>
18-
<div className='spinner-grow' style={loader2} />
32+
<div className='flex-column has-padding-10'>
33+
<div style={loader2} />
1934
</div>
20-
<div className='p-2'>
21-
<div className='spinner-grow' style={loader3} />
35+
<div className='flex-column has-padding-10'>
36+
<div style={loader3} />
2237
</div>
2338
</div>
2439
)

‎src/components/NavigationBar.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,15 @@ const Navigation = ({
3333
return (
3434
<div
3535
className={
36-
css.navbarWrapper
37-
? css.navbarWrapper
38-
: 'container rounded bg-dark text-white'
36+
css.navbarWrapper ||
37+
'container box has-height-50 is-marginless has-padding-top-10 has-text-white has-background-black'
3938
}>
40-
<div className='row'>
41-
<div className='col-sm-4'>
39+
<div className='columns is-gapless'>
40+
<div className='column is-4'>
4241
{hideZoom ? (
4342
undefined
4443
) : (
45-
<div className='btn-group' role='group'>
44+
<div className='buttons are-small'>
4645
<ZoomOut
4746
scale={scale}
4847
minScale={minScale}
@@ -64,8 +63,8 @@ const Navigation = ({
6463
</div>
6564
)}
6665
</div>
67-
<div className='col-sm-4'>
68-
<div className='btn-group' role='group'>
66+
<div className='column is-4'>
67+
<div className='buttons are-small'>
6968
<PreviousPageButton
7069
css={css.previousPageBtn}
7170
page={page}
@@ -85,11 +84,11 @@ const Navigation = ({
8584
/>
8685
</div>
8786
</div>
88-
<div className='col-sm-4'>
87+
<div className='column is-4'>
8988
{hideRotation ? (
9089
undefined
9190
) : (
92-
<div className='btn-group' role='group'>
91+
<div className='buttons are-small'>
9392
<RotateLeft
9493
css={css.rotateLeftBtn}
9594
rotationAngle={rotationAngle}

‎src/components/navigationComponents/NextPageButton.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +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 || 'btn btn-sm btn-link text-white pl-2'}${
6-
page === pages ? ' disabled' : ''
7-
}`
5+
const nextClass = css || 'button is-black'
86

97
const [state, setState] = useState(false)
108

@@ -16,6 +14,14 @@ const NextPageButton = ({ css, page, pages, handleNextClick }) => {
1614
}, 200)
1715
}
1816

17+
if (state || page === pages) {
18+
return (
19+
<button className={nextClass} disabled>
20+
<i className='material-icons'>keyboard_arrow_right</i>
21+
</button>
22+
)
23+
}
24+
1925
return (
2026
<button className={nextClass} onClick={handleClick} disabled={state}>
2127
<i className='material-icons'>keyboard_arrow_right</i>

‎src/components/navigationComponents/PagesIndicator.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import PropTypes from 'prop-types'
33

44
const PagesIndicator = ({ css, page, pages }) => {
5-
const pagesClass = css || 'small pt-2'
5+
const pagesClass = css || 'is-size-7'
66

77
return <div className={pagesClass}>{`Page ${page} / ${pages}`}</div>
88
}

‎src/components/navigationComponents/PreviousPageButton.js‎

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

44
const PreviousPageButton = ({ css, page, handlePrevClick }) => {
5-
const prevClass = `${css || 'btn btn-sm btn-link text-white pr-2'}${
6-
page === 1 ? ' disabled' : ''
7-
}`
5+
const prevClass = css || 'button is-black'
86

97
const [state, setState] = useState(false)
108

@@ -16,8 +14,16 @@ const PreviousPageButton = ({ css, page, handlePrevClick }) => {
1614
}, 200)
1715
}
1816

17+
if (state || page === 1) {
18+
return (
19+
<button className={prevClass} disabled>
20+
<i className='material-icons'>keyboard_arrow_left</i>
21+
</button>
22+
)
23+
}
24+
1925
return (
20-
<button className={prevClass} onClick={handleClick} disabled={state}>
26+
<button className={prevClass} onClick={handleClick}>
2127
<i className='material-icons'>keyboard_arrow_left</i>
2228
</button>
2329
)

0 commit comments

Comments
 (0)