Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 9168d7c

Browse files
CSS for combo component
1 parent 858201b commit 9168d7c

File tree

16 files changed

+94
-141
lines changed

16 files changed

+94
-141
lines changed

‎dev/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ class App extends Component {
6262

6363
render() {
6464
return (
65-
<div className="app__container plotly-editor--theme-provider">
65+
<div className="app">
6666
<PlotlyEditor
6767
data={this.state.data}
6868
layout={this.state.layout}

‎dev/styles.css

Lines changed: 9 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,49 +4,29 @@ body {
44
font-family: sans-serif;
55
}
66

7-
.app__container {
8-
display: flex;
9-
flex-direction: column;
10-
}
11-
127
.app {
13-
display: flex;
14-
/*
15-
We are defining the max height of the app so that the editor knows how big to be
16-
currently the editor will take up whatever space it can if it is not constrained in its parent
17-
*/
18-
flex-grow: 1;
19-
height: calc(100vh - 50px);
20-
max-height: calc(100vh - 50px);
21-
width: 100%;
22-
}
23-
24-
.app__main {
25-
max-width: 100%;
268
height: calc(100vh - 50px);
279
max-height: calc(100vh - 50px);
28-
overflow: auto;
29-
flex-grow: 1;
3010
}
3111

3212
.mock-nav {
3313
height: 50px;
3414
width: 100%;
35-
background-color: var(--color-background-inverse);
15+
background-color: #506784;
3616
display: inline-flex;
3717
color: white;
3818
}
3919

40-
.mock-nav__label{
41-
line-height: 50px;
42-
padding-left: 10px;
20+
.mock-nav__label{
21+
line-height: 50px;
22+
padding-left: 10px;
4323
}
4424

45-
.mock-nav__select{
46-
width: 300px;
47-
margin-left: 20px;
48-
margin-right: 20px;
49-
margin-top: 7px;
25+
.mock-nav__select{
26+
width: 300px;
27+
margin-left: 20px;
28+
margin-right: 20px;
29+
margin-top: 7px;
5030
}
5131

5232
.Select.open-top .Select-menu-outer {

‎examples/custom/src/App.js

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -34,20 +34,22 @@ class App extends Component {
3434

3535
render() {
3636
return (
37-
<PlotlyEditor
38-
data={this.state.data}
39-
layout={this.state.layout}
40-
config={config}
41-
dataSources={dataSources}
42-
dataSourceOptions={dataSourceOptions}
43-
plotly={plotly}
44-
onUpdate={(data, layout) => this.setState({data, layout})}
45-
useResizeHandler
46-
debug
47-
advancedTraceTypeSelector
48-
>
49-
<CustomEditor />
50-
</PlotlyEditor>
37+
<div className="app">
38+
<PlotlyEditor
39+
data={this.state.data}
40+
layout={this.state.layout}
41+
config={config}
42+
dataSources={dataSources}
43+
dataSourceOptions={dataSourceOptions}
44+
plotly={plotly}
45+
onUpdate={(data, layout) => this.setState({data, layout})}
46+
useResizeHandler
47+
debug
48+
advancedTraceTypeSelector
49+
>
50+
<CustomEditor />
51+
</PlotlyEditor>
52+
</div>
5153
);
5254
}
5355
}

‎examples/custom/src/index.css

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,7 @@ body {
44
font-family: sans-serif;
55
}
66

7-
.app{
8-
display: flex;
9-
/*
10-
We are defining the max height of the app so that the editor knows how big to be
11-
currently the editor will take up whatever space it can if it is not constrained in its parent
12-
*/
13-
min-height: 100vh;
14-
max-height: 100vh;
15-
width: 100%;
16-
}
17-
.app__main {
18-
max-width: 100%;
19-
max-height: 100vh;
20-
overflow: auto;
21-
flex-grow: 1;
7+
.app {
8+
height: calc(100vh - 50px);
9+
max-height: calc(100vh - 50px);
2210
}

‎examples/demo/src/App.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ class App extends Component {
5858

5959
render() {
6060
return (
61-
<div className="app__container plotly-editor--theme-provider">
61+
<div className="app">
6262
<PlotlyEditor
6363
data={this.state.data}
6464
layout={this.state.layout}

‎examples/demo/src/index.css

Lines changed: 1 addition & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,35 +4,15 @@ body {
44
font-family: sans-serif;
55
}
66

7-
.app__container {
8-
display: flex;
9-
flex-direction: column;
10-
}
11-
127
.app {
13-
display: flex;
14-
/*
15-
We are defining the max height of the app so that the editor knows how big to be
16-
currently the editor will take up whatever space it can if it is not constrained in its parent
17-
*/
18-
flex-grow: 1;
19-
height: calc(100vh - 50px);
20-
max-height: calc(100vh - 50px);
21-
width: 100%;
22-
}
23-
24-
.app__main {
25-
max-width: 100%;
268
height: calc(100vh - 50px);
279
max-height: calc(100vh - 50px);
28-
overflow: auto;
29-
flex-grow: 1;
3010
}
3111

3212
.mock-nav {
3313
height: 50px;
3414
width: 100%;
35-
background-color: var(--color-background-inverse);
15+
background-color: #506784;
3616
display: inline-flex;
3717
color: white;
3818
}

‎examples/redux/src/App.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -32,18 +32,20 @@ class App extends Component {
3232
const {actions, dataSources, dataSourceOptions, data, layout} = this.props;
3333

3434
return (
35-
<PlotlyEditor
36-
data={data}
37-
layout={layout}
38-
config={config}
39-
dataSources={dataSources}
40-
dataSourceOptions={dataSourceOptions}
41-
plotly={plotly}
42-
onUpdate={actions.editorUpdate}
43-
useResizeHandler
44-
debug
45-
advancedTraceTypeSelector
46-
/>
35+
<div className="app">
36+
<PlotlyEditor
37+
data={data}
38+
layout={layout}
39+
config={config}
40+
dataSources={dataSources}
41+
dataSourceOptions={dataSourceOptions}
42+
plotly={plotly}
43+
onUpdate={actions.editorUpdate}
44+
useResizeHandler
45+
debug
46+
advancedTraceTypeSelector
47+
/>
48+
</div>
4749
);
4850
}
4951
}

‎examples/redux/src/index.css

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,7 @@ body {
44
font-family: sans-serif;
55
}
66

7-
.app{
8-
display: flex;
9-
min-height: 100vh;
10-
}
11-
.app__aside{
12-
display: flex;
13-
max-height: 100vh;
14-
}
15-
.app__main{
16-
max-height: 100vh;
17-
width: 100%;
18-
overflow: auto;
7+
.app {
8+
height: calc(100vh - 50px);
9+
max-height: calc(100vh - 50px);
1910
}

‎examples/simple/src/App.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,18 +24,20 @@ class App extends Component {
2424

2525
render() {
2626
return (
27-
<PlotlyEditor
28-
data={this.state.data}
29-
layout={this.state.layout}
30-
config={config}
31-
dataSources={dataSources}
32-
dataSourceOptions={dataSourceOptions}
33-
plotly={plotly}
34-
onUpdate={(data, layout) => this.setState({data, layout})}
35-
useResizeHandler
36-
debug
37-
advancedTraceTypeSelector
38-
/>
27+
<div className="app">
28+
<PlotlyEditor
29+
data={this.state.data}
30+
layout={this.state.layout}
31+
config={config}
32+
dataSources={dataSources}
33+
dataSourceOptions={dataSourceOptions}
34+
plotly={plotly}
35+
onUpdate={(data, layout) => this.setState({data, layout})}
36+
useResizeHandler
37+
debug
38+
advancedTraceTypeSelector
39+
/>
40+
</div>
3941
);
4042
}
4143
}

‎examples/simple/src/index.css

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,7 @@ body {
55
}
66

77
.app {
8-
display: flex;
9-
/*
10-
We are defining the max height of the app so that the editor knows how big to be
11-
currently the editor will take up whatever space it can if it is not constrained in its parent
12-
*/
13-
min-height: 100vh;
8+
height: 100vh;
149
max-height: 100vh;
1510
width: 100%;
1611
}
17-
.app__main {
18-
max-width: 100%;
19-
max-height: 100vh;
20-
overflow: auto;
21-
flex-grow: 1;
22-
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /