Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 70df0d2

Browse files
Merge pull request zoltantothcom#76 from zoltantothcom/dev
Fix toggle buttons on mobile screens
2 parents 5885552 + 84df318 commit 70df0d2

File tree

4 files changed

+79
-7
lines changed

4 files changed

+79
-7
lines changed

‎__tests__/components/__snapshots__/Header.test.js.snap

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ exports[`<Header /> component renders with DARK theme 1`] = `
77
border-radius: 50%;
88
cursor: pointer;
99
height: 2.5rem;
10-
margin: 00 0 1rem;
10+
margin: 0.5rem 1.5rem 0 0;
1111
outline: 0;
1212
width: 2.5rem;
13+
z-index: 10;
1314
}
1415
1516
.c5 svg,
@@ -89,6 +90,8 @@ exports[`<Header /> component renders with DARK theme 1`] = `
8990
display: -webkit-inline-flex;
9091
display: -ms-inline-flexbox;
9192
display: inline-flex;
93+
margin: 1rem 0;
94+
width: 100%;
9295
}
9396
9497
.c3 {
@@ -125,6 +128,12 @@ exports[`<Header /> component renders with DARK theme 1`] = `
125128
color: #FFFFFF;
126129
}
127130
131+
@media (min-width:769px) {
132+
.c5 {
133+
margin: 0 0 0 1.5rem;
134+
}
135+
}
136+
128137
@media (min-width:769px) {
129138
.c0 {
130139
-webkit-box-pack: justify;
@@ -134,6 +143,13 @@ exports[`<Header /> component renders with DARK theme 1`] = `
134143
}
135144
}
136145
146+
@media (min-width:541px) {
147+
.c4 {
148+
margin: 0;
149+
width: auto;
150+
}
151+
}
152+
137153
<div>
138154
<header
139155
className="c0"
@@ -240,9 +256,10 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
240256
border-radius: 50%;
241257
cursor: pointer;
242258
height: 2.5rem;
243-
margin: 00 0 1rem;
259+
margin: 0.5rem 1.5rem 0 0;
244260
outline: 0;
245261
width: 2.5rem;
262+
z-index: 10;
246263
}
247264
248265
.c5 svg,
@@ -322,6 +339,8 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
322339
display: -webkit-inline-flex;
323340
display: -ms-inline-flexbox;
324341
display: inline-flex;
342+
margin: 1rem 0;
343+
width: 100%;
325344
}
326345
327346
.c3 {
@@ -358,6 +377,12 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
358377
color: #EDB8ED;
359378
}
360379
380+
@media (min-width:769px) {
381+
.c5 {
382+
margin: 0 0 0 1.5rem;
383+
}
384+
}
385+
361386
@media (min-width:769px) {
362387
.c0 {
363388
-webkit-box-pack: justify;
@@ -367,6 +392,13 @@ exports[`<Header /> component renders with LIGHT theme 1`] = `
367392
}
368393
}
369394
395+
@media (min-width:541px) {
396+
.c4 {
397+
margin: 0;
398+
width: auto;
399+
}
400+
}
401+
370402
<div>
371403
<header
372404
className="c0"

‎__tests__/components/__snapshots__/Toggle.test.js.snap

Lines changed: 32 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ exports[`<Toggle /> renders JS toggle in DARK more 1`] = `
77
border-radius: 50%;
88
cursor: pointer;
99
height: 2.5rem;
10-
margin: 00 0 1rem;
10+
margin: 0.5rem 1.5rem 0 0;
1111
outline: 0;
1212
width: 2.5rem;
13+
z-index: 10;
1314
}
1415
1516
.c0 svg,
@@ -36,6 +37,12 @@ exports[`<Toggle /> renders JS toggle in DARK more 1`] = `
3637
fill: #F2E8F2;
3738
}
3839
40+
@media (min-width:769px) {
41+
.c0 {
42+
margin: 0 0 0 1.5rem;
43+
}
44+
}
45+
3946
<div>
4047
<button
4148
className="c0"
@@ -74,9 +81,10 @@ exports[`<Toggle /> renders JS toggle in LIGHT more 1`] = `
7481
border-radius: 50%;
7582
cursor: pointer;
7683
height: 2.5rem;
77-
margin: 00 0 1rem;
84+
margin: 0.5rem 1.5rem 0 0;
7885
outline: 0;
7986
width: 2.5rem;
87+
z-index: 10;
8088
}
8189
8290
.c0 svg,
@@ -103,6 +111,12 @@ exports[`<Toggle /> renders JS toggle in LIGHT more 1`] = `
103111
fill: #F2E8F2;
104112
}
105113
114+
@media (min-width:769px) {
115+
.c0 {
116+
margin: 0 0 0 1.5rem;
117+
}
118+
}
119+
106120
<div>
107121
<button
108122
className="c0"
@@ -141,9 +155,10 @@ exports[`<Toggle /> renders the MODE toggle in DARK mode 1`] = `
141155
border-radius: 50%;
142156
cursor: pointer;
143157
height: 2.5rem;
144-
margin: 00 0 1rem;
158+
margin: 0.5rem 1.5rem 0 0;
145159
outline: 0;
146160
width: 2.5rem;
161+
z-index: 10;
147162
}
148163
149164
.c0 svg,
@@ -170,6 +185,12 @@ exports[`<Toggle /> renders the MODE toggle in DARK mode 1`] = `
170185
fill: #F2E8F2;
171186
}
172187
188+
@media (min-width:769px) {
189+
.c0 {
190+
margin: 0 0 0 1.5rem;
191+
}
192+
}
193+
173194
<div>
174195
<button
175196
className="c0"
@@ -202,9 +223,10 @@ exports[`<Toggle /> renders the MODE toggle in LIGHT mode 1`] = `
202223
border-radius: 50%;
203224
cursor: pointer;
204225
height: 2.5rem;
205-
margin: 00 0 1rem;
226+
margin: 0.5rem 1.5rem 0 0;
206227
outline: 0;
207228
width: 2.5rem;
229+
z-index: 10;
208230
}
209231
210232
.c0 svg,
@@ -231,6 +253,12 @@ exports[`<Toggle /> renders the MODE toggle in LIGHT mode 1`] = `
231253
fill: #F2E8F2;
232254
}
233255
256+
@media (min-width:769px) {
257+
.c0 {
258+
margin: 0 0 0 1.5rem;
259+
}
260+
}
261+
234262
<div>
235263
<button
236264
className="c0"

‎src/components/Header.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@ const StyledLinkContainer = styled.div`
2323

2424
const StyledSettingsContainer = styled.div`
2525
display: inline-flex;
26+
margin: 1rem 0;
27+
width: 100%;
28+
29+
@media (min-width: 541px) {
30+
margin: 0;
31+
width: auto;
32+
}
2633
`;
2734

2835
const linkStyle = css`

‎src/components/Toggle.jsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,14 @@ const StyledToggle = styled.button`
1212
border-radius: 50%;
1313
cursor: pointer;
1414
height: 2.5rem;
15-
margin: 0 0 0 1rem;
15+
margin: 0.5rem 1.5rem 0 0;
1616
outline: 0;
1717
width: 2.5rem;
18+
z-index: 10;
19+
20+
@media (min-width: 769px) {
21+
margin: 0 0 0 1.5rem;
22+
}
1823
1924
& svg,
2025
& g {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /