Skip to content

Commit 396de01

Browse files
bcullmanbcullman
authored
fix: set viewport to 100%; clean up docs styles a bit (#312)
1 parent 02323ac commit 396de01

File tree

6 files changed

+117
-134
lines changed

6 files changed

+117
-134
lines changed

‎src/_playground/App.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import React, { Component } from 'react';
66
class App extends Component {
77
render() {
88
return (
9-
<div className='App'>
9+
<div className='frDocs-App'>
1010
<Routes />
1111
</div>
1212
);

‎src/_playground/App.scss‎

Lines changed: 92 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,101 @@ $fd-icons-path: '../../node_modules/fiori-fundamentals/scss/icons/';
22
$fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/';
33
@import '../../node_modules/fiori-fundamentals/scss/all.scss';
44

5-
.App {
5+
// Fundamental React Docs Styles
6+
.frDocs-App {
67
background-color: white;
8+
9+
.frDocs-Container {
10+
display: flex;
11+
justify-content: space-between;
12+
height: 100vh;
13+
overflow: hidden;
14+
margin-left: auto;
15+
margin-right: auto;
16+
width: 100%;
17+
18+
.frDocs-Sidebar {
19+
color: #21262c;
20+
min-width: 16rem;
21+
background-color: #f1f3f6;
22+
23+
.frDocs-Logo {
24+
font-size: 1.25rem;
25+
margin-bottom: 0;
26+
display: flex;
27+
justify-content: center;
28+
> a {
29+
color: inherit;
30+
}
31+
}
32+
33+
.frDocs-Nav {
34+
list-style: none;
35+
border-top: 2px solid #dbe7f3;
36+
height: 90%;
37+
overflow: auto;
38+
39+
.frDocs-Nav__headers {
40+
color: #424e5a;
41+
padding: 15px 20px;
42+
display: block;
43+
}
44+
45+
.frDocs-Nav__item {
46+
display: block;
47+
color: #21262c;
48+
font-size: 0.875rem;
49+
position: relative;
50+
padding: 13px 40px;
51+
}
52+
53+
.frDocs-Nav__item--selected {
54+
border-left: 6px solid #2fd0c8;
55+
}
56+
57+
.frDocs-Nav__item:hover,
58+
.frDocs-Nav__item--active {
59+
color: #424e5a;
60+
border-left: 6px solid #2fd0c8;
61+
padding-left: 34px;
62+
}
63+
}
64+
}
65+
66+
.frDocs-Content {
67+
flex-grow: 1;
68+
overflow-y: scroll;
69+
padding-bottom: 2rem;
70+
background-color: white;
71+
margin-right: auto;
72+
margin-left: auto;
73+
padding-left: 1rem;
74+
padding-right: 1rem;
75+
76+
.frDocs-Content__header {
77+
margin: 12px 0;
78+
margin-top: 2rem;
79+
font-size: 2.2rem;
80+
}
81+
82+
.frDocs-Content__description {
83+
margin-bottom: 1.5rem;
84+
font-size: 1rem;
85+
font-weight: 300;
86+
}
87+
88+
.frDocs-Content__tile {
89+
border-radius: 4px 4px 0 0;
90+
border: 1px solid #ccc;
91+
border-bottom: none;
92+
padding: 10px 0;
93+
background-color: '#f3f4f5'
94+
}
95+
}
96+
}
797
}
898

99+
// Fundamental React Component Overrides
9100
.fd-counter--notification {
10101
position: relative;
11102
}
@@ -42,104 +133,15 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/';
42133
padding-bottom: 10px;
43134
}
44135

45-
.docs-component {
46-
margin-bottom: -28px;
47-
border-radius: 4px;
48-
border-bottom-left-radius: 0;
49-
border-bottom-right-radius: 0;
50-
padding-bottom: 8px;
51-
border: 1px solid #ccc;
52-
}
53-
54136
.fd-side-nav.fd-side-nav--icons {
55137
max-width: 65px;
56138
}
57139

58-
.container {
59-
display: flex;
60-
justify-content: space-between;
61-
height: 100vh;
62-
overflow: hidden;
63-
width: 90%;
64-
margin-left: auto;
65-
margin-right: auto;
66-
}
67-
68-
.logo {
69-
font-size: 1.25rem;
70-
margin-bottom: 0;
71-
display: flex;
72-
justify-content: center;
73-
> a {
74-
color: inherit;
75-
}
76-
}
77-
78-
.logo-subtitle {
79-
font-size: 0.75rem;
80-
}
81-
82-
.sidebar {
83-
color: #21262c;
84-
min-width: 16rem;
85-
background-color: #f1f3f6;
86-
}
87-
88-
.nav {
89-
list-style: none;
90-
border-top: 2px solid #dbe7f3;
91-
height: 90%;
92-
overflow: auto;
93-
}
94-
95-
.nav-item {
96-
display: block;
97-
color: #21262c;
98-
font-size: 0.875rem;
99-
position: relative;
100-
padding: 13px 40px;
101-
}
102-
103-
.side-nav__headers {
104-
color: #424e5a;
105-
padding: 15px 20px;
106-
display: block;
107-
}
108-
109-
.nav-item--selected {
110-
border-left: 6px solid #2fd0c8;
111-
}
112-
113-
.nav-item:hover,
114-
.nav-item--active {
115-
color: #424e5a;
116-
border-left: 6px solid #2fd0c8;
117-
padding-left: 34px;
118-
}
119-
120-
.content {
121-
flex-grow: 1;
122-
overflow-y: scroll;
123-
padding-bottom: 2rem;
124-
background-color: white;
125-
}
126-
127-
.content-margin {
128-
margin-right: auto;
129-
margin-left: auto;
130-
padding-left: 1rem;
131-
padding-right: 1rem;
132-
}
133-
134140
.property-header {
135141
text-align: left;
136142
padding-right: 15px;
137143
}
138144

139-
.header {
140-
margin: 12px 0;
141-
}
142-
143145
.fd-side-nav {
144146
max-width: 250px;
145147
}
@@ -251,9 +253,3 @@ $fd-fonts-path: '../../node_modules/fiori-fundamentals/dist/fonts/';
251253
}
252254
}
253255
}
254-
255-
.description {
256-
margin-bottom: 1.5rem;
257-
font-size: 1rem;
258-
font-weight: 300;
259-
}

