krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 22:57:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

add header, footer, etc to various static pages for the new client (#8996)

Browse Source
This commit is contained in:
Alys
2017-08-28 08:05:37 +10:00
committed by GitHub
parent 9436c83919
commit fd05286e1a
9 changed files with 943 additions and 791 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
website/client/components/static/app.vue
View File

@@ -1,12 +1,35 @@
<template lang='pug'> <template lang="pug">
.lead.text-center div
h1 {{ $t('checkOutMobileApps') }} static-header
.row.text-center .container-fluid.text-center
.promo_habitica(style='border-radius:25px;margin:auto') .row
br .col-md-6.offset-3
.row.text-center h1 {{ $t('checkOutMobileApps') }}
.col-6.offset-3 .promo_habitica(style='border-radius:25px;margin:auto;margin-bottom:30px')
a(href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1')
img(alt='Get it on Google Play', src='https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png', style='width:139px;height:45px;image-rendering:auto;vertical-align:top') a(href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1&utm_source=global_co&utm_medium=prtnr&utm_content=Mar2515&utm_campaign=PartBadge&pcampaignid=MKT-AC-global-none-all-co-pr-py-PartBadges-Oct1515-1')
a(href='https://geo.itunes.apple.com/us/app/habitica/id994882113?mt=8', style='display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg#svgView) no-repeat;background-size:100%;width:152px;height:45px;margin-left:20px;image-rendering:auto') img(alt='Get it on Google Play', src='https://play.google.com/intl/en_us/badges/images/apps/en-play-badge.png', style='width:139px;height:45px;image-rendering:auto;vertical-align:top')
a(href='https://geo.itunes.apple.com/us/app/habitica/id994882113?mt=8', style='display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg#svgView) no-repeat;background-size:100%;width:152px;height:45px;margin-left:20px;image-rendering:auto')
app-footer
</template> </template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.container-fluid {
margin-top: 56px;
margin-bottom: 24px;
}
</style>
<script>
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
StaticHeader,
},
};
</script>

98
website/client/components/static/contact.vue
View File

@@ -1,38 +1,64 @@
<template lang="pug"> <template lang="pug">
.row div
.col-md-12 static-header
.page-header .container-fluid
h1 {{ $t('contactUs') }} .row
p .col-md-6.offset-3
| {{ $t('reportAccountProblems') }} h1 {{ $t('contactUs') }}
| &colon;&nbsp;
a(href='mailto:admin@habitica.com') admin&commat;habitica&period;com p
br | {{ $t('reportAccountProblems') }}
| {{ $t('reportBug') }} | &colon;&nbsp;
| &colon;&nbsp; a(href='mailto:admin@habitica.com') admin&commat;habitica&period;com
a(target='_blank', href='https://github.com/HabitRPG/habitica/issues?q=is%3Aopen') GitHub br
br | {{ $t('reportBug') }}
| {{ $t('reportCommunityIssues') }} | &colon;&nbsp;
| &colon;&nbsp; a(target='_blank', href='/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac') Report a Bug guild
a(href='mailto:leslie@habitica.com') leslie&commat;habitica&period;com | &nbsp;or&nbsp;
br a(target='_blank', href='https://github.com/HabitRPG/habitica/issues?q=is%3Aopen') GitHub
| {{ $t('subscriptionPaymentIssues') }} br
| &colon;&nbsp; | {{ $t('reportCommunityIssues') }}
a(href='mailto:admin@habitica.com') admin&commat;habitica&period;com | &colon;&nbsp;
br a(href='mailto:leslie@habitica.com') leslie&commat;habitica&period;com
| {{ $t('generalQuestionsSite') }} br
| &colon;&nbsp; | {{ $t('subscriptionPaymentIssues') }}
a(target='_blank', href='http://habitica.wikia.com/wiki/The_Keep:Habitica_Help:_Ask_a_Question') Habitica Help guild | &colon;&nbsp;
br a(href='mailto:admin@habitica.com') admin&commat;habitica&period;com
| {{ $t('businessInquiries') }} br
| &colon;&nbsp; | {{ $t('generalQuestionsSite') }}
a(href='mailto:vicky@habitica.com') vicky&commat;habitica&period;com | &colon;&nbsp;
br a(target='_blank', href='/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a') Habitica Help guild
| {{ $t('merchandiseInquiries') }} br
| &colon;&nbsp; | {{ $t('businessInquiries') }}
a(href='mailto:store@habitica.com') store&commat;habitica&period;com | &colon;&nbsp;
br a(href='mailto:vicky@habitica.com') vicky&commat;habitica&period;com
| {{ $t('marketingInquiries') }} br
| &colon;&nbsp; | {{ $t('merchandiseInquiries') }}
a(href='mailto:leslie@habitica.com') leslie&commat;habitica&period;com | &colon;&nbsp;
a(href='mailto:store@habitica.com') store&commat;habitica&period;com
br
| {{ $t('marketingInquiries') }}
| &colon;&nbsp;
a(href='mailto:leslie@habitica.com') leslie&commat;habitica&period;com
app-footer
</template> </template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.container-fluid {
margin-top: 56px;
}
</style>
<script>
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
StaticHeader,
},
};
</script>

