Skip to content

Commit f83e5ed

Browse files
nicodevsnicodevs
authored
Docs: Update Vue School Black Friday banner (#3665)
1 parent 85c5f0a commit f83e5ed

File tree

9 files changed

+145
-204
lines changed

9 files changed

+145
-204
lines changed

‎docs/.vuepress/public/images/vueschool/tech-coin-js.png

4.44 KB
Loading

‎docs/.vuepress/public/images/vueschool/tech-coin-nuxt.png

5.29 KB
Loading

‎docs/.vuepress/public/images/vueschool/tech-coin-ts.png

3.4 KB
Loading

‎docs/.vuepress/public/images/vueschool/tech-coin-vue.png

4.28 KB
Loading

‎docs/.vuepress/public/images/vueschool/tech-coin-vuex.png

3.63 KB
Loading

‎docs/.vuepress/public/images/vueschool/vueschool_blackfriday_background_desktop.svg

Lines changed: 0 additions & 200 deletions
This file was deleted.

‎docs/.vuepress/theme/Layout.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ export default {
7272
ParentLayout,
7373
CarbonAds,
7474
BuySellAds,
75-
BannerTop: () => import('./components/BannerTop.vue')
75+
BannerTop: () => import('./components/VueSchool/BannerTop.vue')
7676
},
7777
data() {
7878
return {

‎docs/.vuepress/theme/components/VueSchool/BannerCoins.vue

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
<template>
2+
<div
3+
class="vs-blackfriday-coins">
4+
<img
5+
v-for="coin in coins"
6+
:key="coin.id"
7+
:alt="coin.id"
8+
:src="`/images/vueschool/tech-coin-${coin.id}.png`"
9+
:class="[coin.id, coin.inverse ? inverseDirection : direction]"
10+
:style="coin.style"
11+
class="vs-blackfriday-coin">
12+
</div>
13+
</template>
14+
15+
<script>
16+
const coins = [
17+
{ id: 'js', inverse: true },
18+
{ id: 'ts' },
19+
{ id: 'vue', inverse: true },
20+
{ id: 'vuex', inverse: true },
21+
{ id: 'nuxt' }
22+
]
23+
24+
export default {
25+
data () {
26+
return {
27+
coins,
28+
xPosition: 0,
29+
direction: 'left',
30+
inverseDirection: 'right',
31+
isAnimated: false
32+
}
33+
},
34+
mounted () {
35+
if (window.innerWidth < 1024) return
36+
this.isAnimated = true
37+
this.animationTarget = document.getElementById('vs')
38+
this.animationTarget.addEventListener('mousemove', this.animate)
39+
},
40+
beforeDestroy () {
41+
if (!this.isAnimated) return
42+
this.animationTarget.removeEventListener('mousemove', this.animate)
43+
},
44+
methods: {
45+
animate (e) {
46+
this.direction = e.pageX > this.xPosition ? 'right' : 'left'
47+
this.inverseDirection = this.direction === 'left' ? 'right' : 'left'
48+
this.xPosition = e.pageX
49+
}
50+
}
51+
}
52+
</script>
53+
54+
<style>
55+
.vs-blackfriday-coins {
56+
overflow: hidden;
57+
position: absolute;
58+
bottom: 0;
59+
right: 0;
60+
top: 0;
61+
left: 0;
62+
z-index: -1;
63+
}
64+
65+
.vs-blackfriday-coin {
66+
display: none;
67+
}
68+
69+
@media (min-width: 768px) {
70+
.vs-blackfriday-coins {
71+
background-image: url(/images/vueschool/vueschool_blackfriday_background_tablet.svg);
72+
background-position: center;
73+
background-size: cover;
74+
}
75+
}
76+
77+
@media (min-width: 1024px) {
78+
.vs-blackfriday-coins {
79+
background: transparent;
80+
}
81+
82+
#vs:hover .vs-blackfriday-coin.left {
83+
transform: translateX(-600px);
84+
transition: transform 30s linear;
85+
}
86+
87+
#vs:hover .vs-blackfriday-coin.right {
88+
transform: translateX(600px);
89+
transition: transform 30s linear;
90+
}
91+
92+
.vs-blackfriday-coin {
93+
display: inline-block;
94+
position: absolute;
95+
transition-property: transform;
96+
transition-timing-function: cubic-bezier(.17, .84, .44,1);
97+
transition-duration: 75ms;
98+
transform: translateX(0);
99+
}
100+
101+
.vs-blackfriday-coin.js {
102+
width: 43px;
103+
top: 32px;
104+
left: calc(50% - 341px);
105+
}
106+
107+
.vs-blackfriday-coin.ts {
108+
top: 0;
109+
left: 0;
110+
width: 54px;
111+
left: calc(50% + 457px);
112+
}
113+
114+
.vs-blackfriday-coin.vue {
115+
top: 18px;
116+
width: 60px;
117+
left: calc(50% + 586px);
118+
}
119+
120+
.vs-blackfriday-coin.vuex {
121+
top: 23px;
122+
left: 0;
123+
width: 56px;
124+
left: calc(50% - 620px);
125+
}
126+
127+
.vs-blackfriday-coin.nuxt {
128+
top: 10px;
129+
width: 48px;
130+
left: calc(50% - 474px);
131+
}
132+
}
133+
</style>

‎docs/.vuepress/theme/components/BannerTop.vue renamed to ‎docs/.vuepress/theme/components/VueSchool/BannerTop.vue

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<template>
22
<a id="vs" href="https://vueschool.io/sales/blackfriday?friend=vuerouter" target="_blank" rel="noreferrer">
3+
<BannerCoins />
34
<div class="vs-core">
45
<div class="vs-logo">
56
<img src="/images/vueschool/vueschool_blackfriday_logo.svg">
@@ -22,6 +23,16 @@
2223
</a>
2324
</template>
2425

26+
<script>
27+
import BannerCoins from './BannerCoins.vue'
28+
29+
export default {
30+
components: {
31+
BannerCoins
32+
}
33+
}
34+
</script>
35+
2536
<style lang="stylus">
2637
$topBannerHeight ?= 5rem
2738
$topBannerHeightMobile ?= 5rem
@@ -50,9 +61,6 @@ $contentClass = '.theme-default-content'
5061
@media (min-width: 680px)
5162
height: $topBannerHeight
5263
justify-content: center
53-
background-image: url(/images/vueschool/vueschool_blackfriday_background_tablet.svg)
54-
@media (min-width: 900px)
55-
background-image: url(/images/vueschool/vueschool_blackfriday_background_desktop.svg)
5664
5765
&:hover
5866
.vs-core

0 commit comments

Comments
 (0)