Skip to content

Commit 01d8e48

Browse files
marcosmouramarcosmoura
committed
docs: add codefund ads and remove old sponsors
1 parent a65d363 commit 01d8e48

File tree

11 files changed

+120
-241
lines changed

11 files changed

+120
-241
lines changed

‎README.md‎

Lines changed: 2 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,15 @@
1111
<img src="https://travis-ci.org/vuematerial/vue-material.svg?branch=master" alt="Build Status">
1212
</a>
1313

14-
<!--a href="https://codeclimate.com/github/vuematerial/vue-material/coverage">
15-
<img src="https://codeclimate.com/github/vuematerial/vue-material/badges/coverage.svg">
16-
</a-->
17-
1814
<a href="https://www.npmjs.com/package/vue-material">
1915
<img src="https://img.shields.io/npm/dt/vue-material.svg" alt="Downloads">
2016
</a>
2117

2218
<a href="https://www.npmjs.com/package/vue-material">
2319
<img src="https://img.shields.io/npm/l/vue-material.svg" alt="License">
2420
</a>
25-
26-
<a href="https://discord.gg/rgcmTtm">
21+
22+
<a href="https://discord.gg/vuematerial">
2723
<img src="https://img.shields.io/discord/379653048798281729.svg?logo=discord&colorB=7289DA" alt="Chat">
2824
</a>
2925
</p>
@@ -32,14 +28,6 @@ Vue Material is Simple, lightweight and built exactly according to the Google <a
3228

3329
Build well-designed apps that can fit on every screen with support to all modern Web Browsers with dynamic themes, components on demand and all with an ease-to-use API
3430

35-
## Sponsorship
36-
37-
Vue Material is proudly sponsored by [Rollbar](https://codesponsor.io/t/c/93172542ee6813a9372c08c459fd1e5a/
38-
). They provide real-time JavaScript error monitoring, alerting, and analytics for developers. :rocket:
39-
40-
You can try Rollbar for free at [https://rollbar.com](https://codesponsor.io/t/c/93172542ee6813a9372c08c459fd1e5a/
41-
) <img src="https://codesponsor.io/t/l/93172542ee6813a9372c08c459fd1e5a/pixel.png" />
42-
4331
## Demo and Documentation
4432

4533
<a href="https://vuematerial.io/" target="_blank">Documentation & demos</a>

‎docs/app/App.vue‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,6 @@
1313
</div>
1414

1515
<main-footer />
16-
17-
<md-snackbar class="version-message" md-theme="default" :md-active.sync="message" :md-duration="Infinity">
18-
<span>This site is for the Vue Material 1.0 beta.</span>
19-
<div>
20-
<md-button href="https://vue-material-old.netlify.com/" target="_blank">Visit old docs</md-button>
21-
<md-button class="md-accent" @click="closeMessage">Dismiss</md-button>
22-
</div>
23-
</md-snackbar>
2416
</div>
2517
</template>
2618

@@ -87,6 +79,7 @@
8779
8880
body {
8981
height: 100%;
82+
overflow-x: hidden;
9083
}
9184
</style>
9285

‎docs/app/components/AdManager.vue‎

Lines changed: 23 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,30 @@
11
<template>
2-
<div class="ad-manager" v-if="codeFundData">
3-
<div class="code-fund" :class="{ static: isStatic }">
4-
<a target="_blank" :href="codeFundData.link" class="code-fund-image">
5-
<md-ripple>
6-
<img :src="codeFundData.image">
7-
</md-ripple>
8-
</a>
9-
10-
<div class="code-fund-data">
11-
<a target="_blank" :href="codeFundData.link" class="code-fund-header">{{ codeFundData.headline }}</a>
12-
<a target="_blank" :href="codeFundData.link" class="code-fund-content">{{ codeFundData.description }}</a>
13-
<a target="_blank" :href="codeFundData.poweredByLink" class="code-fund-name">ads via codefund.io</a>
14-
</div>
15-
16-
<img :src="codeFundData.pixel" alt="Codefund Pixel" class="code-fund-pixel">
17-
</div>
18-
</div>
2+
<md-content class="ad-manager" id="ad-manager" md-theme="docs-dark">
3+
<div id="code-fund" class="code-fund"></div>
4+
</md-content>
195
</template>
206