128
website/client/components/static/faq.vue
View File

@@ -1,66 +1,86 @@
<template lang="pug"> <template lang="pug">
.row div
.col-6.offset-3 static-header
.page-header .container-fluid
h1 {{ $t('frequentlyAskedQuestions') }} .row
.faq-question(v-for='(heading, index) in headings') .col-md-6.offset-3
h2.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }} h1 {{ $t('frequentlyAskedQuestions') }}
div(v-if='pageState[heading]', v-markdown="$t('webFaqAnswer' + index, replacements)") .faq-question(v-for='(heading, index) in headings')
hr h2.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }}
div(v-markdown="$t('webFaqStillNeedHelp')") div(v-if='pageState[heading]', v-markdown="$t('webFaqAnswer' + index, replacements)")
hr
p(v-markdown="$t('webFaqStillNeedHelp')")
app-footer
</template> </template>
<style scoped> <style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.container-fluid {
margin-top: 56px;
}
.faq-question { .faq-question {
margin-bottom: 1em; margin-bottom: 1em;
} }
</style> </style>
<script> <script>
// @TODO: env.EMAILS.TECH_ASSISTANCE_EMAIL // @TODO: env.EMAILS.TECH_ASSISTANCE_EMAIL
const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com'; const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
import markdownDirective from 'client/directives/markdown'; import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
import markdownDirective from 'client/directives/markdown';
export default { export default {
directives: { components: {
markdown: markdownDirective, AppFooter,
}, StaticHeader,
data () {
let headings = [
'overview',
'set-up-tasks',
'sample-tasks',
'task-color',
'health',
'party-with-friends',
'pets-mounts',
'character-classes',
'blue-mana-bar',
'monsters-quests',
'gems',
'bugs-features',
'world-boss',
];
let pageState = {};
for (let index in headings) {
let heading = headings[index];
pageState[heading] = false;
}
return {
pageState,
headings,
replacements: {
techAssistanceEmail: TECH_ASSISTANCE_EMAIL,
wikiTechAssistanceEmail: `mailto:${TECH_ASSISTANCE_EMAIL}`,
},
};
},
methods: {
setActivePage (page) {
this.pageState[page] = !this.pageState[page];
}, },
}, directives: {
}; markdown: markdownDirective,
},
data () {
let headings = [
'overview',
'set-up-tasks',
'sample-tasks',
'task-color',
'health',
'party-with-friends',
'pets-mounts',
'character-classes',
'blue-mana-bar',
'monsters-quests',
'gems',
'bugs-features',
'world-boss',
];
let pageState = {};
for (let index in headings) {
let heading = headings[index];
pageState[heading] = false;
}
return {
pageState,
headings,
replacements: {
techAssistanceEmail: TECH_ASSISTANCE_EMAIL,
wikiTechAssistanceEmail: `mailto:${TECH_ASSISTANCE_EMAIL}`,
},
// @TODO webFaqStillNeedHelp: {
// linkStart: '[',
// linkEnd: '](/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a)',
// },
// "webFaqStillNeedHelp": "If you have a question that isn't on this list or on the [Wiki FAQ](http://habitica.wikia.com/wiki/FAQ), come ask in the <%= linkStart %>Habitica Help guild<%= linkEnd %>! We're happy to help."
};
},
methods: {
setActivePage (page) {
this.pageState[page] = !this.pageState[page];
},
},
};
</script> </script>

73
website/client/components/static/merch.vue
View File

