Skip to content

Commit 8057012

Browse files
mrin9mrin9
committed
improved read style rendering
1 parent 4fe473c commit 8057012

21 files changed

+376
-241
lines changed

‎dist/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,10 @@
2121
<rapi-doc
2222
id="thedoc"
2323
spec-url="./specs/petstore_extended.yaml"
24-
theme="dark"
24+
theme="light"
2525
allow-api-list-style-selection = "false"
2626
render-style = 'read'
27+
default-schema-tab = "model"
2728
> </rapi-doc>
2829

2930
<!--

‎dist/index.html.gz‎

17 Bytes
Binary file not shown.

‎dist/rapidoc-min.js‎

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rapidoc-min.js.gz‎

874 Bytes
Binary file not shown.

‎dist/report.html‎

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎docs/rapidoc-min.js‎

Lines changed: 9 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,10 @@
2121
<rapi-doc
2222
id="thedoc"
2323
spec-url="./specs/petstore_extended.yaml"
24-
theme="dark"
24+
theme="light"
2525
allow-api-list-style-selection = "false"
2626
render-style = 'read'
27+
default-schema-tab = "model"
2728
> </rapi-doc>
2829

2930
<!--

‎src/components/api-request.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default class ApiRequest extends LitElement {
7575
</style>
7676
<div class="col regular-font request-panel ${this.renderStyle === 'read' ? 'read-mode' : 'view-mode'}">
7777
<div class="req-res-title">REQUEST</div>
78-
<div style='padding-left:${this.renderStyle === 'read' ? '16px' : '0'};'>
78+
<div>
7979
${this.inputParametersTemplate('path')}
8080
${this.inputParametersTemplate('query')}
8181
${this.requestBodyTemplate()}
@@ -95,7 +95,7 @@ export default class ApiRequest extends LitElement {
9595
this.responseText = '';
9696
this.responseUrl = '';
9797
this.curlSyntax = '';
98-
this.activeSchemaTab = this.defaultSchemaTab === 'model' ? 'model' : 'example';
98+
this.activeSchemaTab = this.defaultSchemaTab;
9999
this.activeResponseTab = 'response';
100100
}
101101

@@ -161,7 +161,7 @@ export default class ApiRequest extends LitElement {
161161

162162
tableRows.push(html`
163163
<tr>
164-
<td style="min-width:100px;">
164+
<td style="width:160px; min-width:100px;">
165165
<div class="param-name">
166166
${param.required ? html`<span style='color:orangered'>*</span>` : ''}${param.name}
167167
</div>
@@ -175,11 +175,11 @@ export default class ApiRequest extends LitElement {
175175
}
176176
</div>
177177
</td>
178-
<td style="min-width:100px;">
178+
<td style="width:160px; min-width:100px;">
179179
${paramSchema.type === 'array'
180180
? html`
181181
<tag-input class="request-param"
182-
style = "width:100%;font-size:calc(var(--small-) + 1px); background:var(--input-bg);line-height:13px;"
182+
style = "width:160px; background:var(--input-bg);line-height:13px;"
183183
data-ptype = "${paramType}"
184184
data-pname = "${param.name}"
185185
data-array = "true"
@@ -201,7 +201,7 @@ export default class ApiRequest extends LitElement {
201201
<div class="param-constraint">
202202
${paramSchema.default ? html`<span style="font-weight:bold">Default: </span>${paramSchema.default}<br/>` : ''}
203203
${paramSchema.constrain ? html`${paramSchema.constrain}<br/>` : ''}
204-
${paramSchema.allowedValues ? html`${paramSchema.allowedValues}` : ''}
204+
${paramSchema.allowedValues ? html`<span style="font-weight:bold">Allowed: </span>${paramSchema.allowedValues}` : ''}
205205
</div>`
206206
: ''
207207
}
@@ -211,7 +211,7 @@ export default class ApiRequest extends LitElement {
211211
? html`
212212
<tr>
213213
<td style="border:none"> </td>
214-
<td colspan="2" style="border:none; margin-top:0; padding:0 5px;">
214+
<td colspan="2" style="border:none; margin-top:0; padding:0 5px 8px 5px;">
215215
<span class="m-markdown-small">${unsafeHTML(marked(param.description || ''))}</span>
216216
</td>
217217
</tr>`
@@ -223,7 +223,7 @@ export default class ApiRequest extends LitElement {
223223
return html`
224224
<div class="table-title top-gap">${title}</div>
225225
<div style="display:block; overflow-x:auto; max-width:100%;">
226-
<table class="m-table" style="width:100%; word-break:break-word;;">
226+
<table class="m-table" style="width:100%; word-break:break-word;">
227227
${tableRows}
228228
</table>
229229
</div>`;
@@ -307,7 +307,7 @@ export default class ApiRequest extends LitElement {
307307
const arrayType = fieldSchema.type === 'array' ? fieldSchema.items.type : '';
308308
formDataTableRows.push(html`
309309
<tr>
310-
<td style="min-width:100px;">
310+
<td style="width:160px; min-width:100px;">
311311
<div class="param-name">${fieldName}</div>
312312
<div class="param-type">
313313
${fieldType === 'array'
@@ -316,11 +316,11 @@ export default class ApiRequest extends LitElement {
316316
}
317317
</div>
318318
</td>
319-
<td style="min-width:100px;">
319+
<td style="width:160px; min-width:100px;">
320320
${fieldType === 'array'
321321
? html`
322322
<tag-input class="request-form-param"
323-
style="width:100%; font-size:calc(var(--title-font-size) + 1px); background:var(--input-bg);line-height:13px;"
323+
style="width:160px; background:var(--input-bg);line-height:13px;"
324324
data-ptype="${fieldType}"
325325
data-pname="${fieldName}"
326326
data-array="true"
@@ -330,7 +330,7 @@ export default class ApiRequest extends LitElement {
330330
: html`<input
331331
spellcheck="false"
332332
type="${fieldSchema.format === 'binary' ? 'file' : 'text'}"
333-
style="width:100%" class="request-form-param"
333+
style="width:160px" class="request-form-param"
334334
data-pname="${fieldName}"
335335
data-ptype="${fieldType}"
336336
data-array="false"
@@ -345,7 +345,7 @@ export default class ApiRequest extends LitElement {
345345
? html`
346346
<tr>
347347
<td style="border:none"></td>
348-
<td colspan="2" style="border:none; margin-top:0; padding:0 5px;">
348+
<td colspan="2" style="border:none; margin-top:0; padding:0 5px 8px 5px;">
349349
<span class="m-markdown-small">${unsafeHTML(marked(fieldSchema.description || ''))}</span>
350350
</td>
351351
</tr>`
@@ -372,7 +372,7 @@ export default class ApiRequest extends LitElement {
372372
? html`${formDataHtml}`
373373
: html`
374374
<div class="tab-panel col" style="border-width:0 0 1px 0;">
375-
<div id="tab_buttons" class="tab-buttons row" @click="${(e) => { this.activeSchemaTab = e.target.dataset.tab; }}">
375+
<div class="tab-buttons row" @click="${(e) => { this.activeSchemaTab = e.target.dataset.tab; }}">
376376
${this.defaultSchemaTab === 'model'
377377
? html`
378378
<button class="tab-btn ${this.activeSchemaTab === 'model' ? 'active' : ''}" data-tab = 'model' >MODEL</button>
@@ -410,10 +410,10 @@ export default class ApiRequest extends LitElement {
410410
}
411411
</div>
412412
</div>
413-
<div id = 'tab_example' class = 'tab-content col' style = 'flex:1; display:${this.activeSchemaTab === 'example' ? 'flex' : 'none'};'>
413+
<div class ='tab-content col' style = 'flex:1; display:${this.activeSchemaTab === 'example' ? 'flex' : 'none'};'>
414414
${textareaExampleHtml}
415415
</div>
416-
<div id="tab_model" class="tab-content col" style="flex:1; display:${this.activeSchemaTab === 'model' ? 'flex' : 'none'};">
416+
<div class="tab-content col" style="flex:1; display:${this.activeSchemaTab === 'model' ? 'flex' : 'none'};">
417417
${Object.keys(shortMimeTypes).map((k) => html`
418418
${this.schemaStyle === 'table'
419419
? html`
@@ -441,13 +441,13 @@ export default class ApiRequest extends LitElement {
441441
return html`
442442
<div style="display:flex; align-items: center; margin:16px 0; font-size:var(--font-size-small);">
443443
<div style="display:flex; flex-direction:column; margin:0; width:calc(100% - 60px);">
444-
<div style="display:flex;flex-direction:row;overflow:hidden;"> <div style="font-weight:bold;">API_Server: </div>
444+
<div style="display:flex;flex-direction:row;overflow:hidden;"> <div style="font-weight:bold;padding-right:5px;">API SERVER: </div>
445445
${this.selectedServer
446446
? html`${this.selectedServer}`
447447
: html`<div style="font-weight:bold;color:var(--error-color)">Not Set</div>`
448448
}
449449
</div>
450-
<div style="display:flex;flex-direction:row;overflow:hidden;line-height:16px;color:var(--fg2)">
450+
<div style="display:flex;flex-direction:row;overflow:hidden;line-height:16px;color:var(--fg3)">
451451
${this.apiKeyValue && this.apiKeyName
452452
? html`
453453
<div style="font-weight:bold;color:var(--success-color)">Authentication: &nbsp; </div>

0 commit comments

Comments
 (0)