Skip to content

Commit e802dc5

Browse files
gitbrentgitbrent
committed
updated to bootstrap 5
1 parent 7a56518 commit e802dc5

File tree

3 files changed

+72
-75
lines changed

3 files changed

+72
-75
lines changed

‎demos/react-demo/public/index.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,12 @@
2222
Learn how to configure a non-root public URL by running `npm run build`.
2323
-->
2424
<title>pptxgenjs react demo app</title>
25-
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/darkly/bootstrap.min.css" />
26-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism-okaidia.min.css">
27-
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
25+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.1.3/darkly/bootstrap.min.css"
26+
integrity="sha512-ZdxIsDOtKj2Xmr/av3D/uo1g15yxNFjkhrcfLooZV5fW0TT7aF7Z3wY1LOA16h0VgFLwteg14lWqlYUQK3to/w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
27+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism-okaidia.min.css"
28+
integrity="sha512-mIs9kKbaw6JZFfSuo+MovjU+Ntggfoj8RwAmJbVXQ5mkAX5LlgETQEweFPI18humSPHymTb5iikEOKWF7I8ncQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
29+
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"
30+
integrity="sha512-hpZ5pDCF2bRCweL5WoA0/N1elet1KYL5mx3LP555Eg/0ZguaHawxNvEjF6O3rufAChs16HVNhEc6blF/rZoowQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
2831
</head>
2932
<body>
3033
<noscript>You need to enable JavaScript to run this app.</noscript>

‎demos/react-demo/src/App.js‎

Lines changed: 53 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,9 @@ function App() {
4848
w: "80%",
4949
h: 1,
5050
fontSize: 36,
51-
align: 'center',
52-
fill: { color:'D3E3F3' },
53-
color: '008899',
51+
align: "center",
52+
fill: { color: "D3E3F3" },
53+
color: "008899",
5454
});
5555

5656
slide.addChart(pptx.ChartType.radar, dataChartRadar, { x: 1, y: 1.9, w: 8, h: 3 });
@@ -61,75 +61,64 @@ function App() {
6161
w: "100%",
6262
h: 0.33,
6363
fontSize: 10,
64-
align: 'center',
65-
fill: 'E1E1E1', //{ color: pptx.SchemeColor.background2 },
66-
color: 'A1A1A1' // pptx.SchemeColor.accent3,
64+
align: "center",
65+
fill: "E1E1E1", //{ color: pptx.SchemeColor.background2 },
66+
color: "A1A1A1", // pptx.SchemeColor.accent3,
6767
});
6868

6969
pptx.writeFile({ fileName: "pptxgenjs-demo-react.pptx" });
7070
}
7171

