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

2025-12-17 22:57:21 +01:00 · 2017-08-28 08:05:37 +10:00
parent 9436c83919
commit fd05286e1a
9 changed files with 943 additions and 791 deletions
--- a/website/client/components/static/app.vue
+++ b/website/client/components/static/app.vue
@@ -1,12 +1,35 @@
-<template lang='pug'>
-  .lead.text-center
+<template lang="pug">
+  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')
-    br
-    .row.text-center
-      .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://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>
--- a/website/client/components/static/contact.vue
+++ b/website/client/components/static/contact.vue
@@ -1,8 +1,11 @@
 <template lang="pug">
+  div
+    static-header
+    .container-fluid
      .row
-    .col-md-12
-      .page-header
+        .col-md-6.offset-3
          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>
--- a/website/client/components/static/faq.vue
+++ b/website/client/components/static/faq.vue
@@ -1,16 +1,25 @@
 <template lang="pug">
+  div
+    static-header
+    .container-fluid
      .row
-  .col-6.offset-3
-    .page-header
+        .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;
  }
@@ -19,9 +28,15 @@
 <script>
  // @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 {
+    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: {
--- a/website/client/components/static/merch.vue
+++ b/website/client/components/static/merch.vue
@@ -1,7 +1,9 @@
 <template lang="pug">
+  div
+    static-header
+    .container-fluid
      .row
-    .col-md-12
-      .page-header
+        .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")
@@ -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>
+  import AppFooter from 'client/components/appFooter';
+  import StaticHeader from './header.vue';
+
  export default {
+    components: {
+      AppFooter,
+      StaticHeader,
+    },
    data () {
      return {
        merchants: [
--- a/website/client/components/static/overview.vue
+++ b/website/client/components/static/overview.vue
@@ -1,21 +1,37 @@
 <template lang="pug">
+  div
+    static-header
+    .container-fluid
      .row
-    .col-6.offset-3
-      .page-header
+        .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>

+<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';
  import markdownDirective from 'client/directives/markdown';

  export default {
+    components: {
+      AppFooter,
+      StaticHeader,
+    },
    directives: {
      markdown: markdownDirective,
    },
--- a/website/client/components/static/pressKit.vue
+++ b/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>

+<style lang='scss' scoped>
+  @import '~client/assets/scss/static.scss';
+</style>
+
 <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,
--- a/website/client/components/static/privacy.vue
+++ b/website/client/components/static/privacy.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
-  .row
-    .col-md-12
-      .page-header
+  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>
--- a/website/client/components/static/terms.vue
+++ b/website/client/components/static/terms.vue
@@ -1,10 +1,10 @@
 <template lang="pug">
-  .row
-   .col-md-12
-     .page-header
+  div
+    static-header
+    .container-fluid
      h1 Terms of Use
-     p
-       | Last updated July 27&comma; 2015
+      p.pagemeta
+        | 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>
--- a/website/common/locales/en/faq.json
+++ b/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!",