@@ -1,32 +1,51 @@
<template lang="pug"> <template lang="pug">
.row div
.col-md-12 static-header
.page-header .container-fluid
h1 {{ $t('merch') }} .row
// @TODO: how do we use static images here? .col-md-6.offset-3
.col-lg-6.col-md-6.col-sm-12(v-for="(merchant, index) in merchants") h1 {{ $t('merch') }}
.merch-block // @TODO: how do we use static images here?
img(v-if='merchant.logo' :src="`~assets/images/merch/${merchant.key}-logo.png`") .col-lg-6.col-md-6.col-sm-12(v-for="(merchant, index) in merchants")
h2(v-else) {{ merchant.name }} .merch-block
div img(v-if='merchant.logo' :src="`~assets/images/merch/${merchant.key}-logo.png`")
a(:href="merchant.link" target='_blank') h2(v-else) {{ merchant.name }}
img.img-rendering-auto(:src="`~assets/images/merch/${merchant.key}.png`") div
p {{ $t('merch-' + merchant.key + '-summary') }} a(:href="merchant.link" target='_blank')
a.btn.btn-primary(:href="merchant.link" target='_blank') {{$t('merch-' + merchant.key + '-goto')}} img.img-rendering-auto(:src="`~assets/images/merch/${merchant.key}.png`")
p {{ $t('merch-' + merchant.key + '-summary') }}
a.btn.btn-primary(:href="merchant.link" target='_blank') {{$t('merch-' + merchant.key + '-goto')}}
app-footer
</template> </template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.container-fluid {
margin-top: 56px;
margin-bottom: 56px;
}
</style>
<script> <script>
export default { import AppFooter from 'client/components/appFooter';
data () { import StaticHeader from './header.vue';
return {
merchants: [ export default {
{key: 'teespring', logo: true, name: 'Teespring', link: 'https://teespring.com/habitica-gryphon-t-shirt'}, components: {
{key: 'teespring-eu', logo: true, name: 'Teespring (EU)', link: 'https://teespring.com/habitica-gryphon-t-shirt_eu'}, AppFooter,
{key: 'teespring-mug', logo: true, name: 'Teespring', link: 'https://teespring.com/shop/habitica-gryphon-mug'}, StaticHeader,
{key: 'teespring-mug-eu', logo: true, name: 'Teespring (EU)', link: 'https://teespring.com/shop/habitica-hydration-mug-eu'}, },
{key: 'stickermule', logo: true, name: 'Stickermule', link: 'https://www.stickermule.com/uk/marketplace/9317-habitica-gryphon-sticker'}, data () {
], return {
}; merchants: [
}, {key: 'teespring', logo: true, name: 'Teespring', link: 'https://teespring.com/habitica-gryphon-t-shirt'},
}; {key: 'teespring-eu', logo: true, name: 'Teespring (EU)', link: 'https://teespring.com/habitica-gryphon-t-shirt_eu'},
{key: 'teespring-mug', logo: true, name: 'Teespring', link: 'https://teespring.com/shop/habitica-gryphon-mug'},
{key: 'teespring-mug-eu', logo: true, name: 'Teespring (EU)', link: 'https://teespring.com/shop/habitica-hydration-mug-eu'},
{key: 'stickermule', logo: true, name: 'Stickermule', link: 'https://www.stickermule.com/uk/marketplace/9317-habitica-gryphon-sticker'},
],
};
},
};
</script> </script>

62
website/client/components/static/overview.vue
View File

@@ -1,28 +1,44 @@
<template lang="pug"> <template lang="pug">
.row div
.col-6.offset-3 static-header
.page-header .container-fluid
h1 {{ $t('overview') }} .row
p {{ $t('needTips') }} .col-md-6.offset-3
h1 {{ $t('overview') }}
div(v-for='step in stepsNum') p {{ $t('needTips') }}
h3 {{ $t('step'+step) }} div(v-for='step in stepsNum')
p(v-markdown="$t('webStep'+step+'Text')") h3 {{ $t('step'+step) }}
hr p(v-markdown="$t('webStep'+step+'Text')")
p(v-markdown="$t('overviewQuestions')") hr
p(v-markdown="$t('overviewQuestions')")
app-footer
</template> </template>
<script> <style lang='scss' scoped>
import markdownDirective from 'client/directives/markdown'; @import '~client/assets/scss/static.scss';
export default { .container-fluid {
directives: { margin-top: 56px;
markdown: markdownDirective, }
}, </style>
data () {
return { <script>
stepsNum: ['1', '2', '3'], import AppFooter from 'client/components/appFooter';
}; import StaticHeader from './header.vue';
}, import markdownDirective from 'client/directives/markdown';
};
export default {
components: {
AppFooter,
StaticHeader,
},
directives: {
markdown: markdownDirective,
},
data () {
return {
stepsNum: ['1', '2', '3'],
};
},
};
</script> </script>

