Skip to content

Commit 857c1ca

Browse files
author
Alban Bailly
committed
more styling
1 parent 34a12c5 commit 857c1ca

File tree

8 files changed

+138
-105
lines changed

8 files changed

+138
-105
lines changed

‎src/components/2_molecules/ResponseItem.js

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,20 @@ export const ResponseItem = props => {
44
const { response, r, m } = props;
55
return (
66
r && (
7-
<div>
7+
<div className="mt-8">
88
<p
9-
className={`text-lg p-2 ${
9+
className={`text-lg p-1 pl-4 text-xl ${
1010
response === "_200"
11-
? "bg-BaseGreenLight text-BaseGreen"
11+
? "response-200 text-BaseGreen"
1212
: response === "default"
13-
? "bg-BaseRedLight text-BaseRed"
13+
? "response-default text-BaseRed"
1414
: null
1515
}
1616
`}
1717
>
18-
<b>{response.replace(/[_]/g, " ")}</b>:&nbsp;
19-
{r.description}
18+
<b>{response.replace(/[_]/g, " ")}</b>: {r.description}
2019
</p>
21-
<hr className="border-top border-BaseNavGrey" />
22-
<div>
20+
<div className="mt-6">
2321
{r.content &&
2422
r.content.application_json &&
2523
r.content.application_json.schema &&
@@ -105,7 +103,7 @@ export const ResponseItem = props => {
105103
</div>
106104
</div>
107105
{l.properties && (
108-
<div className="py-2 px-4 bg-ThemeBeige mt-2 mb-4">
106+
<div className="px-4 mt-2 mb-4 ml-4 subResponse">
109107
{Object.keys(l.properties).map((e, i) => {
110108
const data = l.properties[e];
111109
return (
@@ -147,7 +145,7 @@ export const ResponseItem = props => {
147145
</div>
148146
)}
149147
{l.items && (
150-
<div className="py-2 px-4 bg-ThemeBeige mt-2 mb-4">
148+
<div className="px-4 mt-2 mb-4 ml-4 subResponse">
151149
{l.items.properties &&
152150
Object.keys(l.items.properties).map((e, i) => {
153151
const data = l.items.properties[e];

‎src/components/2_molecules/ResponseSampleTitle.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1+
import React from "react";
2+
13
export const ResponseSampleTitle = props => {
2-
const { response, r } = props;
3-
return r && response.replace(/[_]/g, " ");
4+
const { response, r, className } = props;
5+
return (
6+
r && <span className={className}>{response.replace(/[_]/g, " ")}</span>
7+
);
48
};
59

610
export default ResponseSampleTitle;

‎src/components/2_molecules/ResponseSamples.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,10 @@ export const ResponseList = props => {
1818
<ResponseSampleTitle
1919
response={options[e]}
2020
r={responses[options[e]]}
21+
className={
22+
(options[e] === "_200" && "text-BaseGreen") ||
23+
(options[e] === "default" && "text-BaseRed")
24+
}
2125
/>
2226
</Tab>
2327
)

‎src/components/2_molecules/sidemenu.js

Lines changed: 89 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -68,98 +68,104 @@ class SideMenu extends React.Component {
6868
const groups = this.props.data.allPaths.group;
6969

7070
return (
71-
<div className="api-navigation mb-8">
72-
<SearchHeader />
73-
<div>
74-
{groups.map((group, i) => {
75-
return (
76-
<div className="list-container" key={i}>
77-
<span className="caret mr-2">
78-
<Caret />
79-
</span>
80-
<button onClick={this.toggleActive} className="inline-block">
81-
<span className="mt-0">{group.fieldValue}</span>
82-
</button>
83-
<div id={_.kebabCase(group.fieldValue)} className="list-group">
84-
{group.edges.map((link, i) => {
85-
const n = link.node;
86-
return (
87-
<ul key={i} className="p-0 pl-4">
88-
{n.get && (
89-
<li className="list-reset">
90-
<Link
91-
to={`/api/v4/${_.kebabCase(n.name)}`}
92-
className={`${
93-
_.kebabCase(n.name) + "/" === activePage
94-
? "active-item"
95-
: null
96-
}
71+
<div className="api-navigation-wrapper bg-ThemeCell">
72+
<div className="api-navigation">
73+
<SearchHeader />
74+
<div>
75+
{groups.map((group, i) => {
76+
return (
77+
<div className="list-container" key={i}>
78+
<span className="caret mr-2">
79+
<Caret />
80+
</span>
81+
<button onClick={this.toggleActive} className="inline-block">
82+
<span className="mt-0">{group.fieldValue}</span>
83+
</button>
84+
<div
85+
id={_.kebabCase(group.fieldValue)}
86+
className="list-group"
87+
>
88+
{group.edges.map((link, i) => {
89+
const n = link.node;
90+
return (
91+
<ul key={i} className="p-0 pl-4">
92+
{n.get && (
93+
<li className="list-reset">
94+
<Link
95+
to={`/api/v4/${_.kebabCase(n.name)}`}
96+
className={`${
97+
_.kebabCase(n.name) + "/" === activePage
98+
? "active-item"
99+
: null
100+
}
97101
api-link
98102
`}
99-
onClick={this.toggleActiveLink}
100-
>
101-
{n.get.summary}
102-
</Link>
103-
</li>
104-
)}
105-
{n.post && (
106-
<li className="list-reset">
107-
<Link
108-
to={`/api/v4/${_.kebabCase(n.name)}/#post`}
109-
className={`${
110-
_.kebabCase(n.name) + "/#post" === activePage
111-
? "active-item"
112-
: null
113-
}
103+
onClick={this.toggleActiveLink}
104+
>
105+
{n.get.summary}
106+
</Link>
107+
</li>
108+
)}
109+
{n.post && (
110+
<li className="list-reset">
111+
<Link
112+
to={`/api/v4/${_.kebabCase(n.name)}/#post`}
113+
className={`${
114+
_.kebabCase(n.name) + "/#post" === activePage
115+
? "active-item"
116+
: null
117+
}
114118
api-link
115119
`}
116-
onClick={this.toggleActiveLink}
117-
>
118-
{n.post.summary}
119-
</Link>
120-
</li>
121-
)}
122-
{n.put && (
123-
<li className="list-reset">
124-
<Link
125-
to={`/api/v4/${_.kebabCase(n.name)}/#put`}
126-
className={`${
127-
_.kebabCase(n.name) + "/#put" === activePage
128-
? "active-item"
129-
: null
130-
}
120+
onClick={this.toggleActiveLink}
121+
>
122+
{n.post.summary}
123+
</Link>
124+
</li>
125+
)}
126+
{n.put && (
127+
<li className="list-reset">
128+
<Link
129+
to={`/api/v4/${_.kebabCase(n.name)}/#put`}
130+
className={`${
131+
_.kebabCase(n.name) + "/#put" === activePage
132+
? "active-item"
133+
: null
134+
}
131135
api-link
132136
`}
133-
onClick={this.toggleActiveLink}
134-
>
135-
{n.put.summary}
136-
</Link>
137-
</li>
138-
)}
139-
{n.delete && (
140-
<li className="list-reset">
141-
<Link
142-
to={`/api/v4/${_.kebabCase(n.name)}/#delete`}
143-
className={`${
144-
_.kebabCase(n.name) + "/#delete" === activePage
145-
? "active-item"
146-
: null
147-
}
137+
onClick={this.toggleActiveLink}
138+
>
139+
{n.put.summary}
140+
</Link>
141+
</li>
142+
)}
143+
{n.delete && (
144+
<li className="list-reset">
145+
<Link
146+
to={`/api/v4/${_.kebabCase(n.name)}/#delete`}
147+
className={`${
148+
_.kebabCase(n.name) + "/#delete" ===
149+
activePage
150+
? "active-item"
151+
: null
152+
}
148153
api-link
149154
`}
150-
onClick={this.toggleActiveLink}
151-
>
152-
{n.delete.summary}
153-
</Link>
154-
</li>
155-
)}
156-
</ul>
157-
);
158-
})}
155+
onClick={this.toggleActiveLink}
156+
>
157+
{n.delete.summary}
158+
</Link>
159+
</li>
160+
)}
161+
</ul>
162+
);
163+
})}
164+
</div>
159165
</div>
160-
</div>
161-
);
162-
})}
166+
);
167+
})}
168+
</div>
163169
</div>
164170
</div>
165171
);

