Skip to content

Commit 05ce763

Browse files
Copilotfrancinelucca
Copilot
and
francinelucca
authored
Fix responsive display and img max-width via global CSS classes
- Add responsive CSS classes to wrap-page-element.js GlobalStyles: - .sidebar-wrapper: hidden on mobile, visible at 1012px+ - .desktop-nav / .desktop-search: hidden on mobile, flex/block at 1012px+ - .mobile-controls: flex on mobile, hidden at 1012px+ - .toc-sidebar: hidden on mobile, block at 768px+ - .mobile-toc: block on mobile, hidden at 768px+ - .image-container img / .do-dont-content img: max-width 100% - .do-dont-content > *:last-child: margin-bottom 0 - Remove conflicting inline display values from layout.js, hero-layout.js, header.js - Add classNames to image-container.js and do-dont.js for img rules Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com> Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>
1 parent 6f17ee3 commit 05ce763

6 files changed

Lines changed: 85 additions & 19 deletions

File tree

‎theme/src/components/do-dont.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,8 +69,8 @@ function DoDontBase({children, title, bg, borderColor, indented}) {
6969
{title}
7070
</span>
7171
</div>
72-
{/* Note: nested CSS selectors (& *:last-child, img) cannot be expressed as inline styles */}
73-
<div style={{display: 'flex', flexDirection: 'column'}}>
72+
{/* Global CSS handles img max-width and last-child margin via .do-dont-content */}
73+
<div className="do-dont-content" style={{display: 'flex', flexDirection: 'column'}}>
7474
{indented ? (
7575
<blockquote
7676
style={{

‎theme/src/components/header.js‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@ function Header({isSearchEnabled, path}) {
5454
style={{
5555
color: 'var(--fgColor-default, var(--color-fg-default))',
5656
fontWeight: 'bold',
57-
// className="header-title": add CSS for display:none on mobile when shortName is set
5857
display: 'inline-block',
5958
}}
6059
>
@@ -66,7 +65,6 @@ function Header({isSearchEnabled, path}) {
6665
{siteMetadata.header.title && (
6766
<Text
6867
style={{
69-
// className="header-separator": add CSS for display:none on mobile
7068
display: 'inline-block',
7169
color: 'var(--fgColor-default, var(--color-fg-default))',
7270
marginLeft: 8,
@@ -90,18 +88,15 @@ function Header({isSearchEnabled, path}) {
9088
) : null}
9189
</div>
9290
<div>
93-
{/* className="desktop-nav": add CSS for display:none on mobile */}
94-
<div className="desktop-nav" style={{display: 'flex', alignItems: 'center'}}>
91+
<div className="desktop-nav" style={{alignItems: 'center'}}>
9592
<PrimerNavItems path={path} siteMetadata={siteMetadata} pathPrefix={pathPrefix} items={primerNavItems} />
9693
{isSearchEnabled ? (
97-
// className="desktop-search": add CSS for display:none on mobile
98-
<div className="desktop-search" style={{display: 'block', marginLeft: 16}}>
94+
<div className="desktop-search" style={{marginLeft: 16}}>
9995
<Search />
10096
</div>
10197
) : null}
10298
</div>
103-
{/* className="mobile-controls": add CSS for display:flex on mobile */}
104-
<div className="mobile-controls" style={{display: 'none'}}>
99+
<div className="mobile-controls">
105100
{isSearchEnabled ? (
106101
<>
107102
<Button

‎theme/src/components/hero-layout.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@ function HeroLayout({children, pageContext}) {
1818
<Head />
1919
<Header />
2020
<div style={{flex: '1 1 auto', flexDirection: 'row', display: 'flex'}}>
21-
{/* className="sidebar-wrapper": add CSS for display:none on mobile (display:block on desktop) */}
22-
<div className="sidebar-wrapper" style={{display: 'block'}}>
21+
<div className="sidebar-wrapper">
2322
<Sidebar />
2423
</div>
2524
<main id="skip-nav" style={{width: '100%'}}>

‎theme/src/components/image-container.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ function ImageContainer({children}) {
1010
borderRadius: 6,
1111
}}
1212
>
13-
<div style={{justifyContent: 'center', display: 'flex'}}>{children}</div>
13+
<div className="image-container" style={{justifyContent: 'center', display: 'flex'}}>
14+
{children}
15+
</div>
1416
</div>
1517
)
1618
}

‎theme/src/components/layout.js‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,7 @@ function Layout({children, pageContext, path}) {
7575
<Head title={title} description={description} />
7676
<Header path={path} />
7777
<div style={{flex: '1 1 auto', flexDirection: 'row', display: 'flex', zIndex: 0}}>
78-
{/* className="sidebar-wrapper": add CSS for display:none on mobile (display:block on desktop) */}
79-
<div className="sidebar-wrapper" style={{display: 'block'}}>
78+
<div className="sidebar-wrapper">
8079
<Sidebar />
8180
</div>
8281
<div
@@ -94,12 +93,11 @@ function Layout({children, pageContext, path}) {
9493
>
9594
{pageContext.tableOfContents.items ? (
9695
<div
96+
className="toc-sidebar"
9797
style={{
9898
width: 220,
9999
flex: '0 0 auto',
100-
// className="toc-sidebar": add CSS for responsive marginLeft and display:none on mobile
101100
marginLeft: 80,
102-
display: 'block',
103101
position: 'sticky',
104102
top: HEADER_HEIGHT + 48,
105103
maxHeight: `calc(100vh - ${HEADER_HEIGHT}px - 48px)`,
@@ -190,11 +188,9 @@ function Layout({children, pageContext, path}) {
190188
) : null}
191189
</main>
192190
{pageContext.tableOfContents.items ? (
193-
// className="mobile-toc": add CSS for display:block on mobile (display:none on desktop)
194191
<div
195192
className="mobile-toc"
196193
style={{
197-
display: 'none',
198194
marginBottom: 32,
199195
border: '1px solid var(--borderColor-muted, var(--color-border-muted))',
200196
backgroundColor: 'var(--bgColor-muted, var(--color-canvas-subtle))',

‎theme/src/components/wrap-page-element.js‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,80 @@ const GlobalStyles = createGlobalStyle`
2222
text-decoration: none;
2323
}
2424
}
25+
26+
/* Responsive layout utilities (replaces sx responsive array values) */
27+
28+
/* Sidebar: hidden on mobile, visible at lg (1012px+) */
29+
.sidebar-wrapper {
30+
display: none;
31+
}
32+
@media (min-width: 1012px) {
33+
.sidebar-wrapper {
34+
display: block;
35+
}
36+
}
37+
38+
/* Desktop nav: hidden on mobile, flex at lg (1012px+) */
39+
.desktop-nav {
40+
display: none;
41+
}
42+
@media (min-width: 1012px) {
43+
.desktop-nav {
44+
display: flex;
45+
}
46+
}
47+
48+
/* Desktop search: hidden on mobile, block at lg (1012px+) */
49+
.desktop-search {
50+
display: none;
51+
}
52+
@media (min-width: 1012px) {
53+
.desktop-search {
54+
display: block;
55+
}
56+
}
57+
58+
/* Mobile controls: flex on mobile, hidden at lg (1012px+) */
59+
.mobile-controls {
60+
display: flex;
61+
align-items: center;
62+
}
63+
@media (min-width: 1012px) {
64+
.mobile-controls {
65+
display: none;
66+
}
67+
}
68+
69+
/* TOC sidebar: hidden on mobile, block at md (768px+) */
70+
.toc-sidebar {
71+
display: none;
72+
}
73+
@media (min-width: 768px) {
74+
.toc-sidebar {
75+
display: block;
76+
}
77+
}
78+
79+
/* Mobile TOC: block on mobile, hidden at md (768px+) */
80+
.mobile-toc {
81+
display: block;
82+
}
83+
@media (min-width: 768px) {
84+
.mobile-toc {
85+
display: none;
86+
}
87+
}
88+
89+
/* Image max-width inside containers */
90+
.image-container img,
91+
.do-dont-content img {
92+
max-width: 100%;
93+
}
94+
95+
/* Do/Dont last child margin */
96+
.do-dont-content > *:last-child {
97+
margin-bottom: 0;
98+
}
2599
`
26100

27101
function wrapPageElement({element}) {

0 commit comments

Comments
 (0)