Skip to content

Commit 6616a03

Browse files
gareth-jgareth-j
committed
Nicer looking side panel
1 parent acc4454 commit 6616a03

7 files changed

+194
-46
lines changed

Diff for: ‎position_colours.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"commercial": [
3+
"auditor",
4+
"commercialrepresentative",
5+
"director",
6+
"shareholder",
7+
"trustee",
8+
"solicitors",
9+
"missing",
10+
"investor",
11+
"supplier",
12+
"trustee"
13+
],
14+
"engineering": [
15+
"buildertier1",
16+
"buildertier2",
17+
"consultingengineer",
18+
"contributingengineer",
19+
"designer",
20+
"noncontributingengineer",
21+
"suppliertier1",
22+
"suppliertier2"
23+
],
24+
"other": ["externalpatronage", "navalofficer"]
25+
}

Diff for: ‎src/SocialApp.js

+30-21
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Dry from "json-dry";
44
import ReactModal from "react-modal";
55

66
// Brunel components
7+
import AnalysisPanel from "./components/AnalysisPanel";
78
import SocialGraph from "./components/SocialGraph";
89
import InfoBox from "./components/InfoBox";
910
import TimeLineBox from "./components/TimeLineBox";
@@ -57,6 +58,7 @@ class SocialApp extends React.Component {
5758
isHamburgerMenuOpen: false,
5859
timeline: new TimeLineBox(),
5960
isOverlayOpen: false,
61+
isAnalysisOpen: false,
6062
wobbleEnabled: true,
6163
selectedShip: null,
6264
selectedShipID: null,
@@ -83,6 +85,7 @@ class SocialApp extends React.Component {
8385
isTimeLinePanelOpen: false,
8486
isHamburgerMenuOpen: false,
8587
isFilterPanelOpen: false,
88+
isAnalysisOpen: false,
8689
highlighted_item: null,
8790
});
8891
}
@@ -192,6 +195,10 @@ class SocialApp extends React.Component {
192195
});
193196
}
194197

