Skip to content

Commit 454fe80

Browse files
davidfischerdavidfischer
committed
Add ad styles from client
- Text max length and image sizing works as long as the large format ad type is the only allowed ad type for this campaign.
1 parent c144742 commit 454fe80

File tree

2 files changed

+231
-63
lines changed

2 files changed

+231
-63
lines changed

‎assets/src/scss/_theme.scss‎

Lines changed: 226 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -32,91 +32,259 @@ body {
3232
}
3333

3434

35-
/* Preview an advertisement - most of this custom CSS comes from Read the Docs' existing ad settings */
35+
/* Preview an advertisement - most of this custom CSS comes directly from the ad client */
3636
.advertisement-preview {
37-
.ethical-callout {
38-
padding-top: 1em;
39-
clear: both;
37+
--ea-container-md: 720px;
38+
--ea-container-lg: 960px;
39+
--ea-container-xl: 1040px;
40+
41+
--ea-image-width: 120px; // Height is "auto"
42+
--ea-image-width-xs: 44px;
43+
44+
--ea-image-placement-width: 180px;
45+
--ea-image-placement-width-horizontal: 320px;
46+
--ea-image-logo-width: 80px;
47+
--ea-fixedheader-height: 50px;
48+
49+
--ea-font-size: 14px;
50+
--ea-font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
51+
Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
52+
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
53+
54+
// Backgrounds for image or text-only ads
55+
--ea-bgcolor: rgba(0, 0, 0, 0.03);
56+
--ea-bgcolor-dark: rgba(255, 255, 255, 0.05);
57+
58+
// Header size for large text-only ad
59+
--ea-font-size-text-only-header: 18px;
60+
61+
// Background colors for ad styles (stickybox, fixedheader, fixedfooter)
62+
--ea-stylefixed-bgcolor: rgb(220, 220, 220);
63+
--ea-stylefixed-bgcolor-dark: rgb(80, 80, 80);
64+
65+
// Text colors for various elements and states
66+
--ea-color-link: rgb(80, 80, 80);
67+
--ea-color-link-dark: rgb(220, 220, 220);
68+
69+
--ea-color-link-active: darken(rgb(80, 80, 80), 10%);
70+
--ea-color-link-dark-active: lighten(rgb(220, 220, 220), 10%);
71+
72+
--ea-color-link-callout: lighten(rgb(80, 80, 80), 10%);
73+
--ea-color-link-callout-dark: darken(rgb(220, 220, 220), 10%);
74+
75+
--ea-color-link-callout-active: darken(rgb(80, 80, 80), 10%);
76+
--ea-color-link-callout-dark-active: lighten(
77+
rgb(220, 220, 220),
78+
10%
79+
);
80+
81+
--ea-color-link-bold: #088cdb;
82+
--ea-color-link-bold-dark: lighten(#088cdb, 20%);
83+
84+
--ea-color-domain: lighten(rgb(80, 80, 80), 20%);
85+
--ea-color-domain-dark: darken(rgb(220, 220, 220), 20%);
86+
87+
// Filter to apply on the large text-only logo
88+
--ea-image-logo-filter: grayscale(1);
89+
--ea-image-logo-filter-dark: grayscale(1) invert(1);
90+
91+
92+
font-size: var(--ea-font-size);
93+
font-family: var(--ea-font-family);
94+
font-weight: normal;
95+
font-style: normal;
96+
letter-spacing: 0px;
97+
vertical-align: baseline;
98+
line-height: 1.3em;
99+
100+
a {
101+
text-decoration: none;
40102
}
41103

42-
.ethical-pixel {
43-
display: none !important;
104+
.ea-pixel {
105+
display: none;
44106
}
45107

46-
.ethical-image-link {
47-
border: 0;
108+
.ea-content {
109+
margin: 1em 1em 0.5em 1em;
110+
padding: 1em;
111+
112+
background: var(--ea-bgcolor);
113+
color: var(--ea-color-link);
114+
115+
color: var(--ea-color-link);
116+
a {
117+
&:link {
118+
color: var(--ea-color-link);
119+
}
120+
&:visited {
121+
color: var(--ea-color-link);
122+
}
123+
&:hover {
124+
color: var(--ea-color-link-active);
125+
}
126+
&:active {
127+
color: var(--ea-color-link-active);
128+
}
129+
strong,
130+
b {
131+
color: var(--ea-color-link-bold);
132+
}
133+
}
48134
}
135+
.ea-callout {
136+
color: var(--ea-color-link-callout);
137+
a {
138+
font-size: 0.8em;
49139

50-
.ethical-close {
51-
display: none !important;
140+
&:link {
141+
color: var(--ea-color-link-callout);
142+
}
143+
&:visited {
144+
color: var(--ea-color-link-callout);
145+
}
146+
&:hover {
147+
color: var(--ea-color-link-callout-active);
148+
}
149+
&:active {
150+
color: var(--ea-color-link-callout-active);
151+
}
152+
strong,
153+
b {
154+
color: var(--ea-color-link-callout);
155+
}
156+
}
52157
}
53158

54-
& img {
55-
width: 120px;
56-
height: 90px;
57-
display: inline-block;
159+
.ea-domain {
160+
margin-top: 0.75em;
161+
font-size: 0.8em;
162+
text-align: center;
163+
color: var(--ea-color-domain);
58164
}
59165

60-
.ethical-sidebar,
61-
.ethical-footer {
62-
padding: 0.5em;
63-
margin: 1em 0;
64166

65-
background-color: #eee;
66-
border: 1px solid #ccc;
67-
border-radius: 5px;
68-
color: #0a0a0a;
69-
font-size: 14px;
70-
line-height: 20px;
167+
// Image+text format
168+
.ea-type-image {
169+
display: inline-block;
170+
171+
.ea-content {
172+
max-width: var(--ea-image-placement-width);
173+
overflow: auto;
71174

72-
.ethical-callout {
73175
text-align: center;
176+
177+
> a > img {
178+
width: var(--ea-image-width);
179+
height: auto;
180+
display: inline-block;
181+
}
182+
183+
> .ea-text {
184+
margin-top: 1em;
185+
font-size: 1em;
186+
text-align: center;
187+
}
188+
}
189+
190+
.ea-callout {
191+
max-width: var(--ea-image-placement-width);
192+
margin: 0em 1em 1em 1em;
193+
padding-left: 1em;
194+
padding-right: 1em;
195+
font-style: italic;
196+
text-align: right;
74197
}
75198

76-
.ethical-text {
77-
margin-top: 1em;
199+
&.horizontal {
200+
.ea-content {
201+
max-width: var(--ea-image-placement-width-horizontal);
202+
203+
> a > img {
204+
float: left;
205+
margin-right: 1em;
206+
}
207+
208+
.ea-text {
209+
margin-top: 0em;
210+
text-align: left;
211+
overflow: auto;
212+
}
213+
}
214+
215+
.ea-callout {
216+
max-width: var(--ea-image-placement-width-horizontal);
217+
text-align: right;
218+
}
78219
}
79220
}
80221

81-
.ethical-sidebar {
82-
text-align: center;
83-
max-width: 300px;
222+
// Text-only format
223+
.ea-type-text {
224+
font-size: var(--ea-font-size);
225+
226+
.ea-content {
227+
text-align: left;
228+
}
229+
230+
.ea-callout {
231+
margin: 0.5em 1em 1em 1em;
232+
padding-left: 1em;
233+
padding-right: 1em;
234+
text-align: right;
235+
font-style: italic;
236+
}
84237
}
85-
.ethical-footer {
86-
text-align: left;
87238

88-
& img {
239+
// Large text+logo format
240+
.ea-type-text-large {
241+
font-size: var(--ea-font-size);
242+
margin: 1em 0;
243+
244+
.ea-logo {
89245
float: right;
90-
margin-left: 25px;
246+
margin-left: 1em;
247+
margin-bottom: 1em;
91248
}
92-
}
93249

94-
.ethical-fixedfooter {
95-
background-color: #eee;
96-
padding: 0.5em 1.5em;
97-
text-align: center;
98-
color: #404040;
99-
width: 100%;
100-
101-
.ethical-text:before {
102-
margin-right: 4px;
103-
padding: 2px 6px;
104-
border-radius: 3px;
105-
background-color: #4caf50;
106-
color: #fff;
107-
content: "Sponsored";
250+
img {
251+
width: var(--ea-image-logo-width);
252+
height: auto;
253+
filter: var(--ea-image-logo-filter);
108254
}
109-
.ethical-callout {
110-
color: #999;
111-
padding-left: 6px;
112-
white-space: nowrap;
255+
256+
.ea-headline {
257+
font-size: var(--ea-font-size-text-only-header);
258+
font-weight: bold;
259+
margin-bottom: 0.5em;
260+
text-align: left;
261+
}
262+
263+
.ea-body {
264+
margin-bottom: 0.5em;
265+
text-align: left;
266+
}
267+
268+
.ea-cta {
269+
border-radius: 0.5em;
270+
border: 1px solid var(--ea-color-link);
271+
color: var(--ea-color-link);
272+
display: inline-block;
273+
font-weight: bold;
274+
padding: 0.25em 0.5em;
275+
}
276+
.ea-cta::after {
277+
content: " ↗";
113278
}
114-
}
115279

116-
a, a:visited, a:hover, a:active {
117-
color: #0a0a0a;
118-
text-decoration: none !important;
119-
border-bottom: 0 !important;
280+
.ea-callout {
281+
margin: 0.5em 1em 1em 1em;
282+
padding-left: 1em;
283+
padding-right: 1em;
284+
text-align: right;
285+
font-style: italic;
286+
}
120287
}
288+
121289
}
122290
}

‎assets/src/views/advertisement-form.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const ko = require('knockout');
44

55

66
function AdvertisementFormViewModel(method) {
7-
const MAX_PREVIEW_LENGTH = 100;
7+
const DEFAULT_MAX_PREVIEW_LENGTH = 100;
88
const SENSIBLE_MAXIMUM_LENGTH = 1000;
99

1010
const viewmodel = this;
@@ -22,13 +22,13 @@ function AdvertisementFormViewModel(method) {
2222
this.image_height = ko.observable();
2323

2424
this.getHeadlinePreview = function () {
25-
return (this.headline() || "").slice(0, MAX_PREVIEW_LENGTH) + " ";
25+
return (this.headline() || "").slice(0, this.maxLength()) + " ";
2626
};
2727
this.getBodyPreview = function () {
28-
return (this.content() || "").slice(0, MAX_PREVIEW_LENGTH);
28+
return (this.content() || "").slice(0, this.maxLength());
2929
};
3030
this.getCTAPreview = function () {
31-
return " " + (this.cta() || "").slice(0, MAX_PREVIEW_LENGTH);
31+
return " " + (this.cta() || "").slice(0, this.maxLength());
3232
};
3333

3434
this.totalLength = function () {
@@ -47,7 +47,7 @@ function AdvertisementFormViewModel(method) {
4747

4848
// Use a sensible default if nothing present
4949
if(isNaN(max_length) || max_length <= 0 || max_length > SENSIBLE_MAXIMUM_LENGTH) {
50-
max_length = MAX_PREVIEW_LENGTH;
50+
max_length = DEFAULT_MAX_PREVIEW_LENGTH;
5151
}
5252

5353
return max_length;

0 commit comments

Comments
 (0)