Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 3dd75c8

Browse files
nicodevsnicodevs
committedSep 30, 2022
Update Free Weekend Vue School banner
1 parent a413114 commit 3dd75c8

File tree

4 files changed

+274
-137
lines changed

4 files changed

+274
-137
lines changed
 

‎themes/vue/_config.yml

Lines changed: 29 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ root_domain: vuejs.org
44
vue_version: 2.7.8
55
# START SPONSORS
66
special:
7-
- name: uni-app
8-
url: https://uniapp.dcloud.io/?hmsr=vueen&hmpl=&hmcu=&hmkw=&hmci=
9-
img: uni_app.png?v2
10-
description: Cross-Platform for Vue
7+
- name: appwrite
8+
url: https://appwrite.io
9+
img: appwrite.svg
10+
description: Open Source Firebase Alternative
1111
platinum:
1212
- name: VueMastery
1313
url: https://www.vuemastery.com/
@@ -32,9 +32,6 @@ platinum:
3232
- name: Nuxt
3333
url: https://nuxtjs.org/
3434
img: nuxt.png
35-
- name: Refurbed
36-
url: https://www.refurbed.org/?utm_source=vuejs
37-
img: refurbed.png
3835
- name: ButterCMS
3936
url: >-
4037
https://buttercms.com/vuejs-cms/?utm_source=vuejs.org&utm_medium=banner&utm_campaign=sponsorship
@@ -45,17 +42,13 @@ platinum:
4542
- name: CodeDict
4643
url: https://code-dict.com
4744
img: codedict.svg
48-
- name: vuejs.de Conf
45+
- name: Chrome Frameworks Fund
46+
url: https://opencollective.com/2021-frameworks-fund
47+
img: chrome_frameworks_fund.png
48+
- name: Marker.io
4949
url: >-
50-
https://conf.vuejs.de/?utm_source=vuejs-vite&utm_medium=referral&utm_campaign=sponsoring
51-
img: vuejs_de_conf.svg
52-
platinum_china:
53-
- name: HBuilder
54-
url: https://www.dcloud.io/hbuilderx.html?hmsr=vue-en&hmpl=&hmcu=&hmkw=&hmci=
55-
img: hbuilder.png
56-
- name: 稀土掘金技术社区
57-
url: https://juejin.cn/frontend?utm_source=vue&utm_campaign=sponsor
58-
img: xitujuejinjishushequ.png
50+
https://marker.io/?utm_source=vuejs&utm_medium=sponsor&utm_campaign=dev-community
51+
img: marker_io.svg
5952
gold:
6053
- name: Laravel
6154
url: https://laravel.com
@@ -102,18 +95,9 @@ gold:
10295
- name: Fenêtre Online Solutions
10396
url: https://www.fenetre.nl/
10497
img: fen_tre_online_solutions.svg
105-
- name: MyEtherWallet Inc
106-
url: https://www.myetherwallet.com
107-
img: myetherwallet_inc.png
108-
- name: Barrage
109-
url: https://www.barrage.net
110-
img: barrage.png
11198
- name: Ant Design Vue
11299
url: https://antdv.com
113100
img: ant_design_vue.png
114-
- name: Lemon Law
115-
url: https://lemonlaw.site
116-
img: lemon_law.png
117101
- name: MQTT X
118102
url: https://mqttx.app
119103
img: mqtt_x.png
@@ -126,15 +110,24 @@ gold:
126110
- name: Handsontable - JavaScript Data Grid
127111
url: https://handsontable.com/
128112
img: handsontable___javascript_data_grid.svg
129-
- name: 1Tool
130-
url: https://www.1tool.com
131-
img: 1tool.png
132113
- name: LearnVue
133114
url: https://learnvue.co
134115
img: learnvue.png
135116
- name: Quickbooks tool hub
136117
url: https://quickbookstoolhub.com
137118
img: quickbooks_tool_hub.png
119+
- name: Casinoburst.com
120+
url: https://casinoburst.com/casino-utan-licens/
121+
img: casinoburst_com.png
122+
- name: uudetkasinot.com
123+
url: https://www.uudetkasinot.com
124+
img: uudetkasinot_com.png
125+
- name: spinsify.com/uk
126+
url: https://www.spinsify.com/uk/new-casinos
127+
img: spinsify_com_uk.png
128+
- name: 'Enkrypt: Ethereum and Polkadot Web3 Wallet'
129+
url: https://www.enkrypt.com
130+
img: enkrypt__ethereum_and_polkadot_web3_wallet.svg
138131
silver:
139132
- name: Draxlr
140133
url: https://www.draxlr.com
@@ -161,12 +154,6 @@ silver:
161154
url: >-
162155
https://localazy.com/blog/how-to-localize-vuejs-app-with-vue-i18n-and-localazy?utm_source=vuejs&utm_medium=banner&utm_campaign=sponsorships_vuejs&utm_content=logo
163156
img: localazy.png
164-
- name: AddWeb Solution
165-
url: http://addwebsolution.com/
166-
img: addweb_solution.png?v2
167-
- name: 1394TA
168-
url: https://1394ta.org
169-
img: 1394ta.png
170157
bronze:
171158
- name: Derek Pollard
172159
url: https://polyglotengineer.com/derek.pollard
@@ -192,6 +179,13 @@ bronze:
192179
- name: Monarch Air Group
193180
url: https://monarchairgroup.com
194181
img: monarch_air_group.png
182+
- name: The Codest
183+
url: https://thecodest.co/
184+
img: the_codest.png?v2
185+
platinum_china:
186+
- name: 稀土掘金技术社区
187+
url: https://juejin.cn/frontend?utm_source=vue&utm_campaign=sponsor
188+
img: xitujuejinjishushequ.png
195189
# END SPONSORS
196190
redirects:
197191
'/v2/api/index.html': '/api/'

