Skip to content

Commit f80e7e0

Browse files
author
Alban Bailly
committed
fixing overall layout
1 parent 8f8b7b8 commit f80e7e0

File tree

3 files changed

+170
-155
lines changed

3 files changed

+170
-155
lines changed

‎src/components/5_templates/api.js

Lines changed: 149 additions & 146 deletions
Original file line numberDiff line numberDiff line change
@@ -40,109 +40,111 @@ const apiPage = ({ data }) => {
4040
>
4141
<SEO title="API Documentation" description="" />
4242
<div className="flex flex-wrap">
43-
<div className="w-full md:w-1/6 sidebar-container">
43+
<div className="sidebar-container">
4444
<Sidebar />
4545
</div>
46-
<div className="w-full md:w-5/6 api-content mx-auto">
47-
<h1 className="mb-4 ">
48-
{(n.get && n.get.tags) ||
49-
(n.post && n.post.tags) ||
50-
(n.put && n.put.tags) ||
51-
(n.delete && n.delete.tags)}
52-
</h1>
53-
{Object.keys(n).map((e, i) => {
54-
const mode = modes[e];
55-
const m = n[mode];
56-
return (
57-
m && (
58-
<div key={i} className="flex flex-col">
59-
<div className="w-full mb-8 py-2">
60-
<h2 id={mode} className="mt-0">
61-
{m.summary}
62-
</h2>
63-
<div className="bg-ThemeCell p-4 mt-4 mb-8">
64-
<span className="tag big bold mr-2 uppercase">
65-
{mode}
66-
</span>
67-
<span>https://api.linode.com/v4{n.name}</span>
68-
</div>
46+
<div className="api-content-wrapper">
47+
<div class="api-content mx-auto">
48+
<h1 className="mb-4 ">
49+
{(n.get && n.get.tags) ||
50+
(n.post && n.post.tags) ||
51+
(n.put && n.put.tags) ||
52+
(n.delete && n.delete.tags)}
53+
</h1>
54+
{Object.keys(n).map((e, i) => {
55+
const mode = modes[e];
56+
const m = n[mode];
57+
return (
58+
m && (
59+
<div key={i} className="flex flex-col">
60+
<div className="w-full mb-8 py-2">
61+
<h2 id={mode} className="mt-0">
62+
{m.summary}
63+
</h2>
64+
<div className="bg-ThemeCell p-4 mt-4 mb-8">
65+
<span className="tag big bold mr-2 uppercase">
66+
{mode}
67+
</span>
68+
<span>https://api.linode.com/v4{n.name}</span>
69+
</div>
6970

70-
<Markdown
71-
source={m.description}
72-
escapeHtml={false}
73-
className="mt-8 api-desc"
74-
/>
71+
<Markdown
72+
source={m.description}
73+
escapeHtml={false}
74+
className="mt-8 api-desc"
75+
/>
7576

76-
{m.parameters && (
77-
<p className="mb-2">
78-
<b>Query Parameters</b>
79-
</p>
80-
)}
81-
{m.parameters &&
82-
m.parameters.map((param, i) => (
83-
<ParamDisplay
84-
key={`param-item-${i}`}
85-
param={param}
86-
m={m}
87-
/>
88-
))}
89-
{m.security && <Security oauth={m.security[1].oauth} />}
90-
<div>
91-
{m.requestBody && (
92-
<>
93-
<div className="my-4">
94-
<h3>Request Body Schema</h3>
95-
</div>
96-
{m.requestBody.content.application_json &&
97-
m.requestBody.content.application_json.schema &&
98-
m.requestBody.content.application_json.schema
99-
.properties &&
100-
Object.keys(
77+
{m.parameters && (
78+
<p className="mb-2">
79+
<b>Query Parameters</b>
80+
</p>
81+
)}
82+
{m.parameters &&
83+
m.parameters.map((param, i) => (
84+
<ParamDisplay
85+
key={`param-item-${i}`}
86+
param={param}
87+
m={m}
88+
/>
89+
))}
90+
{m.security && <Security oauth={m.security[1].oauth} />}
91+
<div>
92+
{m.requestBody && (
93+
<>
94+
<div className="my-4">
95+
<h3>Request Body Schema</h3>
96+
</div>
97+
{m.requestBody.content.application_json &&
98+
m.requestBody.content.application_json.schema &&
10199
m.requestBody.content.application_json.schema
102-
.properties
103-
).map((p, i) => {
104-
const b =
100+
.properties &&
101+
Object.keys(
105102
m.requestBody.content.application_json.schema
106-
.properties[p];
107-
return (
108-
b && (
109-
<div key={i}>
110-
<div className="flex mb-4">
111-
<div className="w-1/4">
112-
<div>
113-
<b>{p}</b>
114-
</div>
115-
<div className="leading-xs">
116-
{m.requestBody.content
117-
.application_json.schema.required &&
118-
m.requestBody.content.application_json.schema.required.map(
119-
(req, i) => {
120-
if (p === req) {
121-
return (
122-
<span
123-
className="text-BaseRed text-sm"
124-
key={i}
125-
>
126-
Required
127-
</span>
128-
);
103+
.properties
104+
).map((p, i) => {
105+
const b =
106+
m.requestBody.content.application_json.schema
107+
.properties[p];
108+
return (
109+
b && (
110+
<div key={i}>
111+
<div className="flex mb-4">
112+
<div className="w-1/4">
113+
<div>
114+
<b>{p}</b>
115+
</div>
116+
<div className="leading-xs">
117+
{m.requestBody.content
118+
.application_json.schema
119+
.required &&
120+
m.requestBody.content.application_json.schema.required.map(
121+
(req, i) => {
122+
if (p === req) {
123+
return (
124+
<span
125+
className="text-BaseRed text-sm"
126+
key={i}
127+
>
128+
Required
129+
</span>
130+
);
131+
}
132+
return false;
129133
}
130-
return false;
131-
}
132-
)}
133-
</div>
134-
</div>
135-
<div className="w-3/4">
136-
<div className="text-sm leading-text-sm text-grey-darkest">
137-
{b.type}{" "}
138-
{b.pattern && (
139-
<span className="tag">
140-
{b.pattern}
141-
</span>
142-
)}
134+
)}
135+
</div>
143136
</div>
144-
<div>
145-
{/* {console.log(b)}
137+
<div className="w-3/4">
138+
<div className="text-sm leading-text-sm text-grey-darkest">
139+
{b.type}{" "}
140+
{b.pattern && (
141+
<span className="tag">
142+
{b.pattern}
143+
</span>
144+
)}
145+
</div>
146+
<div>
147+
{/* {console.log(b)}
146148
{b.enum &&
147149
b.enum.map((e, i) => {
148150
return (
@@ -151,69 +153,70 @@ const apiPage = ({ data }) => {
151153
</span>
152154
);
153155
})} */}
156+
</div>
157+
<div>{b.description}</div>
154158
</div>
155-
<div>{b.description}</div>
156159
</div>
157160
</div>
158-
</div>
159-
)
160-
);
161-
})}
162-
</>
163-
)}
164-
</div>
165-
<div className="w-full mb-8">
166-
<h3>Request Samples</h3>
167-
<Tabs className="my-4">
168-
<TabList>
161+
)
162+
);
163+
})}
164+
</>
165+
)}
166+
</div>
167+
<div className="w-full mb-8">
168+
<h3>Request Samples</h3>
169+
<Tabs className="my-4">
170+
<TabList>
171+
{m.x_code_samples &&
172+
m.x_code_samples.map((x, i) => {
173+
return <Tab key={i}>{x.lang}</Tab>;
174+
})}
175+
</TabList>
169176
{m.x_code_samples &&
170177
m.x_code_samples.map((x, i) => {
171-
return <Tab key={i}>{x.lang}</Tab>;
172-
})}
173-
</TabList>
174-
{m.x_code_samples &&
175-
m.x_code_samples.map((x, i) => {
176-
return (
177-
<TabPanel key={i}>
178-
<div className="flex justify-end text-sm">
179-
<Clipboard
180-
data-clipboard-text={x.source}
181-
className="flex items-center hover:text-BaseBlueLight"
178+
return (
179+
<TabPanel key={i}>
180+
<div className="flex justify-end text-sm">
181+
<Clipboard
182+
data-clipboard-text={x.source}
183+
className="flex items-center hover:text-BaseBlueLight"
184+
>
185+
<span className="mr-2">Copy</span>
186+
<Copy style={{ width: 22, height: 22 }} />
187+
</Clipboard>
188+
</div>
189+
<SyntaxHighlighter
190+
language="bash"
191+
style={atomDark}
192+
className="api-samples"
193+
codeTagProps={{
194+
style: { whiteSpace: "pre-wrap" }
195+
}}
182196
>
183-
<span className="mr-2">Copy</span>
184-
<Copy style={{ width: 22, height: 22 }} />
185-
</Clipboard>
186-
</div>
187-
<SyntaxHighlighter
188-
language="bash"
189-
style={atomDark}
190-
className="api-samples"
191-
codeTagProps={{
192-
style: { whiteSpace: "pre-wrap" }
193-
}}
194-
>
195-
{x.source}
196-
</SyntaxHighlighter>
197-
</TabPanel>
198-
);
199-
})}
200-
</Tabs>
201-
<ResponseSamples
197+
{x.source}
198+
</SyntaxHighlighter>
199+
</TabPanel>
200+
);
201+
})}
202+
</Tabs>
203+
<ResponseSamples
204+
options={responseOptions}
205+
responses={m.responses}
206+
m={m}
207+
/>
208+
</div>
209+
<ResponseList
202210
options={responseOptions}
203211
responses={m.responses}
204212
m={m}
205213
/>
206214
</div>
207-
<ResponseList
208-
options={responseOptions}
209-
responses={m.responses}
210-
m={m}
211-
/>
212215
</div>
213-
</div>
214-
)
215-
);
216-
})}
216+
)
217+
);
218+
})}
219+
</div>
217220
</div>
218221
</div>
219222
</Layout>

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,33 @@
11
.layout-fixed .sidebar-container {
22
position: fixed;
33
top: 64px;
4-
height: calc(100vh - 64px - 4rem);
4+
height: calc(100vh - 64px);
5+
overflow-y: hidden;
56
}
67