7272
return (
73-
<div>
73+
<section>
7474
<nav className="navbar navbar-expand-lg navbar-dark bg-primary">
75-
<a className="navbar-brand" href="https://gitbrent.github.io/PptxGenJS/">
76-
<img src={logo} width="30" height="30" className="d-inline-block align-top mr-2" alt="logo" />
77-
PptxGenJS
78-
</a>
79-
<button
80-
className="navbar-toggler"
81-
type="button"
82-
data-toggle="collapse"
83-
data-target="#navbarColor01"
84-
aria-controls="navbarColor01"
85-
aria-expanded="false"
86-
aria-label="Toggle navigation"
87-
>
88-
<span className="navbar-toggler-icon"></span>
89-
</button>
90-
91-
<div className="collapse navbar-collapse" id="navbarColor01">
92-
<ul className="navbar-nav mr-auto">
93-
<li className="nav-item active">
94-
<a className="nav-link" href="https://gitbrent.github.io/PptxGenJS/demo-react/index.html">
95-
Home <span className="sr-only">(current)</span>
96-
</a>
97-
</li>
98-
</ul>
99-
<form className="form-inline my-2 my-lg-0">
100-
<button
101-
type="button"
102-
className="btn btn-outline-info mx-3 my-2 my-sm-0"
103-
onClick={(ev) => {
104-
window.open("https://gitbrent.github.io/PptxGenJS/demo/", true);
105-
}}
106-
>
107-
Demo Page
108-
</button>
109-
<button
110-
type="button"
111-
className="btn btn-outline-info mx-3 my-2 my-sm-0"
112-
onClick={(ev) => {
113-
window.open("https://github.com/gitbrent/PptxGenJS", true);
114-
}}
115-
>
116-
GitHub Project
117-
</button>
118-
<button
119-
type="button"
120-
className="btn btn-outline-info mx-3 my-2 my-sm-0"
121-
onClick={(ev) => {
122-
window.open("https://gitbrent.github.io/PptxGenJS/docs/installation.html", true);
123-
}}
124-
>
125-
API Docs
126-
</button>
127-
</form>
75+
<div className="container-fluid">
76+
<a className="navbar-brand" href="https://gitbrent.github.io/PptxGenJS/">
77+
<img src={logo} width="30" height="24" />
78+
PptxGenJS
79+
</a>
80+
<button
81+
className="navbar-toggler"
82+
type="button"
83+
data-bs-toggle="collapse"
84+
data-bs-target="#navbarSupportedContent"
85+
aria-controls="navbarSupportedContent"
86+
aria-expanded="false"
87+
aria-label="Toggle navigation"
88+
>
89+
<span className="navbar-toggler-icon"></span>
90+
</button>
91+
<div className="collapse navbar-collapse" id="navbarSupportedContent">
92+
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
93+
<li className="nav-item">
94+
<a className="nav-link active" aria-current="page" href="#">
95+
Home
96+
</a>
97+
</li>
98+
</ul>
99+
<ul className="navbar-nav ms-auto mb-2 mb-lg-0">
100+
<li class="nav-item me-3">
101+
<a class="nav-link" href="https://gitbrent.github.io/PptxGenJS/demos/">
102+
Library Demos
103+
</a>
104+
</li>
105+
<li class="nav-item me-3">
106+
<a class="nav-link" href="https://gitbrent.github.io/PptxGenJS/docs/installation/">
107+
API Documentation
108+
</a>
109+
</li>
110+
<li class="nav-item me-3">
111+
<a class="nav-link" href="https://github.com/gitbrent/PptxGenJS/">
112+
GitHub Project
113+
</a>
114+
</li>
115+
</ul>
116+
</div>
128117
</div>
129118
</nav>
130119

131120
<main className="container">
132-
<div className="jumbotron mt-5">
121+
<div className="jumbotron my-5">
133122
<h1 className="display-4">React Demo</h1>
134123
<p className="lead">Sample React application to demonstrate using the PptxGenJS library as a module.</p>
135124
<hr className="my-4" />
@@ -141,7 +130,7 @@ function App() {
141130

142131
<div className="row">
143132
<div className="col">
144-
<button type="button" className="btn btn-success w-100 mr-3" onClick={(_ev) => runDemo()}>
133+
<button type="button" className="btn btn-success w-100 me-3" onClick={(_ev) => runDemo()}>
145134
Run Demo
146135
</button>
147136
</div>
@@ -158,7 +147,7 @@ function App() {
158147
</div>
159148

160149
<table id="html2ppt" className="table table-dark" style={{ display: "none" }}>
161-
<thead>
150+
<thead className="table-dark">
162151
<tr>
163152
<th>col 1</th>
164153
<th>col 2</th>
@@ -175,7 +164,7 @@ function App() {
175164
</table>
176165
</div>
177166
</main>
178-
</div>
167+
</section>
179168
);
180169
}
181170

‎demos/react-demo/src/index.css‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
body {
2-
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
6-
-webkit-font-smoothing: antialiased;
7-
-moz-osx-font-smoothing: grayscale;
2+
margin: 0;
3+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
4+
sans-serif;
5+
-webkit-font-smoothing: antialiased;
6+
-moz-osx-font-smoothing: grayscale;
87
}
98

109
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12-
monospace;
10+
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
11+
}
12+
13+
/* Need for Bootstrap 5 */
14+
.jumbotron {
15+
background-color: #303030;
16+
border-radius: 0.3rem;
17+
padding: 2rem;
1318
}

0 commit comments

Comments
 (0)