Skip to content

Commit 9e1a1ca

Browse files
JamesSwintonJamesSwinton
committed
Display sponsor ad on small / mobile screens
1 parent 3b7253b commit 9e1a1ca

File tree

3 files changed

+211
-64
lines changed

3 files changed

+211
-64
lines changed

‎src/components/Site/Site.scss‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,18 @@
1414
flex: 1 1 auto;
1515
position: relative;
1616
display: flex;
17-
margin-top: 110px;
17+
18+
@media (min-width: 1525px) {
19+
margin-top: 110px;
20+
}
21+
22+
@media (max-width: 1524px) {
23+
margin-top: 350px;
24+
}
25+
26+
@media (max-width: 641px) {
27+
margin-top: 350px;
28+
}
1829

1930
@media print {
2031
margin-top: 0px;

‎src/components/Sponsors/Sponsors.jsx‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,27 @@ const Sponsors = () => {
88
return (
99
<div className="sponsors">
1010
<div className="sponsors__content">
11-
<div className="sponsors__link-wrapper">
12-
<Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
13-
<img
14-
className="agGridLogo"
15-
src={AGLogo}
16-
alt="ag grid"
17-
width={220}
18-
loading="lazy"
19-
/>
20-
</Link>
21-
</div>
22-
<div className="sponsors__link-wrapper">
23-
<Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
24-
<img
25-
className="agChartsLogo"
26-
src={AGChartsLogo}
27-
alt="ag charts"
28-
width={220}
29-
loading="lazy"
30-
/>
31-
</Link>
11+
<div className="sponsors__buttons__wrapper">
12+
<div className="sponsors__link-wrapper">
13+
<Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
14+
<img
15+
className="agGridLogo"
16+
src={AGLogo}
17+
alt="ag grid"
18+
loading="lazy"
19+
/>
20+
</Link>
21+
</div>
22+
<div className="sponsors__link-wrapper">
23+
<Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
24+
<img
25+
className="agChartsLogo"
26+
src={AGChartsLogo}
27+
alt="ag charts"
28+
loading="lazy"
29+
/>
30+
</Link>
31+
</div>
3232
</div>
3333
<div className="sponsors__link-wrapper-2">
3434
<Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">

‎src/components/Sponsors/Sponsors.scss‎

Lines changed: 178 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ $link-wrapper-radius: 8px;
1010
$link-wrapper-margin: 8px;
1111
$tagline-font-size: 2em;
1212
$footer-font-size: 1.7em;
13+
$tagline-font-size-mobile: 1.4em;
14+
$footer-font-size-mobile: 1.2em;
1315

1416
[data-theme='dark'] {
1517
.agGridLogo {
@@ -48,57 +50,191 @@ $footer-font-size: 1.7em;
4850
}
4951
}
5052

51-
.sponsors {
52-
position: absolute;
53-
height: 100%;
54-
width: 250px;
55-
margin-left: -250px;
56-
margin-right: 8px;
57-
58-
&__link-wrapper {
59-
box-shadow: $link-wrapper-shadow;
60-
border-radius: $link-wrapper-radius;
61-
margin: $link-wrapper-margin;
62-
transition: transform 0.2s;
63-
&:hover {
64-
background-color: getColor(concrete);
65-
transform: scale(1.05);
66-
}
53+
@media (max-width: 642px) {
54+
.agGridLogo {
55+
height: 50px;
6756
}
68-
&__tagline,
69-
&__footer {
70-
margin: 1rem 0;
71-
text-align: center;
72-
color: $sponsor-text-color-light;
57+
58+
.agChartsLogo {
59+
height: 50px;
7360
}
74-
&__tagline {
75-
font-size: $tagline-font-size;
61+
62+
.sponsors {
63+
position: absolute;
64+
height: auto;
65+
width: 100%;
66+
margin-top: -275px;
67+
68+
&__link-wrapper {
69+
box-shadow: $link-wrapper-shadow;
70+
border-radius: $link-wrapper-radius;
71+
margin: $link-wrapper-margin;
72+
transition: transform 0.2s;
73+
&:hover {
74+
background-color: getColor(concrete);
75+
transform: scale(1.05);
76+
}
77+
}
78+
&__tagline,
79+
&__footer {
80+
margin: 1rem 0;
81+
text-align: center;
82+
color: $sponsor-text-color-light;
83+
}
84+
&__tagline {
85+
font-size: $tagline-font-size-mobile;
86+
}
87+
&__footer {
88+
font-size: $footer-font-size-mobile;
89+
font-style: italic;
90+
}
91+
&__content {
92+
position: sticky;
93+
display: flex;
94+
margin: 1.5em 0;
95+
top: 6em;
96+
padding-bottom: 16px;
97+
flex-wrap: wrap;
98+
justify-content: center;
99+
align-items: flex-start;
100+
overflow: hidden;
101+
transition: background-color 250ms;
102+
}
103+
&__img {
104+
&__wrapper {
105+
display: none;
106+
}
107+
}
108+
}
109+
}
110+
111+
@media (min-width: 642px) and (max-width: 1524px) {
112+
.agGridLogo {
113+
height: 50px;
76114
}
77-
&__footer {
78-
font-size: $footer-font-size;
79-
font-style: italic;
115+
116+
.agChartsLogo {
117+
height: 50px;
80118
}
81-
&__content {
82-
position: sticky;
83-
display: none;
84-
margin: 1.5em 0;
85-
top: 6em;
86-
padding: 0 1.5em 3em;
87-
flex-wrap: wrap;
88-
justify-content: center;
89-
align-items: flex-start;
90-
border-right: 2px solid getColor(concrete);
91-
overflow: hidden;
92-
transition: background-color 250ms;
93-
@include break(xlarge) {
119+
120+
.sponsors {
121+
position: absolute;
122+
height: auto;
123+
width: 100%;
124+
margin-top: -240px;
125+
126+
&__buttons__wrapper {
94127
display: flex;
128+
width: 100%;
129+
flex-direction: row;
130+
justify-content: center;
131+
}
132+
&__link-wrapper {
133+
box-shadow: $link-wrapper-shadow;
134+
border-radius: $link-wrapper-radius;
135+
margin: $link-wrapper-margin;
136+
transition: transform 0.2s;
137+
&:hover {
138+
background-color: getColor(concrete);
139+
transform: scale(1.05);
140+
}
95141
}
142+
&__tagline,
143+
&__footer {
144+
margin: 1rem 0;
145+
text-align: center;
146+
color: $sponsor-text-color-light;
147+
}
148+
&__tagline {
149+
font-size: $tagline-font-size-mobile;
150+
}
151+
&__footer {
152+
font-size: $footer-font-size-mobile;
153+
font-style: italic;
154+
}
155+
&__content {
156+
position: sticky;
157+
display: flex;
158+
flex-direction: column;
159+
margin: 1.5em 0;
160+
top: 6em;
161+
flex-wrap: wrap;
162+
justify-content: center;
163+
align-items: center;
164+
border-bottom: 2px solid getColor(concrete);
165+
overflow: hidden;
166+
transition: background-color 250ms;
167+
padding-bottom: 32px;
168+
}
169+
&__img {
170+
background: red !important;
171+
&__wrapper {
172+
display: none;
173+
}
174+
}
175+
}
176+
}
177+
178+
@media (min-width: 1525px) {
179+
.agGridLogo {
180+
max-width: 220px;
181+
height: auto;
182+
}
183+
184+
.agChartsLogo {
185+
max-width: 220px;
186+
height: auto;
96187
}
97-
&__img {
98-
&__wrapper {
188+
189+
.sponsors {
190+
position: absolute;
191+
height: 100%;
192+
width: 250px;
193+
margin-left: -250px;
194+
margin-right: 8px;
195+
196+
&__link-wrapper {
197+
box-shadow: $link-wrapper-shadow;
198+
border-radius: $link-wrapper-radius;
199+
margin: $link-wrapper-margin;
200+
transition: transform 0.2s;
201+
&:hover {
202+
background-color: getColor(concrete);
203+
transform: scale(1.05);
204+
}
205+
}
206+
&__tagline,
207+
&__footer {
208+
margin: 1rem 0;
209+
text-align: center;
210+
color: $sponsor-text-color-light;
211+
}
212+
&__tagline {
213+
font-size: $tagline-font-size;
214+
}
215+
&__footer {
216+
font-size: $footer-font-size;
217+
font-style: italic;
218+
}
219+
&__content {
220+
position: sticky;
99221
display: flex;
222+
margin: 1.5em 0;
223+
top: 6em;
224+
padding: 0 1.5em 3em;
225+
flex-wrap: wrap;
100226
justify-content: center;
101-
width: 100%;
227+
align-items: flex-start;
228+
border-right: 2px solid getColor(concrete);
229+
overflow: hidden;
230+
transition: background-color 250ms;
231+
}
232+
&__img {
233+
&__wrapper {
234+
display: flex;
235+
justify-content: center;
236+
width: 100%;
237+
}
102238
}
103239
}
104240
}

0 commit comments

Comments
 (0)