‎themes/vue/layout/partials/vueschool_banner.ejs

Lines changed: 9 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,19 @@
1-
<a
2-
id="vs"
3-
href="https://vueschool.io/free-weekend?friend=vuejs&utm_source=vuejs&utm_medium=website&utm_campaign=affiliate&utm_content=top_banner"
4-
target="_blank"
5-
rel="noreferrer"
6-
class="vs-hidden">
7-
<div
8-
class="vs-background-wrapper">
9-
<div class="vs-logo">
10-
<img src="/images/banners/vs-iso.svg" class="logo-small">
11-
<img src="/images/banners/vs-logo.svg" class="logo-big">
12-
</div>
1+
<a id="vs-top" class="vs-hidden" href="#" target="_blank">
2+
<div class="vs-background-wrapper">
3+
<div class="vs-logo"></div>
134
<div class="vs-core">
145
<div class="vs-slogan-wrapper">
15-
<div class="vs-slogan">
16-
Free Weekend 1st & 2nd of October
17-
</div>
18-
<div class="vs-subline">
19-
Get Access to ALL Vue School premium courses
20-
</div>
6+
<div id="vs-slogan" class="vs-slogan"></div>
7+
<div id="vs-subline" class="vs-subline"></div>
218
</div>
229
<div class="vs-button-wrapper">
23-
<div class="vs-button">
24-
Join for Free
25-
</div>
10+
<div id="vs-button" class="vs-button"></div>
2611
</div>
2712
</div>
2813
<div
2914
id="vs-close"
30-
class="vs-close"
31-
@click.stop.prevent="close">
32-
<img src="/images/banners/close.svg" alt="Close">
15+
class="vs-close">
16+
<img src="https://vueschool.io/images/close.svg" alt="Close">
3317
</div>
3418
</div>
35-
</a>
19+
</a>

‎themes/vue/source/css/_vueschool.styl

