Skip to content

Commit 7f09858

Browse files
authored
fix(www): Make API Pages Responsive (#4885)
Closes #4816
1 parent 543f1a8 commit 7f09858

File tree

3 files changed

+26
-1
lines changed

3 files changed

+26
-1
lines changed

projects/www/src/app/components/docs/symbol-header.component.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,9 @@ import { DeprecatedChipComponent } from './deprecated-chip.component';
2828
align-items: center;
2929
padding: 16px;
3030
gap: 16px;
31+
@media only screen and (max-width: 600px) {
32+
grid-template-columns: 1fr;
33+
}
3134
}
3235
3336
h3 {

projects/www/src/app/components/docs/symbol.component.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,26 @@ import { SymbolUsageNotesComponent } from './symbol-usage-notes.component';
4444
max-width: 960px;
4545
margin: 0 auto;
4646
padding: 54px 0 24px;
47+
@media only screen and (max-width: 1280px) {
48+
padding: 90px 30px 24px;
49+
max-width: 100%;
50+
}
4751
}
4852
4953
.header {
5054
display: flex;
5155
align-items: center;
5256
justify-content: space-between;
57+
@media only screen and (max-width: 600px) {
58+
flex-wrap: wrap;
59+
}
5360
}
5461
5562
h1 {
5663
margin: 0;
64+
@media only screen and (max-width: 600px) {
65+
margin-bottom: 10px;
66+
}
5767
}
5868
5969
.symbol-call-signature {

projects/www/src/app/pages/api/index.page.ts

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,9 @@ import { MinimizedApiMemberSummary } from '@ngrx-io/shared';
4848
:host {
4949
display: block;
5050
padding: 0 24px 24px;
51+
@media only screen and (max-width: 1280px) {
52+
padding-top: 62px;
53+
}
5154
}
5255
5356
.controls {
@@ -60,8 +63,11 @@ import { MinimizedApiMemberSummary } from '@ngrx-io/shared';
6063
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
6164
position: sticky;
6265
top: 0;
63-
z-index: 10;
66+
z-index: 1;
6467
background-color: #17111a;
68+
@media only screen and (max-width: 1280px) {
69+
top: 62px;
70+
}
6571
}
6672
6773
h3 {
@@ -100,6 +106,12 @@ import { MinimizedApiMemberSummary } from '@ngrx-io/shared';
100106
grid-template-columns: repeat(3, 1fr);
101107
gap: 16px;
102108
border-left: 1px solid rgba(255, 255, 255, 0.12);
109+
@media only screen and (max-width: 1280px) {
110+
grid-template-columns: repeat(2, 1fr);
111+
}
112+
@media only screen and (max-width: 700px) {
113+
grid-template-columns: 1fr;
114+
}
103115
}
104116
`,
105117
],

0 commit comments

Comments
 (0)