Skip to content

Commit 290fd8a

Browse files
bkrembkrem
committed
refactor(demo): refresh demo look
1 parent 02e01c0 commit 290fd8a

File tree

5 files changed

+94
-56
lines changed

5 files changed

+94
-56
lines changed

‎demo/public/index.html

Lines changed: 71 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
7-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
8-
<!--
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
9+
<!--
910
Notice the use of %PUBLIC_URL% in the tag above.
1011
It will be replaced with the URL of the `public` folder during the build.
1112
Only files inside the `public` folder can be referenced from the HTML.
@@ -14,11 +15,12 @@
1415
work correctly both with client-side routing and a non-root public URL.
1516
Learn how to configure a non-root public URL by running `npm run build`.
1617
-->
17-
<title>React D3 Tree</title>
18-
</head>
19-
<body>
20-
<div id="root"></div>
21-
<!--
18+
<title>React D3 Tree</title>
19+
</head>
20+
21+
<body>
22+
<div id="root"></div>
23+
<!--
2224
This HTML file is a template.
2325
If you open it directly in the browser, you will see an empty page.
2426
@@ -28,24 +30,64 @@
2830
To begin the development, run `npm start`.
2931
To create a production bundle, use `npm run build`.
3032
-->
31-
32-
33-
<a href="https://github.com/bkrem/react-d3-tree">
34-
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67"
35-
alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png">
36-
</a>
37-
<!-- Global site tag (gtag.js) - Google Analytics -->
38-
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-108428190-1"></script>
39-
<script>
40-
window.dataLayer = window.dataLayer || [];
41-
42-
function gtag() {
43-
dataLayer.push(arguments);
33+
<a href="https://github.com/bkrem/react-d3-tree" class="github-corner" aria-label="View source on GitHub"><svg
34+
width="80" height="80" viewBox="0 0 250 250"
35+
style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
36+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
37+
<path
38+
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
39+
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
40+
<path
41+
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
42+
fill="currentColor" class="octo-body"></path>
43+
</svg></a>
44+
<style>
45+
.github-corner:hover .octo-arm {
46+
animation: octocat-wave 560ms ease-in-out
47+
}
48+
49+
@keyframes octocat-wave {
50+
51+
0%,
52+
100% {
53+
transform: rotate(0)
54+
}
55+
56+
20%,
57+
60% {
58+
transform: rotate(-25deg)
59+
}
60+
61+
40%,
62+
80% {
63+
transform: rotate(10deg)
4464
}
45-
gtag('js', new Date());
65+
}
66+
67+
@media (max-width:500px) {
68+
.github-corner:hover .octo-arm {
69+
animation: none
70+
}
71+
72+
.github-corner .octo-arm {
73+
animation: octocat-wave 560ms ease-in-out
74+
}
75+
}
76+
</style>
77+
78+
<!-- Global site tag (gtag.js) - Google Analytics -->
79+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-108428190-1"></script>
80+
<script>
81+
window.dataLayer = window.dataLayer || [];
82+
83+
function gtag() {
84+
dataLayer.push(arguments);
85+
}
86+
gtag('js', new Date());
87+
88+
gtag('config', 'UA-108428190-1');
4689

47-
gtag('config', 'UA-108428190-1');
90+
</script>
91+
</body>
4892

49-
</script>
50-
</body>
51-
</html>
93+
</html>

‎demo/src/App.css

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
.title {
88
text-align: center;
99
margin-bottom: 20px;
10-
color: rgba(255, 255, 255, 0.9);
1110
}
1211

1312
.demo-container {
@@ -22,17 +21,14 @@
2221
width: 30%;
2322
display: flex;
2423
flex-direction: column;
25-
background: #FC5C7D; /* fallback for old browsers */
26-
background: -webkit-linear-gradient(to top, #6A82FB, #FC5C7D); /* Chrome 10-25, Safari 5.1-6 */
27-
background: linear-gradient(to top, #6A82FB, #FC5C7D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
24+
background: #f9c0c0;
2825
}
2926

3027
.controls-container {
3128
display: flex;
3229
flex-direction: column;
3330
flex-basis: 1;
3431
overflow-y: scroll;
35-
background: rgba(0,0,0,0.4)
3632
}
3733

3834
.state-container {
@@ -57,9 +53,7 @@
5753

5854
.tree-container {
5955
height: 100%;
60-
background: #FC5C7D; /* fallback for old browsers */
61-
background: -webkit-linear-gradient(to top, #6A82FB, #FC5C7D); /* Chrome 10-25, Safari 5.1-6 */
62-
background: linear-gradient(to top, #6A82FB, #FC5C7D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
56+
background: #ccf6c8;
6357
}
6458

6559
.prop-container {
@@ -68,7 +62,6 @@
6862
}
6963
.prop {
7064
font-weight: bold;
71-
color: rgba(255,255,255,0.9);
7265
display: block;
7366
}
7467

@@ -77,13 +70,19 @@
7770
}
7871

7972
.sub-prop {
80-
color: rgba(255,255,255,0.9);
8173
padding: 5px;
8274
}
8375

8476
.btn-controls {
85-
color: rgba(255, 255, 255, 0.9);
86-
background-color: #FC5C7D;
77+
background-color: white;
78+
transition: color 0.15s ease, border-color 0.15s ease;
79+
}
80+
81+
.btn-controls:hover,
82+
.btn-controls:focus,
83+
.btn-controls:active {
84+
color: #0070f3;
85+
border-color: #0070f3;
8786
}
8887

8988
/* Custom node classes */

‎demo/src/App.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import './App.css';
1111
// Data examples
1212
import orgChartJson from './examples/org-chart.json';
1313
import flareJson from './examples/d3-hierarchy-flare.json';
14-
import reactTree from './examples/react-repo';
14+
import reactTree from './examples/react-tree';
1515

1616
console.log('Demo React version: ', React.version);
1717

@@ -233,7 +233,7 @@ class App extends Component {
233233
<div className="prop-container">
234234
<h2 className="title">React D3 Tree</h2>
235235
<h3 className="title">v{version}</h3>
236-
<span className="prop">Examples</span>
236+
<h4 className="prop">Examples</h4>
237237
<div style={{ marginBottom: '5px' }}>
238238
<button
239239
type="button"
@@ -269,9 +269,9 @@ class App extends Component {
269269
</div>
270270

271271
<div className="prop-container">
272-
<span className="prop">
272+
<h4 className="prop">
273273
Dynamically updating <code>data</code>
274-
</span>
274+
</h4>
275275
<button
276276
type="button"
277277
className="btn btn-controls btn-block"
@@ -289,7 +289,7 @@ class App extends Component {
289289
</div>
290290

291291
<div className="prop-container">
292-
<span className="prop">Orientation</span>
292+
<h4 className="prop">Orientation</h4>
293293
<button
294294
type="button"
295295
className="btn btn-controls btn-block"
@@ -307,7 +307,7 @@ class App extends Component {
307307
</div>
308308

309309
<div className="prop-container">
310-
<span className="prop">Path Function</span>
310+
<h4 className="prop">Path Function</h4>
311311
<button
312312
type="button"
313313
className="btn btn-controls btn-block"
@@ -352,7 +352,7 @@ class App extends Component {
352352
</div>
353353

354354
<div className="prop-container">
355-
<span className="prop">Collapsible</span>
355+
<h4 className="prop">Collapsible</h4>
356356
<Switch
357357
name="collapsibleBtn"
358358
checked={this.state.collapsible}
@@ -361,7 +361,7 @@ class App extends Component {
361361
</div>
362362

363363
<div className="prop-container">
364-
<span className="prop">Collapse neighbor nodes</span>
364+
<h4 className="prop">Collapse neighbor nodes</h4>
365365
<Switch
366366
name="collapseNeighborsBtn"
367367
checked={this.state.shouldCollapseNeighborNodes}
@@ -370,7 +370,7 @@ class App extends Component {
370370
</div>
371371

372372
<div className="prop-container">
373-
<span className="prop">Enable Legacy Transitions</span>
373+
<h4 className="prop">Enable Legacy Transitions</h4>
374374
<Switch
375375
name="enableLegacyTransitionsBtn"
376376
checked={this.state.enableLegacyTransitions}

‎demo/src/examples/react-repo.js renamed to ‎demo/src/examples/react-tree.js

File renamed without changes.

‎demo/src/index.css

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,9 @@ body {
77
width: 100%;
88
height: 100%;
99
margin: 0;
10-
font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
10+
padding: 0;
11+
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
12+
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
1113
font-weight: 300;
1214
background: #fff;
1315
}
14-
15-
h1 {
16-
margin: 0;
17-
color: #F97F85;
18-
}

0 commit comments

Comments
 (0)