Lines changed: 167 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ body.has-vs-banner
3232
@media (min-width: 900px)
3333
padding-top: 144px
3434

35-
#vs
35+
#vs-top
3636
position: fixed
3737

3838
#header
@@ -44,93 +44,87 @@ body.has-vs-banner
4444
@media (min-width: 900px)
4545
top: 160px
4646

47-
#vs.vs-hidden {
47+
#vs-top.vs-hidden {
4848
display: none;
4949
}
5050

5151
/*******************************************************/
5252

53-
54-
#vs {
55-
background-color: #0A1124;
53+
#vs-top {
54+
display: block;
5655
box-sizing: border-box;
57-
color: #fff;
58-
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
56+
height: 72px;
5957
position: fixed;
58+
top: 0;
6059
left: 0;
6160
right: 0;
62-
top: 0;
6361
z-index: 100;
64-
height: 72px;
65-
background: linear-gradient(to left, #161a35, #283065);
62+
line-height: 1;
6663
}
6764

68-
#vs .vs-background-wrapper {
65+
#vs-top .vs-background-wrapper {
6966
align-items: center;
7067
justify-content: center;
7168
display: flex;
7269
padding: 0 10px;
7370
height: 100%;
7471
width: 100%;
75-
background-image: url(/images/banners/bg-mobile.png);
76-
background-repeat: no-repeat;
77-
background-size: cover;
78-
background-position: top right;
7972
}
8073

81-
#vs:hover {
74+
#vs-top:hover {
8275
text-decoration: none;
8376
}
8477

85-
#vs:hover .vs-core .vs-button {
78+
#vs-top:hover .vs-core .vs-button {
8679
background-image: linear-gradient(to bottom, #5ccc45, #419E2D), linear-gradient(to bottom, #388f26, #50b83b);
8780
}
8881

89-
#vs .vs-logo {
82+
#vs-top .vs-logo {
9083
position: absolute;
9184
left: 10px;
85+
width: 36px;
86+
height: 42px;
87+
background-size: contain;
88+
background-position: center;
89+
background-repeat: no-repeat;
9290
}
9391

94-
#vs .vs-logo .logo-big {
95-
display: none;
96-
}
97-
98-
#vs .vs-core {
92+
#vs-top .vs-core {
9993
display: flex;
10094
align-items: center;
10195
width: 288px;
10296
}
10397

104-
#vs .vs-core .vs-slogan-wrapper {
98+
#vs-top .vs-core .vs-slogan-wrapper {
10599
text-align: center;
106-
width: 170px;
100+
width: 184px;
107101
margin: 0 auto;
108102
}
109103

110-
#vs .vs-core .vs-slogan {
111-
color: #fff;
104+
#vs-top .vs-core .vs-slogan {
112105
font-weight: bold;
113-
font-size: 10px;
106+
font-size: 12px;
107+
font-family: 'Roboto', Arial, sans-serif;
114108
}
115109

116-
#vs .vs-core .vs-subline {
117-
color: #c6cdf7;
110+
#vs-top .vs-core .vs-subline {
118111
font-size: 10px;
119-
margin-top: 4px;
112+
font-family: 'Roboto', Arial, sans-serif;
113+
text-align: center;
120114
}
121115

122-
#vs .vs-core .vs-button-wrapper {
116+
#vs-top .vs-core .vs-button-wrapper {
123117
padding: 2px;
124118
background-image: linear-gradient(to bottom, #388f26, #50b83b);
125119
border-radius: 60px;
126120
overflow: hidden;
127121
}
128122

129-
#vs .vs-core .vs-button {
123+
#vs-top .vs-core .vs-button {
124+
background-image: linear-gradient(to bottom, #5ccc45, #368c24), linear-gradient(to bottom, #388f26, #50b83b);
130125
border-radius: 60px;
131126
color: #FFF;
132127
padding: 8px 6px;
133-
background-image: linear-gradient(to bottom, #5ccc45, #368c24), linear-gradient(to bottom, #388f26, #50b83b);
134128
font-weight: bold;
135129
text-transform: uppercase;
136130
text-align: center;
@@ -139,81 +133,182 @@ body.has-vs-banner
139133
white-space: nowrap;
140134
}
141135

142-
#vs .vs-close {
136+
#vs-top .vs-close {
143137
right: 0;
144138
position: absolute;
145139
padding: 10px;
146140
}
147141

