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

website/client/components/static/app.vue

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

website/client/components/static/contact.vue

@@ -1,8 +1,11 @@
 <template lang="pug">
+  div
+    static-header
+    .container-fluid
       .row
-    .col-md-12
+        .col-md-6.offset-3
-      .page-header
           h1 {{ $t('contactUs') }}
+
           p
             | {{ $t('reportAccountProblems') }}
             | &colon;&nbsp;
@@ -10,6 +13,8 @@
             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') }}
@@ -22,7 +27,7 @@
             br
             | {{ $t('generalQuestionsSite') }}
             | &colon;&nbsp;
-        a(target='_blank', href='http://habitica.wikia.com/wiki/The_Keep:Habitica_Help:_Ask_a_Question') Habitica Help guild
+            a(target='_blank', href='/groups/guild/5481ccf3-5d2d-48a9-a871-70a7380cee5a') Habitica Help guild
             br
             | {{ $t('businessInquiries') }}
             | &colon;&nbsp;
@@ -35,4 +40,25 @@
             | {{ $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>

website/client/components/static/faq.vue

@@ -1,27 +1,42 @@
 <template lang="pug">
-.row
+  div
-  .col-6.offset-3
+    static-header
-    .page-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
-    div(v-markdown="$t('webFaqStillNeedHelp')")
+          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
+  // @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 {
+    components: {
+      AppFooter,
+      StaticHeader,
+    },
     directives: {
       markdown: markdownDirective,
     },
@@ -55,6 +70,11 @@ export default {
           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: {
@@ -62,5 +82,5 @@ export default {
         this.pageState[page] = !this.pageState[page];
       },
     },
-};
+  };
 </script>

website/client/components/static/merch.vue

@@ -1,7 +1,9 @@
 <template lang="pug">
+  div
+    static-header
+    .container-fluid
       .row
-    .col-md-12
+        .col-md-6.offset-3
-      .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")
@@ -13,10 +15,27 @@
                   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 {
+  import AppFooter from 'client/components/appFooter';
+  import StaticHeader from './header.vue';
+
+  export default {
+    components: {
+      AppFooter,
+      StaticHeader,
+    },
     data () {
       return {
         merchants: [
@@ -28,5 +47,5 @@ export default {
         ],
       };
     },
-};
+  };
 </script>

website/client/components/static/overview.vue

@@ -1,21 +1,37 @@
 <template lang="pug">
+  div
+    static-header
+    .container-fluid
       .row
-    .col-6.offset-3
+        .col-md-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')")
+    app-footer
 </template>
 
-<script>
+<style lang='scss' scoped>
-import markdownDirective from 'client/directives/markdown';
+  @import '~client/assets/scss/static.scss';
 
-export default {
+  .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,
     },
@@ -24,5 +40,5 @@ export default {
         stepsNum: ['1', '2', '3'],
       };
     },
-};
+  };
 </script>

website/client/components/static/pressKit.vue

@@ -1,5 +1,7 @@
 <template lang="pug">
-  div.jumbotron
+  div
+    static-header
+    .container-fluid
       h1 {{ $t('presskit') }}
         p {{ $t('presskitText', { pressEnquiryEmail : PRESS_ENQUIRY_EMAIL }) }}
         p
@@ -15,14 +17,26 @@
             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>
+<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>
+  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,
@@ -73,5 +87,5 @@ export default {
         },
       };
     },
-};
+  };
 </script>

website/client/components/static/privacy.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-  .row
+  div
-    .col-md-12
+    static-header
-      .page-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>

website/client/components/static/terms.vue

@@ -1,10 +1,10 @@
 <template lang="pug">
-  .row
+  div
-   .col-md-12
+    static-header
-     .page-header
+    .container-fluid
       h1 Terms of Use
-     p
+      p.pagemeta
-       | Last updated July 27&comma; 2015
+        | Last updated July 27, 2015
         br
         small (Corrected minimum age requirement to under 13 years of age per COPPA)
         br
@@ -567,4 +567,21 @@
         br
         | If you have any questions about these Terms of Service&comma; please contact
         | us at <a href='mailto:admin@habitica.com'>admin@habitica.com</a>
+    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>

website/common/locales/en/faq.json

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