‎src/_playground/Routes.js‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -151,16 +151,16 @@ export default class Routes extends Component {
151151
render() {
152152
return (
153153
<BrowserRouter basename={process.env.PUBLIC_URL}>
154-
<div className='container'>
155-
<div className='sidebar'>
156-
<h1 className='logo'>FUNDAMENTAL REACT</h1>
157-
<ul className='nav'>
158-
<li className='side-nav__headers'>Components</li>
154+
<div className='frDocs-Container'>
155+
<div className='frDocs-Sidebar'>
156+
<h1 className='frDocs-Logo'>FUNDAMENTAL REACT</h1>
157+
<ul className='frDocs-Nav'>
158+
<li className='frDocs-Nav__headers'>Components</li>
159159
{this.state.routes.map(route => {
160160
return (
161161
<NavLink
162-
activeClassName='nav-item--active'
163-
className='nav-item'
162+
activeClassName='frDocs-Nav__item--active'
163+
className='frDocs-Nav__item'
164164
key={route.url}
165165
to={{ pathname: route.url }}>
166166
{route.name}
@@ -169,22 +169,20 @@ export default class Routes extends Component {
169169
})}
170170
</ul>
171171
</div>
172-
<div className='content'>
173-
<div className='content-margin'>
174-
<Switch>
175-
{this.state.routes.map(route => {
176-
return (
177-
<Route
178-
component={route.component}
179-
exact
180-
key={route.url}
181-
path={route.url} />
182-
);
183-
})}
184-
<Redirect exact from=''
185-
to='/actionBar' />
186-
</Switch>
187-
</div>
172+
<div className='frDocs-Content'>
173+
<Switch>
174+
{this.state.routes.map(route => {
175+
return (
176+
<Route
177+
component={route.component}
178+
exact
179+
key={route.url}
180+
path={route.url} />
181+
);
182+
})}
183+
<Redirect exact from=''
184+
to='/actionBar' />
185+
</Switch>
188186
</div>
189187
</div>
190188
</BrowserRouter>

‎src/_playground/documentation/Description/Description.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import ReactMarkdown from 'react-markdown';
44

55
export const Description = ({ children }) => (
66
<ReactMarkdown
7-
className='description'
7+
className='frDocs-Content__description'
88
source={children} />
99
);
1010

‎src/_playground/documentation/DocsTile/DocsTile.js‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,14 @@ import SyntaxHighlighter from 'react-syntax-highlighter';
55
import React, { Component } from 'react';
66

77
export const DocsTile = props => {
8-
const docsTileStyle = {
9-
borderRadius: '4px 4px 0 0',
10-
border: '1px solid #ccc',
11-
borderBottom: 'none',
12-
padding: '10px 0',
13-
backgroundColor: '#f3f4f5'
14-
};
158
const centerStyle = {
169
textAlign: 'center'
1710
};
1811

1912
const {centered, children} = props;
2013

2114
return (
22-
<div className='fd-tile' style={docsTileStyle}>
15+
<div className='frDocs-Content__tile'>
2316
{centered
2417
? (
2518
<div className='fd-tile__content'>

‎src/_playground/documentation/Header/Header.js‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,10 @@ import PropTypes from 'prop-types';
22
import React from 'react';
33

44
export const Header = (props) => {
5-
const headerStyle = {
6-
marginTop: '2rem',
7-
fontSize: '2.2rem'
8-
};
95
const { children } = props;
106

117
return (
12-
<h1 className='header' style={headerStyle}>
8+
<h1 className='frDocs-Content__header'>
139
{children}
1410
</h1>
1511
);

0 commit comments

Comments
 (0)