148-
#vs .vs-close:hover {
142+
#vs-top .vs-close:hover {
149143
color: #56d8ff;
150144
}
151145

152146
@media (min-width: 680px) {
153-
#vs .vs-background-wrapper {
154-
background-image: url(/images/banners/bg-tablet.svg);
147+
#vs-top .vs-core {
148+
width: auto;
155149
}
156150

157-
#vs .vs-logo {
158-
left: 20px;
151+
#vs-top .vs-core .vs-slogan-wrapper {
152+
margin: 0 12px 0 0;
153+
width: 288px;
159154
}
160155

161-
#vs .vs-logo .logo-small {
162-
display: none;
156+
#vs-top .vs-core .vs-slogan {
157+
font-size: 17px;
163158
}
164159

165-
#vs .vs-logo .logo-big {
166-
display: inline-block;
167-
width: 90px;
160+
#vs-top .vs-core .vs-subline {
161+
font-size: 12px;
162+
margin-top: 4px;
168163
}
169164

170-
#vs .vs-core {
171-
width: auto;
172-
margin-right: -60px;
165+
#vs-top .vs-core .vs-button {
166+
font-size: 13px;
167+
padding: 8px 15px;
173168
}
169+
}
174170

175-
#vs .vs-core .vs-slogan-wrapper {
176-
margin: 0 12px 0 0;
177-
width: auto;
171+
@media (min-width: 1280px) {
172+
#vs-top .vs-logo {
173+
left: 20px;
174+
width: 104px;
178175
}
179176

180-
#vs .vs-core .vs-slogan {
181-
font-size: 16px;
177+
#vs-top .vs-core {
178+
margin-right: 0;
182179
}
183180

184-
#vs .vs-core .vs-subline {
185-
font-size: 15px;
186-
text-align: left;
181+
#vs-top .vs-core .vs-slogan-wrapper {
182+
width: auto;
187183
}
188184

189-
#vs .vs-core .vs-button {
190-
font-size: 13px;
191-
padding: 8px 15px;
185+
#vs-top .vs-core .vs-subline {
186+
font-size: 15px;
192187
}
188+
}
189+
190+
/* FREE_WEEKEND
191+
******************************************/
193192

194-
#vs .vs-close {
195-
right: 20px;
193+
#vs-top.FREE_WEEKEND {
194+
color: #FFF;
195+
background: linear-gradient(to left, #161a35, #283065);
196+
}
197+
198+
#vs-top.FREE_WEEKEND .vs-logo {
199+
background-image: url('https://vueschool.io/images/mark-vueschool-white.svg');
200+
}
201+
202+
#vs-top.FREE_WEEKEND .vs-core .vs-slogan {
203+
color: #fff;
204+
}
205+
206+
#vs-top.FREE_WEEKEND .vs-core .vs-slogan strong {
207+
color: #ff2556;
208+
}
209+
210+
#vs-top.FREE_WEEKEND .vs-core .vs-subline {
211+
color: #c6cdf7;
212+
}
213+
214+
#vs-top.FREE_WEEKEND .vs-background-wrapper {
215+
background-image: url('https://vueschool.io/images/banners/assets/FREE_WEEKEND/bg-mobile.png');
216+
background-repeat: no-repeat;
217+
background-size: cover;
218+
background-position: top right;
219+
}
220+
221+
@media (min-width: 680px) {
222+
#vs-top.FREE_WEEKEND .vs-background-wrapper {
223+
background-image: url('https://vueschool.io/images/banners/assets/FREE_WEEKEND/bg-tablet.svg');
196224
}
197225
}
198226