198+
toggleAnalysisPanel() {
199+
this.setState({ isAnalysisOpen: !this.state.isAnalysisOpen });
200+
}
201+
195202
toggleWobble() {
196203
this.setState({ wobbleEnabled: !this.state.wobbleEnabled });
197204
}
@@ -221,6 +228,8 @@ class SocialApp extends React.Component {
221228

222229
// let sidebarClass = this.state.isHamburgerMenuOpen ? styles.sidebarVis : stules
223230

231+
console.log(this.state.isHamburgerMenuOpen);
232+
224233
return (
225234
<div>
226235
<ReactModal
@@ -272,7 +281,7 @@ class SocialApp extends React.Component {
272281
}}
273282
/>
274283

275-
<SlidingPanel isOpen={this.state.isTimeLinePanelOpen} position="bottom" size="20%">
284+
<SlidingPanel isOpen={this.state.isTimeLinePanelOpen} position="bottom" height="20%">
276285
<span
277286
className={styles.closePanelButton}
278287
onClick={() => {
@@ -344,7 +353,7 @@ class SocialApp extends React.Component {
344353
</SlidingPanel>
345354

346355
{/* Filter on bottom of page */}
347-
<SlidingPanel isOpen={this.state.isFilterPanelOpen} position="bottom">
356+
<SlidingPanel isOpen={this.state.isFilterPanelOpen} position="bottom" height="20%">
348357
<span
349358
className={styles.closePanelButton}
350359
onClick={() => {
@@ -371,7 +380,7 @@ class SocialApp extends React.Component {
371380
</SlidingPanel>
372381

373382
{/* This creates the menu on the LHS opened by the hamburger */}
374-
<SlidingPanel isOpen={this.state.isHamburgerMenuOpen} position="left" size="10%">
383+
<SlidingPanel isOpen={this.state.isHamburgerMenuOpen} position="left" width="10%" height="100%">
375384
<BrunelMenu
376385
setOverlay={this.setOverlay}
377386
clickReset={() => {
@@ -411,24 +420,24 @@ class SocialApp extends React.Component {
411420
/>
412421
</div>
413422

414-
{/* Some side panel */}
415-
{/* <div className={styles.rightSidePanel}>
416-
<div>
417-
<DefaultButton
418-
onClick={() => {
419-
this.toggleFilterPanel();
420-
}}
421-
>
422-
Filters
423-
</DefaultButton>
424-
</div>
425-
<div>
426-
<DefaultButton onClick={() => this.toggleTimeLinePanel()}>{"Timeline"}</DefaultButton>
427-
</div>
428-
<div>
429-
<DefaultButton onClick={this.toggleWobble}>Wobble</DefaultButton>
430-
</div>
431-
</div> */}
423+
<div className={styles.rightSidePanel}>
424+
<button
425+
onClick={() => {
426+
this.setState({ isAnalysisOpen: !this.state.isAnalysisOpen });
427+
}}
428+
>
429+
Panel
430+
</button>
431+
</div>
432+
433+
<SlidingPanel isOpen={this.state.isAnalysisOpen} position="right" width="10%">
434+
<AnalysisPanel
435+
toggleFilterPanel={() => this.toggleFilterPanel()}
436+
toggleTimeLinePanel={() => this.toggleTimeLinePanel()}
437+
toggleWobble={() => this.toggleWobble()}
438+
togglePanel={() => this.toggleAnalysisPanel()}
439+
/>
440+
</SlidingPanel>
432441
</div>
433442
);
434443
}

Diff for: ‎src/components/AnalysisPanel.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import PropTypes from "prop-types";
2+
import React from "react";
3+
import DefaultButton from "./DefaultButton";
4+
5+
import logo from "../images/ssgb_logo.png";
6+
7+
import styles from "./AnalysisPanel.module.css";
8+
9+
class AnalysisPanel extends React.Component {
10+
constructor(props) {
11+
super(props);
12+
13+
this.state = { ship: "SS Great Western" };
14+
}
15+
16+
render() {
17+
return (
18+
<div className={styles.wholePanel}>
19+
<div className={styles.verticalSpaceTitle}></div>
20+
<div className={styles.titleText}>Analysis</div>
21+
<div className={styles.verticalSpace}></div>
22+
<button
23+
className={styles.button}
24+
onClick={() => {
25+
this.props.toggleFilterPanel();
26+
this.props.togglePanel();
27+
}}
28+
>
29+
Filters
30+
</button>
31+
<button
32+
className={styles.button}
33+
onClick={() => {
34+
this.props.toggleTimeLinePanel();
35+
this.props.togglePanel();
36+
}}
37+
>
38+
Timeline
39+
</button>
40+
<button
41+
className={styles.button}
42+
onClick={() => {
43+
this.props.toggleWobble();
44+
}}
45+
>
46+
Wobble
47+
</button>
48+
<button
49+
className={styles.button}
50+
onClick={() => {
51+
this.props.togglePanel();
52+
}}
53+
>
54+
Close
55+
</button>
56+
</div>
57+
);
58+
}
59+
}
60+
61+
AnalysisPanel.propTypes = {
62+
toggleFilterPanel: PropTypes.func.isRequired,
63+
toggleTimeLinePanel: PropTypes.func.isRequired,
64+
toggleWobble: PropTypes.func.isRequired,
65+
togglePanel: PropTypes.func.isRequired,
66+
};
67+
68+
export default AnalysisPanel;

Diff for: ‎src/components/AnalysisPanel.module.css

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
.titleText {
2+
display: flex;
3+
justify-content: center;
4+
align-items: center;
5+
font-family: "Playfair Display SC";
6+
font-size: calc(18px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
7+
text-decoration: underline;
8+
}
9+
10+
.wholePanel {
11+
background: #9cb6a4;
12+
height: 100%;
13+
overflow-x: hidden;
14+
overflow-y: hidden;
15+
}
16+
17+
.buttonPanel {
18+
margin-top: 250%;
19+
height: 10%;
20+
}
21+
22+
/* This makes the buttons look like text */
23+
/* Based on https://stackoverflow.com/a/1368286 */
24+
.button {
25+
background: none;
26+
border: none;
27+
font-family: "Playfair Display SC";
28+
color: #f1f1f1;
29+
cursor: pointer;
30+
font-size: calc(12px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
31+
padding: 8px 8px 8px 32px;
32+
text-align: left;
33+
}
34+
35+
.button:hover {
36+
color: #111;
37+
}
38+
39+
.verticalSpaceTitle {
40+
margin-bottom: 20%;
41+
}
42+
43+
.verticalSpace {
44+
margin-bottom: 45%;
45+
}

Diff for: ‎src/components/BrunelMenu.module.css

+9-12
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,27 @@
11
@font-face {
2-
font-family: "Playfair Display SC";
3-
src: local("Playfair Display SC"), url(../fonts/PlayfairDisplaySC-Bold.ttf) format("truetype")
2+
font-family: "Playfair Display SC";
3+
src: local("Playfair Display SC"), url(../fonts/PlayfairDisplaySC-Bold.ttf) format("truetype");
44
}
55

66
@font-face {
7-
font-family: "Playfair Display";
8-
src: local("Playfair Display"), url(../fonts/PlayfairDisplay-Regular.ttf) format("truetype")
7+
font-family: "Playfair Display";
8+
src: local("Playfair Display"), url(../fonts/PlayfairDisplay-Regular.ttf) format("truetype");
99
}
1010

11-
1211
.sidebar {
1312
display: flex;
1413
flex-direction: column;
1514
flex-wrap: nowrap;
1615
height: 100%;
1716
background-color: #808080;
18-
1917
}
2018

2119
.logo {
22-
text-align: center;
20+
text-align: center;
2321
}
2422

2523
.verticalSpace {
26-
margin-bottom: 45%;
24+
margin-bottom: 45%;
2725
}
2826

2927
/* This makes the buttons look like text */
@@ -34,12 +32,11 @@
3432
font-family: "Playfair Display SC";
3533
color: #f1f1f1;
3634
cursor: pointer;
37-
font-size: 25px;
35+
font-size: calc(12px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
3836
padding: 8px 8px 8px 32px;
3937
text-align: left;
4038
}
4139

4240
.button:hover {
43-
color: #111
44-
45-
}
41+
color: #111;
42+
}

Diff for: ‎src/components/SlidingPanel.js

+16-10
Original file line numberDiff line numberDiff line change
@@ -25,22 +25,29 @@ class SlidingPanel extends React.Component {
2525
let container = styles.rightContainer;
2626
let transition = SlideFromRight;
2727

28-
let size = this.props.size;
28+
let width = this.props.width;
29+
let height = this.props.height;
2930

30-
let horiz_size = { width: size };
31-
let vert_size = { height: size };
31+
if (height && !width) {
32+
width = "100%";
33+
}
3234

33-
if (!size) {
34-
horiz_size = { width: this.state.defaultSize, minSize: this.state.minSize };
35-
vert_size = { height: this.state.defaultSize, minSize: this.state.minSize };
35+
if (width && !height) {
36+
console.log("Setting height 100%");
37+
height = "100%";
3638
}
3739

40+
let horiz_size = { width: width };
41+
let vert_size = { height: height };
42+
43+
let style = { width: width, height: height, minSize: this.state.minSize };
44+
3845
if (this.props.maxSize) {
3946
horiz_size.maxWidth = this.props.maxSize;
4047
vert_size.maxHeight = this.props.maxSize;
4148
}
4249

43-
let style = horiz_size;
50+
// let style = horiz_size;
4451
// Get the passed in position
4552
let position = this.props.position;
4653

@@ -50,11 +57,9 @@ class SlidingPanel extends React.Component {
5057
} else if (position === "bottom") {
5158
container = styles.bottomContainer;
5259
transition = SlideFromBottom;
53-
style = vert_size;
5460
} else if (position === "top") {
5561
container = styles.topContainer;
5662
transition = SlideFromTop;
57-
style = vert_size;
5863
} else if (position === "left") {
5964
container = styles.leftContainer;
6065
transition = SlideFromLeft;
@@ -78,7 +83,8 @@ SlidingPanel.propTypes = {
7883
maxSize: PropTypes.string,
7984
minSize: PropTypes.string,
8085
position: PropTypes.string,
81-
size: PropTypes.string,
86+
width: PropTypes.string,
87+
height: PropTypes.string,
8288
};
8389

8490
export default SlidingPanel;

Diff for: ‎src/components/SlidingPanel.module.css

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
.container {
2-
background-color: white;
2+
background-color: #222222;
33
overflow-x: hidden;
44
overflow-y: auto;
55
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
@@ -10,15 +10,13 @@
1010
left: 0;
1111
top: 0;
1212
z-index: 100;
13-
height: 100%;
1413
}
1514

1615
.rightContainer {
1716
position: fixed;
1817
right: 0;
1918
top: 0;
2019
z-index: 100;
21-
height: 100%;
2220
}
2321

2422
.topContainer {

0 commit comments

Comments
 (0)