Skip to content

Commit 57a6819

Browse files
BobChao87BobChao87
committed
Add patrons and Patreon branding to footer
Related to Issue #47
1 parent 8fb1b2b commit 57a6819

File tree

6 files changed

+134
-73
lines changed

6 files changed

+134
-73
lines changed

‎assets/global.scss

+5
Original file line numberDiff line numberDiff line change
@@ -16,3 +16,8 @@ html {
1616
a {
1717
text-decoration: underline;
1818
}
19+
20+
.is-centered {
21+
display: flex;
22+
justify-content: center;
23+
}

‎components/footer/Bar.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
<p>
55
{{ $t('footer.text', { timezone: $temporal.timeZone.timeZone }) }}
66
</p>
7-
<p v-html="$t('footer.donate', { donationLink: 'https://www.patreon.com/oengusio' })" />
7+
<FooterPatrons />
8+
<br>
89
<p>
910
&copy; {{ thisYear }}
1011
<a href="https://esamarathon.com/">

‎components/footer/Patrons.vue

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<div>
3+
<div class="is-centered">
4+
<a href="https://www.patreon.com/oengusio" target="_blank" class="patreon-brand-container">
5+
<img src="/patreon/Digital-Patreon-Logo_FieryCoral.png" alt="Patreon Logo">
6+
<img src="/patreon/Digital-Patreon-Wordmark_White.png" alt="Patreon Wordmark">
7+
</a>
8+
</div>
9+
<i18n path="footer.patron.enjoyOengus" tag="p">
10+
<template #patronLink>
11+
<a href="https://www.patreon.com/oengusio" target="_blank">
12+
{{ $t('footer.patron.patronLink') }}
13+
</a>
14+
</template>
15+
</i18n>
16+
<p>
17+
{{ $t('footer.patron.list') }}
18+
</p>
19+
<PatronList />
20+
</div>
21+
</template>
22+
23+
<style lang="scss" scoped>
24+
@use 'sass:math' as math;
25+
$logo-height: 40px;
26+
27+
.patreon-brand-container {
28+
display: flex;
29+
height: $logo-height;
30+
// The size of the "O" or the loop in the "P" logo is 2/3rds the height
31+
margin-block: math.div(4, 3) * $logo-height;
32+
gap: math.div(2, 3) * $logo-height;
33+
justify-content: center;
34+
align-items: center;
35+
36+
img {
37+
height: $logo-height;
38+
}
39+
}
40+
</style>
41+
42+
<!-- Temporary language info to avoid having the i18n string -->
43+
<i18n>
44+
{
45+
"en-GB": {
46+
"footer": {
47+
"patron": {
48+
"enjoyOengus": "If you enjoy Oengus, please consider {patronLink}",
49+
"patronLink": "becoming a patron",
50+
"list": "Thank you to our patrons listed below whose contributions keep Oengus free for everyone"
51+
}
52+
}
53+
}
54+
}
55+
</i18n>
56+

‎components/homepage/Welcome.vue

-5
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,6 @@ export default Vue.extend({
7171
</script>
7272

7373
<style lang="scss" scoped>
74-
.is-centered {
75-
display: flex;
76-
justify-content: center;
77-
}
78-
7974
ul {
8075
list-style: disc;
8176
padding-inline-start: 20px;

‎components/patron/List.vue

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<template>
2+
<div v-if="patrons" class="field is-grouped is-grouped-multiline">
3+
<template v-if="patrons.length">
4+
<div v-for="patron in patrons" :key="patron.id" class="tags has-addons">
5+
<div class="avatar tag is-primary">
6+
<img :src="patron.image_url">
7+
</div>
8+
<a :href="`https://www.patreon.com/user?u=${patron.id}`" target="_blank" class="tag is-primary is-large">
9+
{{ patron.full_name }}
10+
</a>
11+
</div>
12+
</template>
13+
<span v-else v-html="$t('patrons.noPatrons')" />
14+
</div>
15+
</template>
16+
17+
<script lang="ts">
18+
import Vue from 'vue';
19+
import { mapActions } from 'vuex';
20+
import { PatreonState, Patron } from '~/types/api/patreon';
21+
22+
export default Vue.extend({
23+
async fetch(): Promise<void> {
24+
await Promise.allSettled([
25+
this.getPatrons(),
26+
]);
27+
},
28+
computed: {
29+
patrons(): Array<Patron>|undefined {
30+
return (this.$store.state.api.patreon as PatreonState).patrons?.patrons;
31+
},
32+
},
33+
methods: {
34+
...mapActions({
35+
getPatrons: 'api/patreon/patrons',
36+
}),
37+
},
38+
});
39+
</script>
40+
41+
<style lang="scss" scoped>
42+
// Make sure there's some space around each patron
43+
.is-grouped-multiline {
44+
gap: 1rem;
45+
justify-content: center;
46+
47+
> * {
48+
margin: 0;
49+
}
50+
}
51+
52+
// Adapted (heavily) from https://codepen.io/datchley/pen/joZvEx
53+
.avatar {
54+
display: flex;
55+
width: 40px;
56+
height: 40px;
57+
border-radius: 50%;
58+
align-items: center;
59+
justify-content: center;
60+
overflow: hidden;
61+
padding: 0;
62+
63+
> img {
64+
width: auto;
65+
max-width: 100%;
66+
height: auto;
67+
max-height: 100%;
68+
}
69+
}
70+
</style>

‎components/patron/Patron.vue

+1-67
Original file line numberDiff line numberDiff line change
@@ -6,72 +6,6 @@
66
<p>{{ $t('patrons.par1') }}</p>
77
<p v-html="$t('patrons.par2')" />
88
<br>
9-
<div v-if="patrons" class="field is-grouped is-grouped-multiline">
10-
<template v-if="patrons.length">
11-
<div v-for="patron in patrons" :key="patron.id" class="tags has-addons">
12-
<div class="avatar tag is-primary">
13-
<img :src="patron.image_url">
14-
</div>
15-
<a :href="`https://www.patreon.com/user?u=${patron.id}`" target="_blank" class="tag is-primary is-large">
16-
{{ patron.full_name }}
17-
</a>
18-
</div>
19-
</template>
20-
<span v-else v-html="$t('patrons.noPatrons')" />
21-
</div>
9+
<PatronList />
2210
</div>
2311
</template>
24-
25-
<script lang="ts">
26-
import Vue from 'vue';
27-
import { mapActions } from 'vuex';
28-
import { PatreonState, Patron } from '~/types/api/patreon';
29-
30-
export default Vue.extend({
31-
async fetch(): Promise<void> {
32-
await Promise.allSettled([
33-
this.getPatrons(),
34-
]);
35-
},
36-
computed: {
37-
patrons(): Array<Patron>|undefined {
38-
return (this.$store.state.api.patreon as PatreonState).patrons?.patrons;
39-
},
40-
},
41-
methods: {
42-
...mapActions({
43-
getPatrons: 'api/patreon/patrons',
44-
}),
45-
},
46-
});
47-
</script>
48-
49-
<style lang="scss" scoped>
50-
// Make sure there's some space around each patron
51-
.is-grouped-multiline {
52-
gap: 1rem;
53-
54-
> * {
55-
margin: 0;
56-
}
57-
}
58-
59-
// Adapted (heavily) from https://codepen.io/datchley/pen/joZvEx
60-
.avatar {
61-
display: flex;
62-
width: 40px;
63-
height: 40px;
64-
border-radius: 50%;
65-
align-items: center;
66-
justify-content: center;
67-
overflow: hidden;
68-
padding: 0;
69-
70-
> img {
71-
width: auto;
72-
max-width: 100%;
73-
height: auto;
74-
max-height: 100%;
75-
}
76-
}
77-
</style>

0 commit comments

Comments
 (0)