199-
@media (min-width: 900px) {
200-
#vs .vs-background-wrapper {
201-
background-image: url(/images/banners/bg-desktop.svg);
202-
background-position: top right -300px;
227+
@media (min-width: 1280px) {
228+
#vs-top.FREE_WEEKEND .vs-logo {
229+
background-image: url('https://vueschool.io/images/icons/logo-white.svg');
203230
}
204231

205-
#vs .vs-logo .logo-big {
206-
display: inline-block;
207-
width: auto;
232+
#vs-top.FREE_WEEKEND .vs-background-wrapper {
233+
background-image: url('https://vueschool.io/images/banners/assets/FREE_WEEKEND/bg-desktop.svg');
234+
background-position: top right -60px;
208235
}
236+
}
209237

210-
#vs .vs-core {
211-
margin-right: 0;
238+
/* LEVELUP2022
239+
******************************************/
240+
241+
#vs-top.LEVELUP2022 {
242+
color: #121733;
243+
background: #EEF5FF;
244+
}
245+
246+
#vs-top.LEVELUP2022 .vs-logo {
247+
background-image: url('https://vueschool.io/images/mark-vueschool.svg');
248+
}
249+
250+
#vs-top.LEVELUP2022 .vs-core .vs-slogan {
251+
color: #121733;
252+
}
253+
254+
#vs-top.LEVELUP2022 .vs-core .vs-slogan strong {
255+
color: #ff2556;
256+
}
257+
258+
#vs-top.LEVELUP2022 .vs-core .vs-subline {
259+
color: #394170;
260+
}
261+
262+
#vs-top.LEVELUP2022 .vs-core .vs-subline strong {
263+
color: #48aa34;
264+
}
265+
266+
#vs-top.LEVELUP2022 .vs-background-wrapper {
267+
background-image: url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-mobile.png');
268+
background-repeat: no-repeat;
269+
background-size: cover;
270+
background-position: top right;
271+
}
272+
273+
#vs-top.LEVELUP2022 .vs-core .vs-button-wrapper {
274+
background-image: linear-gradient(to bottom, #d71b46, #fd2455);
275+
}
276+
277+
#vs-top.LEVELUP2022 .vs-core .vs-button {
278+
background-image: linear-gradient(to bottom, #ff2556, #d51b44), linear-gradient(to bottom, #d71b46, #fd2455);
279+
}
280+
281+
@media (min-width: 680px) {
282+
#vs-top.LEVELUP2022 .vs-background-wrapper {
283+
background-image: url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-tablet.png');
284+
}
285+
286+
#vs-top.LEVELUP2022 .vs-core .vs-slogan-wrapper {
287+
width: 458px;
212288
}
213289
}
214290

215291
@media (min-width: 1280px) {
216-
#vs .vs-background-wrapper {
217-
background-position: top right;
292+
#vs-top.LEVELUP2022 .vs-logo {
293+
background-image: url('https://vueschool.io/images/icons/logo.svg');
294+
}
295+
296+
#vs-top.LEVELUP2022 .vs-background-wrapper {
297+
background-image:
298+
url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-desktop-left.png'),
299+
url('https://vueschool.io/images/banners/assets/LEVELUP2022/bg-desktop-right.png');
300+
background-position:
301+
top left -120px,
302+
top right -120px;
303+
background-size: contain;
304+
background-repeat: no-repeat;
305+
}
306+
}
307+
308+
@media (min-width: 1536px) {
309+
#vs-top.LEVELUP2022 .vs-background-wrapper {
310+
background-position:
311+
top left,
312+
top right;
218313
}
219314
}

‎themes/vue/source/js/common.js

