Skip to content

Commit 0c12bef

Browse files
Kapil GowruKapil Gowru
Kapil Gowru
authored and
Kapil Gowru
committed
feat: fixed mobile product swticher
1 parent 9eac7ae commit 0c12bef

File tree

3 files changed

+157
-130
lines changed

3 files changed

+157
-130
lines changed

‎fern/assets/styles.css‎

Lines changed: 104 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -34,116 +34,120 @@
3434
}
3535

3636
/*** START -- PRODUCT SELECTOR STYLING ***/
37-
.fern-product-selector {
38-
transform: translate(-2px, 4px);
39-
}
40-
41-
div:has(> .fern-product-selector-radio-group) {
42-
margin-top: 0.5rem;
43-
}
4437

45-
div:has(> .fern-product-selector-radio-group):before {
46-
content: "Explore the Fern Platform";
47-
font-weight: 500;
48-
margin: 0.5rem 1rem 0 1rem;
49-
}
38+
@media (min-width: 1024px) {
5039

51-
.fern-product-selector-radio-group {
52-
display: grid;
53-
grid-template-columns: repeat(3, 1fr);
54-
gap: 1.5rem;
55-
padding: 1.25rem;
56-
max-height: 232px;
57-
58-
> a {
59-
max-width: 320px;
60-
margin: -0.75rem;
61-
position: relative;
62-
63-
.fern-selection-item{
64-
border-radius: 1rem;
65-
}
40+
.fern-product-selector {
41+
transform: translate(-2px, 4px);
6642
}
6743

68-
> a[href*="home"] {
69-
grid-column: 1;
70-
grid-row: 1;
44+
div:has(> .fern-product-selector-radio-group) {
45+
margin-top: 0.5rem;
7146
}
7247

73-
> a[href*="sdks"] {
74-
grid-column: 2;
75-
grid-row: 1;
48+
div:has(> .fern-product-selector-radio-group):before {
49+
content: "Explore the Fern Platform";
50+
font-weight: 500;
51+
margin: 0.5rem 1rem 0 1rem;
7652
}
7753

78-
> a[href*="docs"] {
79-
grid-column: 1;
80-
grid-row: 2;
81-
}
54+
.fern-product-selector-radio-group {
55+
display: grid;
56+
grid-template-columns: repeat(3, 1fr);
57+
gap: 1.5rem;
58+
padding: 1.25rem;
59+
max-height: 232px;
60+
61+
> a {
62+
max-width: 320px;
63+
margin: -0.75rem;
64+
position: relative;
8265

83-
> a[href*="ask-fern"] {
84-
grid-column: 2;
85-
grid-row: 2;
86-
}
66+
.fern-selection-item{
67+
border-radius: 1rem;
68+
}
69+
}
8770

88-
> a[href*="openapi"]:before {
89-
content: "Supported Specs";
90-
font-weight: 500;
91-
position: absolute;
92-
top: -2rem;
93-
left: 0.5rem;
94-
}
71+
> a[href*="home"] {
72+
grid-column: 1;
73+
grid-row: 1;
74+
}
9575

96-
> a[href*="openapi"] {
97-
grid-column: 3;
98-
grid-row: 1;
76+
> a[href*="sdks"] {
77+
grid-column: 2;
78+
grid-row: 1;
79+
}
9980

100-
.fern-selection-item-icon {
101-
width: 1.5rem;
102-
height: 1.5rem;
81+
> a[href*="docs"] {
82+
grid-column: 1;
83+
grid-row: 2;
10384
}
104-
}
10585

106-
> a[href*="fern-def"] {
107-
grid-column: 3;
108-
grid-row: 2;
109-
transform: translateY(-32px);
110-
111-
.fern-selection-item-icon {
112-
width: 1.5rem;
113-
height: 1.5rem;
86+
> a[href*="ask-fern"] {
87+
grid-column: 2;
88+
grid-row: 2;
11489
}
115-
}
11690

117-
> a[href*="asyncapi"] {
118-
grid-column: 3;
119-
grid-row: 3;
120-
transform: translateY(-64px);
91+
> a[href*="openapi"]:before {
92+
content: "Supported Specs";
93+
font-weight: 500;
94+
position: absolute;
95+
top: -2rem;
96+
left: 0.5rem;
97+
}
98+
99+
> a[href*="openapi"] {
100+
grid-column: 3;
101+
grid-row: 1;
121102

122-
.fern-selection-item-icon {
123-
width: 1.5rem;
124-
height: 1.5rem;
103+
.fern-selection-item-icon {
104+
width: 1.5rem;
105+
height: 1.5rem;
106+
}
125107
}
126-
}
127108

128-
> a[href*="openrpc"] {
129-
grid-column: 3;
130-
grid-row: 4;
131-
transform: translateY(-64px);
109+
> a[href*="fern-def"] {
110+
grid-column: 3;
111+
grid-row: 2;
112+
transform: translateY(-32px);
113+
114+
.fern-selection-item-icon {
115+
width: 1.5rem;
116+
height: 1.5rem;
117+
}
118+
}
132119

133-
.fern-selection-item-icon {
134-
width: 1.5rem;
135-
height: 1.5rem;
120+
> a[href*="asyncapi"] {
121+
grid-column: 3;
122+
grid-row: 3;
123+
transform: translateY(-64px);
124+
125+
.fern-selection-item-icon {
126+
width: 1.5rem;
127+
height: 1.5rem;
128+
}
136129
}
137-
}
138130

139-
> a[href*="grpc"] {
140-
grid-column: 3;
141-
grid-row: 5;
142-
transform: translateY(-64px);
131+
> a[href*="openrpc"] {
132+
grid-column: 3;
133+
grid-row: 4;
134+
transform: translateY(-64px);
143135

144-
.fern-selection-item-icon {
145-
width: 1.5rem;
146-
height: 1.5rem;
136+
.fern-selection-item-icon {
137+
width: 1.5rem;
138+
height: 1.5rem;
139+
}
140+
}
141+
142+
> a[href*="grpc"] {
143+
grid-column: 3;
144+
grid-row: 5;
145+
transform: translateY(-64px);
146+
147+
.fern-selection-item-icon {
148+
width: 1.5rem;
149+
height: 1.5rem;
150+
}
147151
}
148152
}
149153
}
@@ -163,6 +167,7 @@ div:has(> .fern-product-selector-radio-group):before {
163167
:is(.dark) .fern-product-selector-radio-group a[href*="ask-fern"] img {
164168
content: url("https://fern-docs.s3.us-east-2.amazonaws.com/product-switcher/product-switcher-askfern-dark.png") !important;
165169
}
170+
166171
/*** END -- PRODUCT SELECTOR STYLING ***/
167172

168173

@@ -653,17 +658,29 @@ div:has(> .fern-product-selector-radio-group):before {
653658
font-weight: 400 !important;
654659
width: fit-content !important;
655660

661+
img {
662+
transition: transform 0.15s ease-in-out;
663+
transform: translate(0px, 0px);
664+
}
665+
656666
svg {
657667
display: none !important;
658668
}
659669

660670
&.no-hover {
661671
cursor: default;
672+
662673
&:hover {
663674
background: none !important;
664675
color: var(--grayscale-a11) !important;
665676
}
666677
}
678+
679+
&:hover {
680+
img {
681+
transform: translate(2px, 0px);
682+
}
683+
}
667684
}
668685

669686
/* Responsive Design - Mobile First */

‎fern/components/FernStatus.tsx‎

Lines changed: 48 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -128,47 +128,54 @@ export const FernStatusWidget = () => {
128128
};
129129

130130
return (
131-
<div id="fern-status-widget" style={{ display: 'flex', alignItems: 'center' }}>
132-
<div
133-
className={`footer_badge-dot ${status.dotClass}`}
134-
style={{
135-
width: '10px',
136-
height: '10px',
137-
borderRadius: '50%',
138-
marginRight: '8px',
139-
position: 'relative',
140-
display: 'inline-block',
141-
backgroundColor: getBackgroundColor(),
142-
}}
143-
/>
144-
<span id="fern-status-text">{status.statusMessage}</span>
145-
146-
<style jsx>{`
147-
.footer_badge-dot::after {
148-
content: '';
149-
position: absolute;
150-
top: -4px;
151-
left: -4px;
152-
right: -4px;
153-
bottom: -4px;
154-
border-radius: 50%;
155-
background: radial-gradient(circle, transparent 0%, currentColor 70%, currentColor 100%);
156-
opacity: 0.4;
157-
animation: pulse-expand 2s infinite ease-out;
158-
}
131+
<a
132+
href="https://status.buildwithfern.com"
133+
target="_blank"
134+
rel="noopener noreferrer"
135+
style={{ textDecoration: 'none', color: 'inherit' }}
136+
>
137+
<div id="fern-status-widget" style={{ display: 'flex', alignItems: 'center', cursor: 'pointer' }}>
138+
<div
139+
className={`footer_badge-dot ${status.dotClass}`}
140+
style={{
141+
width: '10px',
142+
height: '10px',
143+
borderRadius: '50%',
144+
marginRight: '8px',
145+
position: 'relative',
146+
display: 'inline-block',
147+
backgroundColor: getBackgroundColor(),
148+
}}
149+
/>
150+
<span id="fern-status-text">{status.statusMessage}</span>
159151

160-
.footer_badge-dot.is-green::after { color: #00c853; }
161-
.footer_badge-dot.is-red::after { color: #f44336; }
162-
.footer_badge-dot.is-orange::after { color: #ff9800; }
163-
.footer_badge-dot.is-blue::after { color: #2196f3; }
164-
.footer_badge-dot.is-yellow::after { color: #ffc107; }
165-
.footer_badge-dot.is-loading::after { color: #cccccc; }
166-
167-
@keyframes pulse-expand {
168-
0% { transform: scale(0.6); opacity: 0.5; }
169-
100% { transform: scale(1.5); opacity: 0; }
170-
}
171-
`}</style>
172-
</div>
152+
<style jsx>{`
153+
.footer_badge-dot::after {
154+
content: '';
155+
position: absolute;
156+
top: -4px;
157+
left: -4px;
158+
right: -4px;
159+
bottom: -4px;
160+
border-radius: 50%;
161+
background: radial-gradient(circle, transparent 0%, currentColor 70%, currentColor 100%);
162+
opacity: 0.4;
163+
animation: pulse-expand 2s infinite ease-out;
164+
}
165+
166+
.footer_badge-dot.is-green::after { color: #00c853; }
167+
.footer_badge-dot.is-red::after { color: #f44336; }
168+
.footer_badge-dot.is-orange::after { color: #ff9800; }
169+
.footer_badge-dot.is-blue::after { color: #2196f3; }
170+
.footer_badge-dot.is-yellow::after { color: #ffc107; }
171+
.footer_badge-dot.is-loading::after { color: #cccccc; }
172+
173+
@keyframes pulse-expand {
174+
0% { transform: scale(0.6); opacity: 0.5; }
175+
100% { transform: scale(1.5); opacity: 0; }
176+
}
177+
`}</style>
178+
</div>
179+
</a>
173180
);
174181
};

‎fern/products/home/pages/welcome.mdx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ hide-toc: true
66
layout: custom
77
---
88

9+
import { FernStatusWidget } from "../../../components/FernStatus";
10+
911
<style>
1012
{`
1113
#builtwithfern {
@@ -325,10 +327,11 @@ layout: custom
325327
</a>
326328

327329
<div className="footer-status">
328-
<a className="status-badge" href="https://status.buildwithfern.com">
330+
{/* <a className="status-badge" href="https://status.buildwithfern.com">
329331
<div className="status-indicator"></div>
330332
<span className="status-text">All systems operational</span>
331-
</a>
333+
</a> */}
334+
<FernStatusWidget />
332335

333336
<a className="soc2-badge" href="https://security.buildwithfern.com/">
334337
<img src="./images/soc2.svg" alt="Soc 2 Type II" className="soc2-badge-img" noZoom />

0 commit comments

Comments
 (0)