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

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

View File

@@ -1,12 +1,35 @@
<template lang='pug'>
.lead.text-center
h1 {{ $t('checkOutMobileApps') }}
.row.text-center
.promo_habitica(style='border-radius:25px;margin:auto')
br
.row.text-center
.col-6.offset-3
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://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')
<template lang="pug">
div
static-header
.container-fluid.text-center
.row
.col-md-6.offset-3
h1 {{ $t('checkOutMobileApps') }}
.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://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>
<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>

View File

@@ -1,38 +1,64 @@
<template lang="pug">
.row
.col-md-12
.page-header
h1 {{ $t('contactUs') }}
p
| {{ $t('reportAccountProblems') }}
| &colon;&nbsp;
a(href='mailto:admin@habitica.com') admin&commat;habitica&period;com
br
| {{ $t('reportBug') }}
| &colon;&nbsp;
a(target='_blank', href='https://github.com/HabitRPG/habitica/issues?q=is%3Aopen') GitHub
br
| {{ $t('reportCommunityIssues') }}
| &colon;&nbsp;
a(href='mailto:leslie@habitica.com') leslie&commat;habitica&period;com
br
| {{ $t('subscriptionPaymentIssues') }}
| &colon;&nbsp;
a(href='mailto:admin@habitica.com') admin&commat;habitica&period;com
br
| {{ $t('generalQuestionsSite') }}
| &colon;&nbsp;
a(target='_blank', href='http://habitica.wikia.com/wiki/The_Keep:Habitica_Help:_Ask_a_Question') Habitica Help guild
br
| {{ $t('businessInquiries') }}
| &colon;&nbsp;
a(href='mailto:vicky@habitica.com') vicky&commat;habitica&period;com
br
| {{ $t('merchandiseInquiries') }}
| &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
div
static-header
.container-fluid
.row
.col-md-6.offset-3
h1 {{ $t('contactUs') }}
p
| {{ $t('reportAccountProblems') }}
| &colon;&nbsp;
a(href='mailto:admin@habitica.com') admin&commat;habitica&period;com
br
| {{ $t('reportBug') }}
| &colon;&nbsp;
a(target='_blank', href='/groups/guild/a29da26b-37de-4a71-b0c6-48e72a900dac') Report a Bug guild
| &nbsp;or&nbsp;
a(target='_blank', href='https://github.com/HabitRPG/habitica/issues?q=is%3Aopen') GitHub
br
| {{ $t('reportCommunityIssues') }}
| &colon;&nbsp;
a(href='mailto:leslie@habitica.com') leslie&commat;habitica&period;com
br
| {{ $t('subscriptionPaymentIssues') }}
| &colon;&nbsp;
a(href='mailto:admin@habitica.com') admin&commat;habitica&period;com
br
| {{ $t('generalQuestionsSite') }}
| &colon;&nbsp;
a(target='_blank', href='/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a') Habitica Help guild
br
| {{ $t('businessInquiries') }}
| &colon;&nbsp;
a(href='mailto:vicky@habitica.com') vicky&commat;habitica&period;com
br
| {{ $t('merchandiseInquiries') }}
| &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>
<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>

View File

@@ -1,66 +1,86 @@
<template lang="pug">
.row
.col-6.offset-3
.page-header
h1 {{ $t('frequentlyAskedQuestions') }}
.faq-question(v-for='(heading, index) in headings')
h2.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }}
div(v-if='pageState[heading]', v-markdown="$t('webFaqAnswer' + index, replacements)")
hr
div(v-markdown="$t('webFaqStillNeedHelp')")
div
static-header
.container-fluid
.row
.col-md-6.offset-3
h1 {{ $t('frequentlyAskedQuestions') }}
.faq-question(v-for='(heading, index) in headings')
h2.accordion(@click='setActivePage(heading)') {{ $t(`faqQuestion${index}`) }}
div(v-if='pageState[heading]', v-markdown="$t('webFaqAnswer' + index, replacements)")
hr
p(v-markdown="$t('webFaqStillNeedHelp')")
app-footer
</template>
<style scoped>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.container-fluid {
margin-top: 56px;
}
.faq-question {
margin-bottom: 1em;
}
</style>
<script>
// @TODO: env.EMAILS.TECH_ASSISTANCE_EMAIL
const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
import markdownDirective from 'client/directives/markdown';
// @TODO: env.EMAILS.TECH_ASSISTANCE_EMAIL
const TECH_ASSISTANCE_EMAIL = 'admin@habitica.com';
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
import markdownDirective from 'client/directives/markdown';
export default {
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}`,
},
};
},
methods: {
setActivePage (page) {
this.pageState[page] = !this.pageState[page];
export default {
components: {
AppFooter,
StaticHeader,
},
},
};
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>

View File

@@ -1,32 +1,51 @@
<template lang="pug">
.row
.col-md-12
.page-header
h1 {{ $t('merch') }}
// @TODO: how do we use static images here?
.col-lg-6.col-md-6.col-sm-12(v-for="(merchant, index) in merchants")
.merch-block
img(v-if='merchant.logo' :src="`~assets/images/merch/${merchant.key}-logo.png`")
h2(v-else) {{ merchant.name }}
div
a(:href="merchant.link" target='_blank')
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')}}
div
static-header
.container-fluid
.row
.col-md-6.offset-3
h1 {{ $t('merch') }}
// @TODO: how do we use static images here?
.col-lg-6.col-md-6.col-sm-12(v-for="(merchant, index) in merchants")
.merch-block
img(v-if='merchant.logo' :src="`~assets/images/merch/${merchant.key}-logo.png`")
h2(v-else) {{ merchant.name }}
div
a(:href="merchant.link" target='_blank')
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>
<style lang='scss' scoped>
@import '~client/assets/scss/static.scss';
.container-fluid {
margin-top: 56px;
margin-bottom: 56px;
}
</style>
<script>
export default {
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'},
],
};
},
};
import AppFooter from 'client/components/appFooter';
import StaticHeader from './header.vue';
export default {
components: {
AppFooter,
StaticHeader,
},
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>

View File

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

View File

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

View File

@@ -1,10 +1,10 @@
<template lang="pug">
.row
.col-md-12
.page-header
h1 Privacy Policy
div
static-header
.container-fluid
h1 Privacy Policy
p.pagemeta
| Last updated July 27&comma; 2015
| Last updated July 27, 2015
br
small (Corrected grammar errors and updated company name)
br
@@ -298,4 +298,21 @@
br
| Email&colon;&nbsp;
a(href='mailto:admin@habitica.com') admin@habitica.com
app-footer
</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>

File diff suppressed because it is too large Load Diff

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!",
"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.",
"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!",