Lines changed: 69 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -285,19 +285,83 @@
285285
* Banner closing
286286
*/
287287
function initVueSchoolBanner () {
288-
const banner = document.getElementById('vs')
289-
const start = new Date('2022-09-21T00:00:00+02:00')
290-
const now = new Date()
291-
if (banner && (now > start) && !localStorage.getItem('VS_FW_OCTOBER')) {
288+
const banner = document.getElementById('vs-top')
289+
290+
const items = [
291+
{
292+
banner: {
293+
assets: "FREE_WEEKEND",
294+
cta: "JOIN FOR FREE",
295+
link: "/free-weekend",
296+
static: "FREE_WEEKEND",
297+
subtitle: "Get Access to ALL Vue School premium courses",
298+
title: "Free Weekend 1st & 2nd of October"
299+
},
300+
ends: "2022-09-30T23:59:59+02:00",
301+
id: "FREE_WEEKEND_LOBBY",
302+
isExtended: false
303+
},
304+
{
305+
banner: {
306+
assets: "FREE_WEEKEND",
307+
cta: "WATCH FOR FREE",
308+
link: "/free-weekend",
309+
static: "FREE_WEEKEND_LIVE",
310+
subtitle: "Get Access to ALL Vue School premium courses",
311+
title: "Free Weekend <strong>NOW LIVE</strong>"
312+
},
313+
ends: "2022-10-02T23:59:59+02:00",
314+
id: "FREE_WEEKEND_LIVE",
315+
isExtended: false
316+
},
317+
{
318+
banner: {
319+
assets: "LEVELUP2022",
320+
cta: "GET OFFER",
321+
link: "/sales/levelup2022",
322+
static: "LEVELUP2022",
323+
subtitle: "Access 800+ lessons including the Vue.js 3 Masterclass",
324+
title: "Less than <strong>48 hours</strong> to get 45% off at Vue School"
325+
},
326+
ends: "2022-10-04T23:59:59+02:00",
327+
id: "LEVELUP2022",
328+
isExtended: false
329+
},
330+
{
331+
banner: {
332+
assets: "LEVELUP2022",
333+
cta: "GET OFFER",
334+
link: "/sales/levelup2022",
335+
static: "LEVELUP2022",
336+
subtitle: "Extended! Access 800+ lessons including the Vue.js 3 Masterclass",
337+
title: "Less than <strong>48 hours</strong> to get 45% off at Vue School"
338+
},
339+
ends: "2022-10-06T23:59:59+02:00",
340+
id: "LEVELUP2022_EXTENDED",
341+
isExtended: true
342+
}
343+
]
344+
345+
const now = new Date('2022-10-05')
346+
const phases = items.map(phase => ({ ...phase, remaining: new Date(phase.ends) - now }))
347+
const activePhase = phases.find(phase => phase.remaining > 0)
348+
349+
if (banner && (activePhase) && !localStorage.getItem('VS_FW_OCTOBER')) {
292350
banner.classList.remove('vs-hidden')
293351
document.body.classList.add('has-vs-banner')
294352
document.getElementById('vs-close').addEventListener('click', function (e) {
295353
e.preventDefault()
296354
e.stopPropagation()
297-
document.getElementById('vs').remove()
355+
document.getElementById('vs-top').remove()
298356
document.body.classList.remove('has-vs-banner')
299357
localStorage.setItem('VS_FW_OCTOBER', 1)
300358
})
359+
360+
document.getElementById('vs-top').classList.add(activePhase.banner.assets)
361+
document.getElementById('vs-top').href = `https://vueschool.io${activePhase.banner.link}?friend=vuejs&utm_source=vuejs&utm_medium=website&utm_campaign=affiliate&utm_content=top_banner`
362+
document.getElementById('vs-slogan').innerHTML = activePhase.banner.title
363+
document.getElementById('vs-subline').innerHTML = activePhase.banner.subtitle
364+
document.getElementById('vs-button').innerHTML = activePhase.banner.cta
301365
}
302366
}
303367

0 commit comments

Comments
 (0)
Please sign in to comment.