|
| 1 | +<template> |
| 2 | + <md-content id="ad-manager" md-theme="default"></md-content> |
| 3 | +</template> |
1 | 4 |
|
2 | 5 | <script>
|
3 | 6 | export default {
|
4 | 7 | name: 'AdManager',
|
5 |
| - abstract: true, |
6 | 8 | data: () => ({
|
7 |
| - carbonEl: null, |
8 |
| - codeSponsorEl: null |
| 9 | + carbonEl: null |
9 | 10 | }),
|
10 | 11 | render () {
|
11 | 12 | return null
|
12 | 13 | },
|
13 | 14 | methods: {
|
14 | 15 | saveAdsElements () {
|
15 | 16 | this.carbonEl = document.getElementById('carbonads')
|
16 |
| - this.codeSponsorEl = document.querySelector('.code-sponsor-widget') |
17 |
| - if (!this.carbonEl || !this.codeSponsorEl) { |
| 17 | +
|
| 18 | + if (!this.carbonEl) { |
18 | 19 | this.$destroy()
|
19 | 20 | }
|
20 | 21 | },
|
21 |
| - appendCarbonAds() { |
| 22 | + appendCarbonAds () { |
22 | 23 | const interval = window.setInterval(() => {
|
23 | 24 | const carbonAds = document.getElementById('carbonads')
|
24 | 25 | const container = document.querySelector('.container')
|
25 |
| - const mainContainer = document.querySelector('.main-container') |
| 26 | + const pageContainer = document.querySelector('.page-container') |
26 | 27 | const splashContainer = document.querySelector('.splash-container')
|
27 |
| - const carbonAdsContainer = document.querySelector('.code-sponsor-widget') |
| 28 | + const adManager = this.$el |
| 29 | +
|
28 | 30 | if (carbonAds && container) {
|
29 |
| - if (splashContainer) { |
30 |
| - carbonAdsContainer.appendChild(carbonAds) |
31 |
| - } else if (mainContainer) { |
32 |
| - mainContainer.insertBefore(carbonAds, mainContainer.firstChild) |
| 31 | + if (pageContainer) { |
| 32 | + pageContainer.insertBefore(carbonAds, pageContainer.firstChild) |
| 33 | + } else if (splashContainer && adManager) { |
| 34 | + adManager.appendChild(carbonAds) |
33 | 35 | } else {
|
34 | 36 | container.insertBefore(carbonAds, container.firstChild)
|
35 | 37 | }
|
| 38 | +
|
36 | 39 | window.clearInterval(interval)
|
37 | 40 | }
|
38 | 41 | }, 50)
|
39 | 42 | },
|
40 |
| - appendCodeSponsor() { |
41 |
| - const interval = window.setInterval(() => { |
42 |
| - const carbonAds = document.querySelector('.code-sponsor-widget') |
43 |
| - const container = document.querySelector('.container') |
44 |
| - const mainContainer = document.querySelector('.main-container') |
45 |
| - if (carbonAds && mainContainer) { |
46 |
| - if (mainContainer) { |
47 |
| - mainContainer.appendChild(carbonAds) |
48 |
| - } else { |
49 |
| - container.appendChild(carbonAds) |
50 |
| - } |
51 |
| - window.clearInterval(interval) |
52 |
| - } |
53 |
| - }, 50) |
54 |
| - }, |
55 |
| - moveCarbonAdsToBody() { |
| 43 | + moveCarbonAdsToBody () { |
56 | 44 | if (this.carbonEl) {
|
57 | 45 | document.body.appendChild(this.carbonEl)
|
58 | 46 | }
|
59 |
| - }, |
60 |
| - moveCodeSponsorToBody() { |
61 |
| - if (this.codeSponsorEl) { |
62 |
| - document.body.appendChild(this.codeSponsorEl) |
63 |
| - } |
64 | 47 | }
|
65 | 48 | },
|
66 | 49 | mounted () {
|
67 | 50 | this.saveAdsElements()
|
68 | 51 | this.appendCarbonAds()
|
69 |
| - this.appendCodeSponsor() |
70 | 52 | },
|
71 |
| - beforeDestroy() { |
| 53 | + beforeDestroy () { |
72 | 54 | this.moveCarbonAdsToBody()
|
73 |
| - this.moveCodeSponsorToBody() |
74 | 55 | }
|
75 | 56 | }
|
76 | 57 | </script>
|
77 | 58 |
|
78 | 59 | <style lang="scss">
|
79 | 60 | @import "~vue-material/theme/engine";
|
| 61 | +
|
80 | 62 | $ad-responsive-big: 1670px;
|
81 | 63 | $ad-responsive-small: 600px;
|
| 64 | +
|
82 | 65 | @mixin ad-theme ($hue, $color) {
|
83 |
| - #carbonads, |
84 |
| - .code-sponsor-widget { |
| 66 | + #carbonads { |
85 | 67 | background: md-get-palette-color(grey, $hue);
|
| 68 | +
|
| 69 | + .carbon-poweredby { |
| 70 | + color: rgba($color, .54); |
| 71 | +
|
| 72 | + &:hover { |
| 73 | + color: rgba($color, .87); |
| 74 | + } |
| 75 | + } |
86 | 76 | }
|
| 77 | +
|
87 | 78 | .carbon-wrap a {
|
88 | 79 | color: rgba($color, .7);
|
| 80 | +
|
89 | 81 | &:hover {
|
90 | 82 | color: $color;
|
91 | 83 | }
|
92 | 84 | }
|
93 |
| - #carbonads .carbon-poweredby { |
94 |
| - color: rgba($color, .54); |
95 |
| - &:hover { |
96 |
| - color: rgba($color, .87); |
97 |
| - } |
98 |
| - } |
99 | 85 | }
|
| 86 | +
|
100 | 87 | .main-container {
|
101 | 88 | @include ad-theme(200, #000);
|
102 | 89 | }
|
| 90 | +
|
103 | 91 | .splash-container {
|
104 | 92 | @media (min-width: $ad-responsive-big) {
|
105 | 93 | @include ad-theme(800, #fff);
|
106 | 94 | }
|
107 | 95 | }
|
| 96 | +
|
108 | 97 | #carbonads {
|
109 | 98 | max-width: 162px;
|
110 | 99 | margin: 1em 0 24px 16px;
|
111 | 100 | padding: 16px;
|
112 | 101 | float: right;
|
113 | 102 | position: relative;
|
114 | 103 | z-index: 10;
|
| 104 | +
|
115 | 105 | .splash-container & {
|
116 | 106 | @media (max-width: $ad-responsive-big) {
|
117 | 107 | background: #fff;
|
118 | 108 | }
|
119 | 109 | }
|
| 110 | +
|
120 | 111 | @media (min-width: $ad-responsive-big) {
|
121 | 112 | margin: 0;
|
122 | 113 | position: fixed;
|
123 | 114 | right: 16px;
|
124 | 115 | bottom: 16px;
|
125 | 116 | }
|
| 117 | +
|
126 | 118 | @media (max-width: $ad-responsive-small) {
|
127 | 119 | max-width: none;
|
128 | 120 | min-height: 100px;
|
129 | 121 | margin-left: 0;
|
130 | 122 | padding: 0;
|
131 | 123 | float: none;
|
132 | 124 | }
|
| 125 | +
|
133 | 126 | .splash-container & {
|
134 | 127 | @media (max-width: $ad-responsive-big) {
|
135 | 128 | max-width: none;
|
|
139 | 132 | float: none;
|
140 | 133 | }
|
141 | 134 | }
|
| 135 | +
|
142 | 136 | .carbon-wrap {
|
143 | 137 | display: flex;
|
144 | 138 | flex-direction: column;
|
145 | 139 | font-size: 12px;
|
| 140 | +
|
146 | 141 | @media (max-width: $ad-responsive-small) {
|
147 | 142 | display: block;
|
148 | 143 | }
|
| 144 | +
|
149 | 145 | .splash-container & {
|
150 | 146 | @media (max-width: $ad-responsive-big) {
|
151 | 147 | display: block;
|
152 | 148 | }
|
153 | 149 | }
|
| 150 | +
|
154 | 151 | .carbon-img {
|
155 | 152 | @media (max-width: $ad-responsive-small) {
|
156 | 153 | margin-right: 16px;
|
157 | 154 | float: left;
|
158 | 155 | }
|
| 156 | +
|
159 | 157 | .splash-container & {
|
160 | 158 | @media (max-width: $ad-responsive-big) {
|
161 | 159 | margin-right: 16px;
|
162 | 160 | float: left;
|
163 | 161 | }
|
164 | 162 | }
|
165 | 163 | }
|
| 164 | +
|
166 | 165 | .carbon-text {
|
167 | 166 | line-height: 1.5em;
|
| 167 | +
|
168 | 168 | @media (max-width: $ad-responsive-big) {
|
169 | 169 | padding-top: 1em;
|
170 | 170 | padding-right: 16px;
|
171 | 171 | display: block;
|
172 | 172 | }
|
| 173 | +
|
173 | 174 | @media (min-width: $ad-responsive-big) {
|
174 | 175 | margin: 12px 0 8px;
|
175 | 176 | }
|
176 | 177 | }
|
| 178 | +
|
177 | 179 | a {
|
178 | 180 | &:hover {
|
179 | 181 | text-decoration: none;
|
180 | 182 | }
|
181 | 183 | }
|
182 | 184 | }
|
| 185 | +
|
183 | 186 | .carbon-poweredby {
|
184 | 187 | font-size: 11px;
|
185 | 188 | }
|
186 | 189 | }
|
187 |
| - .code-sponsor-widget { |
188 |
| - margin-top: 64px; |
189 |
| - padding: 10px; |
190 |
| - display: flex; |
191 |
| - justify-content: center; |
192 |
| - @media (max-width: $ad-responsive-small) { |
193 |
| - align-items: center; |
194 |
| - flex-direction: column; |
195 |
| - } |
196 |
| - .splash-container & { |
197 |
| - width: calc(100% + 32px); |
198 |
| - margin: 0 -16px -16px; |
199 |
| - background: #fff; |
200 |
| - } |
| 190 | +
|
| 191 | + #ad-manager { |
| 192 | + width: calc(100% + 32px); |
| 193 | + margin: 0 -16px -16px; |
| 194 | +
|
201 | 195 | #carbonads {
|
202 |
| - margin-left: 16px; |
203 |
| - @media (max-width: $ad-responsive-small) { |
204 |
| - margin-top: 16px; |
205 |
| - margin-left: 0; |
| 196 | + @media (max-width: $ad-responsive-big) { |
| 197 | + max-width: 530px; |
| 198 | + margin: 24px auto; |
206 | 199 | }
|
207 | 200 | }
|
208 | 201 | }
|
|
0 commit comments