78
.api-navigation-wrapper {
89
padding: 2rem;
910
margin-right: 1rem;
1011
overflow-y: scroll;
12+
width: 300px;
13+
height: 100%;
1114
}
1215

1316
.api-navigation {
1417
/* position: sticky; */
1518
z-index: 2;
1619
top: 2rem;
20+
overflow: hidden;
21+
}
22+
23+
.api-content-wrapper {
24+
max-width: 60vw;
25+
margin-left: 300px;
1726
}
1827

1928
.api-content {
2029
max-width: 60vw;
30+
margin-left: 16.66667%;
2131
}
2232

2333
.api-body {

‎src/pages/api/v4.js

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,16 +27,18 @@ const APIDocs = ({ data }) => {
2727
>
2828
<SEO title="API Documentation" description="" />
2929
<div className="flex flex-wrap">
30-
<div className="w-full md:w-1/6 sidebar-container">
30+
<div className="sidebar-container">
3131
<Sidebar />
3232
</div>
33-
<div className="w-full md:w-5/6 api-content mx-auto">
34-
<Markdown
35-
source={n.info.description}
36-
escapeHtml={false}
37-
renderers={{ heading: HeadingRenderer }}
38-
className="mt-8 api-body"
39-
/>
33+
<div className="api-content-wrapper">
34+
<div className="api-content mx-auto">
35+
<Markdown
36+
source={n.info.description}
37+
escapeHtml={false}
38+
renderers={{ heading: HeadingRenderer }}
39+
className="mt-8 api-body"
40+
/>
41+
</div>
4042
</div>
4143
</div>
4244
</Layout>

0 commit comments

Comments
 (0)