Skip to content

Commit aea5322

Browse files
mrin9mrin9
committed
feature: added support for changing font-size
1 parent 9acd79f commit aea5322

File tree

13 files changed

+84
-72
lines changed

13 files changed

+84
-72
lines changed

‎src/components/api-request.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,10 +73,10 @@ export default class ApiRequest extends LitElement {
7373
margin-top:24px;
7474
}
7575
.param-name,
76-
.param-type{
76+
.param-type {
7777
margin: 1px 0;
7878
text-align: right;
79-
line-height: 12px;
79+
line-height: var(--font-size-small);
8080
}
8181
.param-name{
8282
color: var(--fg);

‎src/components/json-tree.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ export default class JsonTree extends LitElement {
3030
overflow:hidden;
3131
word-break: break-all;
3232
flex:1;
33-
line-height: 18px;
33+
line-height: calc(var(--font-size-small) + 6px);
3434
}
3535
3636
.open-bracket{

‎src/components/schema-table.js‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ export default class SchemaTable extends LitElement {
2525
SchemaStyles,
2626
css`
2727
.table {
28-
font-size:var(--font-size-small);
28+
font-size: var(--font-size-small);
2929
text-align: left;
30-
line-height:18px;
30+
line-height: calc(var(--font-size-small) + 6px);
3131
}
3232
.table .tr {
3333
width: calc(100% - 5px);
@@ -46,10 +46,10 @@ export default class SchemaTable extends LitElement {
4646
}
4747
4848
.collapsed-descr .tr {
49-
max-height:26px;
49+
max-height: calc(var(--font-size-small) + 14px);
5050
}
5151
.collapsed-descr .m-markdown-small p {
52-
line-height:26px;
52+
line-height: calc(var(--font-size-small) + 14px);
5353
}
5454
5555
.obj-toggle {
@@ -60,7 +60,7 @@ export default class SchemaTable extends LitElement {
6060
margin-left: -16px;
6161
color:var(--primary-color);
6262
cursor:pointer;
63-
font-size: 16px;
63+
font-size: calc(var(--font-size-small) + 4px);
6464
font-family: var(--font-mono);
6565
background-clip: border-box;
6666
}
@@ -86,22 +86,25 @@ export default class SchemaTable extends LitElement {
8686
${this.schemaDescriptionExpanded === 'true' ? 'Single line description' : 'Multiline description'}
8787
</div>
8888
</div>
89-
90-
<div style='padding: 5px 0; color:var(--fg3)'>
91-
<span class='bold-text upper'> ${this.data['::type']}</span>
92-
<span class='m-markdown' >${unsafeHTML(marked(this.data['::description'] || ''))}</span>
93-
</div>
94-
<div style = "border:1px solid var(--light-border-color)">
95-
<div style='display:flex; height:18px; background-color: var(--bg2); line-height:18px; padding:8px 2px; border-bottom:1px solid var(--light-border-color);'>
96-
<div class='td key' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg)'> Field</div>
97-
<div class='td key-type' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg)'> Type </div>
98-
<div class='td key-descr' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg)'>Description</div>
99-
</div>
100-
${this.generateTree(
101-
this.data['::type'] === 'array' ? this.data['::props'] : this.data,
102-
this.data['::type'],
103-
)}
104-
</div>
89+
<div style='padding: 5px 0; color:var(--fg3)'>
90+
<span class='bold-text upper'> ${this.data ? this.data['::type'] : ''}</span>
91+
<span class='m-markdown' >${this.data ? unsafeHTML(marked(this.data['::description'] || '')) : ''}</span>
92+
</div>
93+
<div style = "border:1px solid var(--light-border-color)">
94+
<div style='display:flex; height:calc(var(--font-size-small) + 6px); background-color: var(--bg2); line-height:calc(var(--font-size-small) + 6px); padding:8px 2px; border-bottom:1px solid var(--light-border-color);'>
95+
<div class='td key' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg)'> Field</div>
96+
<div class='td key-type' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg)'> Type </div>
97+
<div class='td key-descr' style='font-family:var(--font-regular); font-weight:bold; color:var(--fg)'>Description</div>
98+
</div>
99+
${this.data
100+
? html`
101+
${this.generateTree(
102+
this.data['::type'] === 'array' ? this.data['::props'] : this.data,
103+
this.data['::type'],
104+
)}`
105+
: ''
106+
}
107+
</div>
105108
</div>
106109
`;
107110
}

‎src/components/schema-tree.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,16 @@ export default class SchemaTree extends LitElement {
3030
.tree {
3131
font-size:var(--font-size-small);
3232
text-align: left;
33-
line-height:18px;
33+
line-height:calc(var(--font-size-small) + 6px);
3434
}
3535
.tree .tr:hover{
3636
background-color:var(--hover-color);
3737
}
3838
.collapsed-descr .tr {
39-
max-height:20px;
40-
}
41-
.collapsed-descr .tr {
42-
max-height:20px;
39+
max-height:calc(var(--font-size-small) + 8px);
4340
}
4441
.collapsed-descr .m-markdown-small p {
45-
line-height:18px;
42+
line-height:calc(var(--font-size-small) + 6px);
4643
}
4744
4845
.tree .key {

‎src/rapidoc.js‎

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ export default class RapiDoc extends LitElement {
8484
textColor: { type: String, attribute: 'text-color' },
8585
headerColor: { type: String, attribute: 'header-color' },
8686
primaryColor: { type: String, attribute: 'primary-color' },
87+
fontSize: { type: String, attribute: 'font-size' },
8788
regularFont: { type: String, attribute: 'regular-font' },
8889
monoFont: { type: String, attribute: 'mono-font' },
8990

@@ -120,16 +121,7 @@ export default class RapiDoc extends LitElement {
120121
NavStyles,
121122
css`
122123
:host {
123-
--layout:${unsafeCSS(this.layout || 'row')};
124-
--font-mono:${unsafeCSS(this.monoFont || 'Monaco, "Andale Mono", "Roboto Mono", Consolas, monospace')};
125-
--font-regular:${unsafeCSS(this.regularFont || 'rapidoc, "Open Sans", BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif')};
126-
127-
--font-size-small: 12px;
128-
--font-size-mono: 13px;
129-
--font-size-regular: 14px;
130124
--border-radius: 2px;
131-
--resp-area-height: ${unsafeCSS(this.responseAreaHeight)};
132-
--nav-item-padding: ${unsafeCSS(this.navItemSpacing === 'relaxed' ? '10px' : this.navItemSpacing === 'compact' ? '5px 10px' : '7px 10px')};
133125
134126
display:flex;
135127
flex-direction: column;
@@ -327,7 +319,7 @@ export default class RapiDoc extends LitElement {
327319
328320
@media only screen and (min-width: 1000px) {
329321
.nav-bar {
330-
width: 300px;
322+
width: ${unsafeCSS(this.fontSize === 'default' ? '300px' : this.fontSize === 'large' ? '315px' : '330px')};
331323
display:flex;
332324
}
333325
.section-gap--focused-mode {
@@ -359,6 +351,7 @@ export default class RapiDoc extends LitElement {
359351
if (!this.sortTags || !'true, false,'.includes(`${this.sortTags},`)) { this.sortTags = 'false'; }
360352
if (!this.sortEndpointsBy || !'method, path,'.includes(`${this.sortEndpointsBy},`)) { this.sortEndpointsBy = 'path'; }
361353
if (!this.navItemSpacing || !'compact, relaxed, default,'.includes(`${this.navItemSpacing},`)) { this.navItemSpacing = 'default'; }
354+
if (!this.fontSize || !'default, large, largest,'.includes(`${this.fontSize},`)) { this.fontSize = 'default'; }
362355

363356
if (!this.showInfo || !'true, false,'.includes(`${this.showInfo},`)) { this.showInfo = 'true'; }
364357
if (!this.showComponents || !'true false'.includes(this.showComponents)) { this.showComponents = 'false'; }

‎src/styles/endpoint-styles.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -98,12 +98,12 @@ export default css`
9898
.method{
9999
padding:2px 5px;
100100
vertical-align: middle;
101-
height: 20px;
102-
line-height: 20px;
101+
font-size:var(--font-size-small);
102+
height: calc(var(--font-size-small) + 8px);
103+
line-height: calc(var(--font-size-small) + 8px);
103104
min-width: 48px;
104105
border-radius: 2px;
105106
display:inline-block;
106-
font-size:var(--font-size-small);
107107
text-align: center;
108108
font-weight: bold;
109109
text-transform:uppercase;

‎src/styles/font-styles.js‎

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,29 @@ export default css`
55
background: var(--selection-bg);
66
color: var(--selection-fg);
77
}
8-
.regular-font{ font-family:var(--font-regular); }
9-
.mono-font{ font-family:var(--font-mono); }
10-
.title{ font-size: 30px;font-weight:normal }
8+
.regular-font{
9+
font-family:var(--font-regular);
10+
}
11+
.mono-font {
12+
font-family:var(--font-mono);
13+
}
14+
.title {
15+
font-size: calc(var(--font-size-small) + 18px);
16+
font-weight: normal
17+
}
1118
.sub-title{ font-size: 20px;}
1219
.req-res-title {
13-
font-family:var(--font-regular);
14-
font-size:16px;
20+
font-family: var(--font-regular);
21+
font-size: calc(var(--font-size-small) + 4px);
1522
font-weight:bold;
1623
margin-bottom:8px;
1724
}
18-
19-
.tiny-title { font-size:calc(var(--font-size-small) + 1px); font-weight:bold; }
20-
.regular-font-size { font-size:var(--font-size-regular); }
21-
.small-font-size { font-size:var(--font-size-small); }
25+
.tiny-title {
26+
font-size:calc(var(--font-size-small) + 1px);
27+
font-weight:bold;
28+
}
29+
.regular-font-size { font-size: var(--font-size-regular); }
30+
.small-font-size { font-size: var(--font-size-small); }
2231
.upper { text-transform: uppercase; }
2332
.primary-text{ color: var(--primary-color); }
2433
.bold-text { font-weight:bold; }
@@ -61,26 +70,26 @@ export default css`
6170
}
6271
6372
.m-markdown p,
64-
.m-markdown span{
65-
line-height:22px;
66-
font-size:calc(var(--font-size-regular));
73+
.m-markdown span {
74+
line-height:calc(var(--font-size-regular) + 8px);
75+
font-size: var(--font-size-regular);
6776
}
6877
.m-markdown code span{
69-
font-size:calc(var(--font-size-mono));
78+
font-size:var(--font-size-mono);
7079
}
7180
7281
.m-markdown li{
73-
line-height:22px;
82+
line-height:calc(var(--font-size-regular) + 8px);
7483
font-size:calc(var(--font-size-regular) - 1px);
7584
}
7685
7786
.m-markdown-small p,
7887
.m-markdown-small span,
7988
.m-markdown-small li{
80-
color:var(--light-fg);
81-
font-size:var(--font-size-small);
82-
line-height:18px;
83-
margin-top:0;
89+
color: var(--light-fg);
90+
font-size: var(--font-size-small);
91+
line-height: calc(var(--font-size-small) + 6px);
92+
margin-top: 0;
8493
}
8594
8695
.m-markdown-small p:not(:first-child),
@@ -104,7 +113,7 @@ export default css`
104113
color: var(--inline-code-fg);
105114
background-color: var(--bg3);
106115
font-size: calc(var(--font-size-mono));
107-
line-height: var(--font-mono-line-height);
116+
line-height: 1.2;
108117
}
109118
110119
.m-markdown-small code {
@@ -178,7 +187,7 @@ export default css`
178187
.m-markdown td,
179188
.m-markdown th{
180189
font-size: var(--font-size-small);
181-
line-height: 16px;
190+
line-height: calc(var(--font-size-small) + 4px);
182191
padding: 6px;
183192
vertical-align: top;
184193
}

‎src/styles/input-styles.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ input[type="file"]{
111111
padding:2px;
112112
cursor:pointer;
113113
border: 1px solid var(--primary-color);
114-
min-height: 30px;
114+
min-height: calc(var(--font-size-small) + 18px);
115115
}
116116
input[type="file"]::-webkit-file-upload-button {
117117
font-family: var(--font-regular);
@@ -132,7 +132,7 @@ textarea::-webkit-scrollbar-track{
132132
}
133133
134134
pre::-webkit-scrollbar,
135-
textarea::-webkit-scrollbar{
135+
textarea::-webkit-scrollbar {
136136
width: 8px;
137137
height: 8px;
138138
background-color: transparent;

‎src/styles/nav-styles.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ export default css`
1212
background-repeat: var(--nav-bg-image-repeat, 'no-repeat');
1313
background-blend-mode: multiply;
1414
box-sizing:border-box;
15-
line-height: 16px;
15+
line-height: calc(var(--font-size-small) + 4px);
1616
display:none;
1717
position:relative;
1818
flex-direction:column;

‎src/styles/schema-styles.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,12 +45,12 @@ export default css`
4545
}
4646
4747
.xxx-of-key {
48-
font-size:10px;
48+
font-size: calc(var(--font-size-small) - 2px);
4949
font-weight:bold;
5050
background-color:var(--primary-color);
5151
color:var(--primary-color-invert);
5252
border-radius:2px;
53-
line-height:18px;
53+
line-height:calc(var(--font-size-small) + 6px);
5454
padding:0px 5px;
5555
margin-bottom:1px;
5656
display:inline-block;

0 commit comments

Comments
 (0)