146
website/client/components/static/pressKit.vue
View File

@@ -1,77 +1,91 @@
<template lang="pug"> <template lang="pug">
div.jumbotron div
h1 {{ $t('presskit') }} static-header
p {{ $t('presskitText', { pressEnquiryEmail : PRESS_ENQUIRY_EMAIL }) }} .container-fluid
p h1 {{ $t('presskit') }}
a.btn.btn-lg.btn-success(href='/presskit/presskit.zip') presskit.zip p {{ $t('presskitText', { pressEnquiryEmail : PRESS_ENQUIRY_EMAIL }) }}
p
a.btn.btn-lg.btn-success(href='/presskit/presskit.zip') presskit.zip
div(v-for='(images, category) in imgs') div(v-for='(images, category) in imgs')
h2 {{ $t('pk' + category) }} h2 {{ $t('pk' + category) }}
div(v-if='Array.isArray(images)') div(v-if='Array.isArray(images)')
div(v-for='img in images')
img.img-rendering-auto.press-img(:src="`/presskit/${category}/${img}.png`")
div(v-else)
div(v-for='(images, category) in images')
h3 {{ $t('pk' + category) }}
div(v-for='img in images') div(v-for='img in images')
img.img-rendering-auto.press-img(:src="`/presskit/#$category}/${cat}/${img}.png`") img.img-rendering-auto.press-img(:src="`/presskit/${category}/${img}.png`")
div(v-else)
div(v-for='(images, category) in images')
h3 {{ $t('pk' + category) }}
div(v-for='img in images')
img.img-rendering-auto.press-img(:src="`/presskit/#$category}/${cat}/${img}.png`")
app-footer
</template> </template>
<script> <style lang='scss' scoped>
// @TODO: How to use images? @import '~client/assets/scss/static.scss';
// @TODO: EMAILS.PRESS_ENQUIRY_EMAIL </style>
const PRESS_ENQUIRY_EMAIL = 'admin@habitica.com';
export default { <script>
data () { import AppFooter from 'client/components/appFooter';
return { import StaticHeader from './header.vue';
PRESS_ENQUIRY_EMAIL,
imgs: { // @TODO: How to use images?
Promo: [ // @TODO: EMAILS.PRESS_ENQUIRY_EMAIL
'Promo', const PRESS_ENQUIRY_EMAIL = 'admin@habitica.com';
'Promo - Thin',
], export default {
Logo: [ components: {
'Icon with Text', AppFooter,
'Habitica Gryphon', StaticHeader,
'iOS', },
'Android', data () {
], return {
Boss: [ PRESS_ENQUIRY_EMAIL,
'Basi-List', imgs: {
'Stagnant Dishes', Promo: [
'SnackLess Monster', 'Promo',
'Laundromancer', 'Promo - Thin',
'Necro-Vice',
'Battling the Ghost Stag',
'Dread Drag\'on of Dilatory',
],
Samples: {
Website: [
'Tasks Page',
'Equipment',
'Market',
'Guilds',
'Challenges',
], ],
iOS: [ Logo: [
'Tasks Page', 'Icon with Text',
'Level Up', 'Habitica Gryphon',
'Pets', 'iOS',
'Party', 'Android',
'Boss',
], ],
Android: [ Boss: [
'User', 'Basi-List',
'Tasks Page', 'Stagnant Dishes',
'Reward', 'SnackLess Monster',
'Level Up', 'Laundromancer',
'Tavern', 'Necro-Vice',
'Party', 'Battling the Ghost Stag',
'Dread Drag\'on of Dilatory',
], ],
Samples: {
Website: [
'Tasks Page',
'Equipment',
'Market',
'Guilds',
'Challenges',
],
iOS: [
'Tasks Page',
'Level Up',
'Pets',
'Party',
'Boss',
],
Android: [
'User',
'Tasks Page',
'Reward',
'Level Up',
'Tavern',
'Party',
],
},
}, },
}, };
}; },
}, };
};
</script> </script>

27
website/client/components/static/privacy.vue
View File