‎src/components/4_layouts/layout.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,8 @@ const Layout = ({ children, title, subtitle, fullWidth }) => (
3131
/>
3232
{title && subtitle && <Banner title={title} subtitle={subtitle} />}
3333
<div
34-
className={`main-wrapper py-2 px-4 md:px-8 ${!fullWidth &&
35-
"max-w-3xl mx-auto"}`}
34+
className={`main-wrapper ${!fullWidth &&
35+
"max-w-3xl mx-auto px-4 md:px-8 py-2"}`}
3636
>
3737
<main className="main">{children}</main>
3838
</div>

‎src/components/5_templates/api.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,10 @@ const apiPage = ({ data }) => {
5757
{m.summary}
5858
</h2>
5959
<p className="mb-2">
60-
<b className="uppercase">{mode}</b>&nbsp;&nbsp;
61-
https://api.linode.com/v4{n.name}
60+
<span className="tag big bold">{mode}</span>
61+
&nbsp;&nbsp; https://api.linode.com/v4{n.name}
6262
</p>
63-
<hr className="border-top border-BaseNavGrey" />
64-
<p className="mt-0">{m.description}</p>
63+
<p>{m.description}</p>
6564
{m.parameters && (
6665
<p className="mb-2">
6766
<b>Query Parameters</b>

‎src/css/components/0_utilities/typography.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ h5 a {
66
text-decoration: none !important;
77
}
88

9+
.tag.big {
10+
font-size: 1rem;
11+
}
12+
913
.border-top {
1014
border-top-width: 1px;
1115
}

‎src/css/components/4_pages/api-page.css

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
1+
.api-navigation-wrapper {
2+
padding: 2rem;
3+
margin-right: 1rem;
4+
height: 100%;
5+
}
6+
17
.api-navigation {
28
position: sticky;
3-
top: 30px;
49
z-index: 2;
5-
padding-right: 1rem;
6-
margin-right: 1rem;
7-
margin-top: 2rem;
10+
top: 2rem;
811
}
912

1013
.api-content {
@@ -57,3 +60,18 @@
5760
.api-link.active-item {
5861
@apply text-BaseBlackFull no-underline;
5962
}
63+
64+
.response-200 {
65+
border-left-width: 5px;
66+
@apply border-BaseGreen;
67+
}
68+
69+
.response-default {
70+
border-left-width: 5px;
71+
@apply border-BaseRed;
72+
}
73+
74+
.subResponse {
75+
border-left-width: 2px;
76+
@apply border-grey-darker;
77+
}

0 commit comments

Comments
 (0)