217
<script>
228
export default {
239
name: 'AdManager',
24-
data: () => ({
25-
codeFundId: 'e2b197ea-5aca-408e-96fc-088ad5be2280',
26-
codeFundData: null,
27-
isStatic: false
28-
}),
2910
methods: {
30-
setStatic () {
31-
window.requestAnimationFrame(() => {
32-
const scrollEl = document.documentElement
33-
const container = document.querySelector('.container')
11+
getSponsor () {
12+
let sponsorUrl = 'https://api.codefund.app/properties/60/funder.html'
13+
14+
if (this.$route.name !== 'home') {
15+
sponsorUrl += '?theme=light'
16+
}
3417
35-
this.isStatic = scrollEl.offsetHeight >= container.offsetHeight
18+
this.$http.get(sponsorUrl).then(({ data }) => {
19+
document.getElementById('code-fund').innerHTML = data;
3620
})
3721
}
3822
},
3923
mounted () {
40-
this.$http.get(`https://codefund.io/t/s/${this.codeFundId}/details.json`).then(({ data }) => {
41-
this.$set(this, 'codeFundData', data)
42-
this.setStatic()
43-
})
44-
window.addEventListener('resize', this.setStatic, false)
24+
this.getSponsor()
4525
},
46-
beforeDestroy () {
47-
window.removeEventListener('resize', this.setStatic)
26+
updated () {
27+
this.getSponsor()
4828
}
4929
}
5030
</script>
@@ -55,30 +35,8 @@
5535
$ad-responsive-big: 1690px;
5636
$ad-responsive-small: 768px;
5737
58-
@mixin ad-theme ($hue, $color) {
59-
.code-fund {
60-
background: md-get-palette-color(grey, $hue);
61-
}
62-
63-
.code-fund-header,
64-
.code-fund-content {
65-
color: rgba($color, .7);
66-
67-
&:hover {
68-
color: $color;
69-
}
70-
}
71-
72-
.code-fund-name {
73-
color: rgba($color, .38);
74-
75-
&:hover {
76-
color: rgba($color, .7);
77-
}
78-
}
79-
}
80-
8138
.ad-manager {
39+
width: calc(100% + 32px);
8240
margin: 0 -16px -16px;
8341
8442
@media (max-width: $ad-responsive-small) {
@@ -88,7 +46,7 @@
8846
8947
.code-fund {
9048
max-width: 175px;
91-
margin: 7px 16px 24px 16px;
49+
margin: 0 16px 24px 16px;
9250
padding: 8px;
9351
display: flex;
9452
flex-direction: column;
@@ -99,88 +57,27 @@
9957
line-height: 1.5em;
10058
10159
@media (min-width: $ad-responsive-big) {
102-
&:not(.static) {
103-
margin: 0;
104-
position: fixed;
105-
right: 16px;
106-
bottom: 16px;
107-
z-index: 1000;
108-
}
60+
margin: 0;
61+
position: fixed;
62+
top: 80px;
63+
right: 24px;
64+
z-index: 1000;
10965
}
11066
11167
@media (max-width: $ad-responsive-small) {
11268
max-width: none;
113-
margin-bottom: 16px;
69+
margin: 8px auto 16px;
11470
float: none;
11571
}
11672
11773
.splash-container & {
11874
@media (max-width: $ad-responsive-big) {
11975
max-width: 530px;
12076
min-height: 100px;
121-
margin: 8px auto;
77+
margin: 60px auto 8px;
12278
float: none;
12379
background: none !important;
12480
}
12581
}
126-
127-
a {
128-
display: block;
129-
}
130-
}
131-
132-
.code-fund-image {
133-
color: #fff !important;
134-
135-
&:hover {
136-
opacity: .85;
137-
}
138-
}
139-
140-
.code-fund-header {
141-
margin-top: .5em;
142-
font-weight: 600;
143-
line-height: 1.3em;
144-
}
145-
146-
.code-fund-content {
147-
margin-top: 1em;
148-
149-
&:hover {
150-
text-decoration: none;
151-
}
152-
}
153-
154-
.code-fund-name {
155-
margin-top: .5em;
156-
font-size: 11px;
157-
}
158-
159-
.code-fund-name,
160-
.code-fund-description {
161-
&:hover {
162-
text-decoration: underline;
163-
}
164-
}
165-
166-
.code-fund-pixel {
167-
width: 1px;
168-
height: 1px;
169-
margin: -1px;
170-
padding: 0;
171-
position: absolute;
172-
overflow: hidden;
173-
clip: rect(0 0 0 0);
174-
border: 0;
175-
}
176-
177-
.main-container {
178-
@include ad-theme(200, #000);
179-
}
180-
181-
.splash-container {
182-
@media (min-width: $ad-responsive-big) {
183-
@include ad-theme(800, #fff);
184-
}
18582
}
18683
</style>

‎docs/app/components/SplashContainer.vue‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,16 @@
22
<transition name="splash-container">
33
<div class="splash-container main-container" :class="{ centered }">
44
<slot />
5-
6-
<ad-manager v-if="$route.name !== 'home'" />
75
</div>
86
</transition>
97
</template>
108

119
<script>
1210
import * as types from 'store/mutation-types'
1311
import { mapActions, mapMutations, mapState } from 'vuex'
14-
import AdManager from './AdManager'
1512
1613
export default {
1714
name: 'SplashContainer',
18-
components: {
19-
AdManager
20-
},
2115
props: {
2216
title: String,
2317
centered: Boolean

‎docs/app/pages/Home/Home.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
export default {
2525
name: 'Home',
2626
components: {
27+
AdManager,
2728
HomeHeader,
2829
HomeFeatures,
2930
HomeEcosystem,
@@ -86,8 +87,7 @@
8687
8788
.home-splash {
8889
max-width: 1312px;
89-
min-height: calc(100vh - 80px);
90-
padding-top: 24px;
90+
padding: 24px 0;
9191
position: relative;
9292
}
9393

‎docs/app/pages/Home/HomeFeatures.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
@import "~vue-material/components/MdLayout/mixins";
4141
4242
.home-features {
43+
margin-top: 60px;
4344
padding-bottom: 60px;
4445
flex: none;
4546

‎docs/app/pages/Home/HomeSponsors.vue‎

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,39 +10,15 @@
1010
<i18n path="pages.home.sponsorsDescription" tag="p">
1111
<a href="https://www.github.com/marcosmoura" target="_blank">Marcos Moura</a>
1212
</i18n>
13+
1314
<p>{{ $t('pages.home.beAPatron') }}:</p>
15+
1416
<a href="https://www.patreon.com/bePatron?u=4832202" target="_blank" class="home-sponsors-patreon">
1517
<md-ripple>
1618
<img src="/assets/sponsors/patreon.png">
1719
</md-ripple>
1820
</a>
1921
</div>
20-
21-
<div class="home-sponsors-backers">
22-
<h3 class="md-title">{{ $t('pages.home.sponsors') }}</h3>
23-
24-
<div class="home-sponsor-list md-layout md-layout-wrap">
25-
<a class="home-sponsor" href="http://impulso.work" target="_blank">
26-
<md-tooltip md-theme="default" md-direction="right">Impulso</md-tooltip>
27-
28-
<md-ripple>
29-
<img src="/assets/sponsors/logo-impulso.png">
30-
</md-ripple>
31-
</a>
32-
</div>
33-
34-
<h4 class="md-subheading">{{ $t('pages.home.backers') }}</h4>
35-
36-
<ul>
37-
<li>Anthony Villena</li>
38-
<li>Bobby McDonald</li>
39-
<li>Ivo Benner</li>
40-
<li>N Squared</li>
41-
<li>Nathanael Björkgård</li>
42-
<li>William Chong</li>
43-
<li>Yatima Kagurazaka</li>
44-
</ul>
45-
</div>
4622
</div>
4723
</md-content>
4824
</template>
@@ -70,6 +46,7 @@
7046
7147
.home-sponsors-patreon {
7248
max-width: 180px;
49+
margin: 24px 0;
7350
display: inline-block;
7451
}
7552

‎docs/app/template/MainFooter.vue‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
</div>
88

99
<div class="main-footer-section">
10-
<a href="https://github.com/marcosmoura" target="_blank">{{ $t('madeWith') }} <span class="red">❤</span> {{ $t('by') }} Marcos Moura</a>
10+
<a href="https://github.com/marcosmoura" target="_blank">
11+
{{ $t('madeWith') }} <span class="red">❤</span> {{ $t('by') }} Marcos Moura
12+
</a>
1113
</div>
1214
</div>
1315
</footer>

‎docs/assets/sponsors/logo-impulso.png‎

-12.7 KB
Binary file not shown.

0 commit comments

Comments
 (0)