@@ -1,10 +1,10 @@
<template lang="pug"> <template lang="pug">
.row div
.col-md-12 static-header
.page-header .container-fluid
h1 Privacy Policy h1 Privacy Policy
p.pagemeta p.pagemeta
| Last updated July 27&comma; 2015 | Last updated July 27, 2015
br br
small (Corrected grammar errors and updated company name) small (Corrected grammar errors and updated company name)
br br
@@ -298,4 +298,21 @@
br br
| Email&colon;&nbsp; | Email&colon;&nbsp;
a(href='mailto:admin@habitica.com') admin@habitica.com a(href='mailto:admin@habitica.com') admin@habitica.com
app-footer
</template> </template>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
</style>
<script>
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
StaticHeader,
},
};
</script>

1153
website/client/components/static/terms.vue
View File

File diff suppressed because it is too large Load Diff

2
website/common/locales/en/faq.json
View File

@@ -57,7 +57,7 @@
"webFaqAnswer10": "Gems are [purchased with real money](https://habitica.com/#/options/settings/subscription), although [subscribers](https://habitica.com/#/options/settings/subscription) can purchase them with Gold. When people subscribe or buy Gems, they are helping us to keep the site running. We're very grateful for their support! In addition to buying Gems directly or becoming a subscriber, there are two other ways players can gain Gems:\n* Win a Challenge that has been set up by another player. Go to Challenges > Discover Challenges to join some.\n * Contribute your skills to the Habitica project. See this wiki page for more details: [Contributing to Habitica](http://habitica.wikia.com/wiki/Contributing_to_Habitica). Keep in mind that items purchased with Gems do not offer any statistical advantages, so players can still make use of the site without them!", "webFaqAnswer10": "Gems are [purchased with real money](https://habitica.com/#/options/settings/subscription), although [subscribers](https://habitica.com/#/options/settings/subscription) can purchase them with Gold. When people subscribe or buy Gems, they are helping us to keep the site running. We're very grateful for their support! In addition to buying Gems directly or becoming a subscriber, there are two other ways players can gain Gems:\n* Win a Challenge that has been set up by another player. Go to Challenges > Discover Challenges to join some.\n * Contribute your skills to the Habitica project. See this wiki page for more details: [Contributing to Habitica](http://habitica.wikia.com/wiki/Contributing_to_Habitica). Keep in mind that items purchased with Gems do not offer any statistical advantages, so players can still make use of the site without them!",
"faqQuestion11": "How do I report a bug or request a feature?", "faqQuestion11": "How do I report a bug or request a feature?",
"iosFaqAnswer11": "You can report a bug, request a feature, or send feedback under Menu > Report a Bug and Menu > Send Feedback! We'll do everything we can to assist you.", "iosFaqAnswer11": "You can report a bug, request a feature, or send feedback under Menu > About > Report a Bug and Menu > About > Send Feedback! We'll do everything we can to assist you.",
"androidFaqAnswer11": "You can report a bug, request a feature, or send feedback under About > Report a Bug and About > Send us Feedback! We'll do everything we can to assist you.", "androidFaqAnswer11": "You can report a bug, request a feature, or send feedback under About > Report a Bug and About > Send us Feedback! We'll do everything we can to assist you.",
"webFaqAnswer11": "To report a bug, go to [Help > Report a Bug](https://habitica.com/#/options/groups/guilds/a29da26b-37de-4a71-b0c6-48e72a900dac) and read the points above the chat box. If you're unable to log in to Habitica, send your login details (not your password!) to [<%= techAssistanceEmail %>](<%= wikiTechAssistanceEmail %>). Don't worry, we'll get you fixed up soon! Feature requests are collected on Trello. Go to [Help > Request a Feature](https://trello.com/c/odmhIqyW/440-read-first-table-of-contents) and follow the instructions. Ta-da!", "webFaqAnswer11": "To report a bug, go to [Help > Report a Bug](https://habitica.com/#/options/groups/guilds/a29da26b-37de-4a71-b0c6-48e72a900dac) and read the points above the chat box. If you're unable to log in to Habitica, send your login details (not your password!) to [<%= techAssistanceEmail %>](<%= wikiTechAssistanceEmail %>). Don't worry, we'll get you fixed up soon! Feature requests are collected on Trello. Go to [Help > Request a Feature](https://trello.com/c/odmhIqyW/440-read-first-table-of-contents) and follow the instructions. Ta-da!",