Redesign: Static and Modal Fixes (#9007)

* fix(static-page): Community Manager links

* feat(modals): Bailey news

* feat(footer): link to Hall of Heroes
Also makes a number of strings translatable instead of hardcoded.

* fix(notifications): simplify drop messages

website/client/components/achievements/newStuff.vue

@@ -1,29 +1,67 @@
 <template lang="pug">
-  b-modal#new-stuff(v-if='user.flags.newStuff', :title="$t('newStuff')", size='lg', :hide-footer="true")
+  b-modal#new-stuff(
-    .modal-body.new-stuff-modal
+    v-if='user.flags.newStuff',
-      h3.text-center
+    size='lg',
-        | {{ this.$t('newStuff') }} by&nbsp;
+    :hide-header='true',
-        a(target='_blank', href='https://twitter.com/Mihakuu') Bailey
+    :hide-footer='true',
-      div(:class="baileyClass")
+  )
-      div(v-html='latestBaileyMessage')
+    .modal-body
+      .media
+        .media-body
+          .media
+            .align-self-center.right-margin(:class='baileyClass')
+            .media-body
+              h1.align-self-center(v-markdown='$t("newStuff")')
+          h2 8/30/2017 - LAST CHANCE FOR LAVA WARRIOR SET AND EMBER HATCHING POTIONS
+          hr
+          .media
+            .promo_mystery_201708.right-margin.align-self-center
+            .media-body
+              h3 Last Chance for Lava Warrior Set
+              p Reminder: you only have three days to <a href='/settings/subscription'>subscribe</a> and receive the Lava Warrior Set! Subscribing also lets you buy gems for gold. The longer your subscription, the more gems you get!
+              p Thanks so much for your support! You help keep Habitica running.
+              p.small.muted by Lemoness
+          h3 Last Chance for Ember Hatching Potions
+          p Reminder: there are three days left to <a href='/shops/market'>buy Ember Hatching Potions</a>! If they come back, it won't be until next year at the earliest, so don't delay!
+          p.small.muted by Balduranne, tricksy.fox, and SabreCat
+        .promo_ember_potions.left-margin.align-self-center
     .modal-footer
       a.btn.btn-info(href='http://habitica.wikia.com/wiki/Whats_New', target='_blank') {{ this.$t('newsArchive') }}
       button.btn.btn-default(@click='close()') {{ this.$t('cool') }}
       button.btn.btn-warning(@click='dismissAlert();') {{ this.$t('dismissAlert') }}
 </template>
 
+<style lang='scss' scoped>
+  @import '~client/assets/scss/static.scss';
+
+  .modal-body {
+    padding-top: 2em;
+  }
+
+  .left-margin {
+    margin-left: 1em;
+  }
+
+  .right-margin {
+    margin-right: 1em;
+  }
+</style>
+
 <script>
-import axios from 'axios';
 import bModal from 'bootstrap-vue/lib/components/modal';
 import { mapState } from 'client/libs/store';
+import markdown from 'client/directives/markdown';
 
 export default {
   components: {
     bModal,
   },
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
   data () {
     let worldDmg = {
-      bailey: true,
+      bailey: false,
     };
 
     return {
@@ -33,12 +71,8 @@ export default {
       },
     };
   },
-  computed: {
+  directives: {
-    ...mapState({user: 'user.data'}),
+    markdown,
-    async latestBaileyMessage () {
-      let message = await axios.get('/new-stuff');
-      return message;
-    },
   },
   methods: {
     close () {

website/client/components/appFooter.vue

@@ -6,62 +6,62 @@
     .row
       .col-2
         h3
-          a(href='https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8', target='_blank') iOS App
+          a(href='https://itunes.apple.com/us/app/habitica/id994882113?ls=1&mt=8', target='_blank') {{ $t('mobileIOS') }}
         h3
-          a(href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica', target='_blank') Android App
+          a(href='https://play.google.com/store/apps/details?id=com.habitrpg.android.habitica', target='_blank') {{ $t('mobileAndroid') }}
       .col-2
         h3 Company
         ul
           li
-            a(href='/static/features') How it Works
+            a(href='/static/features') {{ $t('companyAbout') }}
           li
-            a(href='https://habitica.wordpress.com/') Blog
+            a(href='https://habitica.wordpress.com/', target='_blank') {{ $t('companyBlog') }}
           li
-            a(href='http://blog.habitrpg.com/') Tumblr
+            a(href='http://blog.habitrpg.com/', target='_blank') {{ $t('Tumblr') }}
           li
-            a(href='/static/faq') FAQ
+            a(href='/static/faq') {{ $t('FAQ') }}
           li
-            a(href='/static/old-news') News
+            a(href='http://habitica.wikia.com/wiki/Whats_New', target='_blank') {{ $t('oldNews') }}
           li
-            a(href='/static/merch') Merchandise
+            a(href='/static/merch') {{ $t('merch') }}
           li
-            a(href='/static/press-kit') Press Kit
+            a(href='/static/press-kit') {{ $t('presskit') }}
           li
-            a(href='/static/contact') Contact Us
+            a(href='/static/contact') {{ $t('contactUs') }}
       .col-2
         h3 Community
         ul
           li
-            a(href='/static/community-guidelines') Community Guidelines
+            a(href='/static/community-guidelines') {{ $t('communityGuidelines') }}
           li
-            router-link(to='/groups/a29da26b-37de-4a71-b0c6-48e72a900dac') Submit a Bug
+            a(href='/hall') {{ $t('hall') }}
           li
-            a(href='https://trello.com/c/odmhIqyW/440-read-first-table-of-contents', target='_blank') Request a Feature
+            router-link(to='/groups/a29da26b-37de-4a71-b0c6-48e72a900dac') {{ $t('reportBug') }}
           li
-            a(href='http://habitica.wikia.com/wiki/Extensions,_Add-Ons,_and_Customizations', target='_blank') Add-Ons & Extensions
+            a(href='https://trello.com/c/odmhIqyW/440-read-first-table-of-contents', target='_blank') {{ $t('requestFeature') }}
           li
-            a(href='http://habitica.wikia.com/wiki/Special:Forum', target='_blank') Forum
+            a(v-html='$t("communityExtensions")')
           li
-            a(href='https://www.kickstarter.com/projects/lefnire/habitrpg-mobile', target='_blank') Kickstarter
+            a(v-html='$t("communityForum")')
           li
-            a(href='https://www.facebook.com/Habitica', target='_blank') Facebook
+            a(href='https://www.facebook.com/Habitica', target='_blank') {{ $t('communityFacebook') }}
           li
-            a(href='https://www.reddit.com/r/habitrpg/', target='_blank') Reddit
+            a(href='https://www.reddit.com/r/habitrpg/', target='_blank') {{ $t('communityReddit') }}
       .col-6
         .row
           .col-6
             h3 Developers
             ul
               li
-                a(href='/apidoc', target='_blank') APIv3
+                a(href='/apidoc', target='_blank') {{ $t('APIv3') }}
               li
-                a(href='http://data.habitrpg.com/?uuid=', target='_blank') Data Display Tool
+                a(href='http://data.habitrpg.com/?uuid=', target='_blank') {{ $t('dataDisplayTool') }}
               li
-                a(href='http://habitica.wikia.com/wiki/Guidance_for_Blacksmiths', target='_blank') Guidance for Blacksmiths
+                a(href='http://habitica.wikia.com/wiki/Guidance_for_Blacksmiths', target='_blank') {{ $t('guidanceForBlacksmiths') }}
               li
-                a(href='http://devs.habitica.com/', target='_blank') The Forge - Developer Blog
+                a(href='http://devs.habitica.com/', target='_blank') {{ $t('devBlog') }}
           .col-6.social
-            h3 Social
+            h3 {{ $t('footerSocial') }}
             .social-circle
               a(href='https://twitter.com/habitica', target='_blank')
                 .social-icon.svg-icon(v-html='icons.twitter')
@@ -72,12 +72,11 @@
               a(href='https://www.facebook.com/Habitica', target='_blank')
                 .social-icon.facebook.svg-icon(v-html='icons.facebook')
         .row
-          .col-10
+          .col-10 {{ $t('donateText3') }}
-            | We’re an open source project that depends on our users for support. The money you donate helps us keep the servers running, maintain a small staff, develop new features, and provide incentives for our volunteers.
           .col-2
             button.btn.btn-donate(@click='donate()')
               .svg-icon.heart(v-html='icons.heart')
-              .text Donate
+              .text {{ $t('companyDonate') }}
     .row
       hr.col-12
     .row
@@ -105,9 +104,9 @@
         .logo
       .col-4.text-right
         span
-          router-link(to="/static/privacy") Privacy Policy
+          router-link(to="/static/privacy") {{ $t('privacy') }}
         span.terms-link
-          router-link(to="/static/terms") Terms of Use
+          router-link(to="/static/terms") {{ $t('terms') }}
 </template>
 
 <style lang="scss" scoped>

website/client/components/static/communityGuidelines.vue

@@ -270,7 +270,7 @@
         li(v-html="$t('commGuideList13D')")
 
       h2#final {{ $t('commGuideHeadingFinal') }}
-      p(v-html="$t('commGuidePara067', { hrefCommunityManagerEmail : `<a href='mailto: ${COMMUNITY_MANAGER_EMAIL}'>${COMMUNITY_MANAGER_EMAIL}</a>`})")
+      p(v-html="$t('commGuidePara067', { hrefCommunityManagerEmail })")
       p {{ $t('commGuidePara068') }}
 
       h2#links {{ $t('commGuideHeadingLinks') }}
@@ -339,7 +339,7 @@
     },
     data () {
       return {
-        COMMUNITY_MANAGER_EMAIL,
+        hrefCommunityManagerEmail: `<a href='mailto: ${COMMUNITY_MANAGER_EMAIL}'>${COMMUNITY_MANAGER_EMAIL}</a>`,
       };
     },
   };

website/client/components/static/oldNew.vue

@@ -1,5 +0,0 @@
-<template lang='pug'>
-.static-old-news
-    // include ../shared/new-stuff
-    // +oldNews()
-</template>

website/client/components/tasks/task.vue

@@ -429,7 +429,6 @@ export default {
 
       if (drop) {
         let text;
-        let notes;
         let type;
         // TODO $rootScope.playSound('Item_Drop');
 
@@ -453,16 +452,13 @@ export default {
 
         if (drop.type === 'HatchingPotion') {
           text = Content.hatchingPotions[drop.key].text();
-          notes = Content.hatchingPotions[drop.key].notes();
+          this.drop(this.$t('messageDropPotion', {dropText: text}), drop);
-          this.drop(this.$t('messageDropPotion', {dropText: text, dropNotes: notes}), drop);
         } else if (drop.type === 'Egg') {
           text = Content.eggs[drop.key].text();
-          notes = Content.eggs[drop.key].notes();
+          this.drop(this.$t('messageDropEgg', {dropText: text}), drop);
-          this.drop(this.$t('messageDropEgg', {dropText: text, dropNotes: notes}), drop);
         } else if (drop.type === 'Food') {
           text = Content.food[drop.key].text();
-          notes = Content.food[drop.key].notes();
+          this.drop(this.$t('messageDropFood', {dropArticle: drop.article, dropText: text}), drop);
-          this.drop(this.$t('messageDropFood', {dropArticle: drop.article, dropText: text, dropNotes: notes}), drop);
         } else if (drop.type === 'Quest') {
           // TODO $rootScope.selectedQuest = Content.quests[drop.key];
           // $rootScope.openModal('questDrop', {controller:'PartyCtrl', size:'sm'});

website/client/router.js

@@ -19,7 +19,6 @@ const GroupPlansPage = () => import(/* webpackChunkName: "static" */'./component
 const MaintenancePage = () => import(/* webpackChunkName: "static" */'./components/static/maintenance');
 const MaintenanceInfoPage = () => import(/* webpackChunkName: "static" */'./components/static/maintenanceInfo');
 const MerchPage = () => import(/* webpackChunkName: "static" */'./components/static/merch');
-// const NewStuffPage = () => import(/* webpackChunkName: "static" */'./components/static/newStuff');
 const OverviewPage = () => import(/* webpackChunkName: "static" */'./components/static/overview');
 const PressKitPage = () => import(/* webpackChunkName: "static" */'./components/static/pressKit');
 const PrivacyPage = () => import(/* webpackChunkName: "static" */'./components/static/privacy');
@@ -245,7 +244,7 @@ const router = new VueRouter({
       children: [
         { name: 'app', path: 'app', component: AppPage, meta: {requiresLogin: false}},
         { name: 'clearBrowserData', path: 'clear-browser-data', component: ClearBrowserDataPage, meta: {requiresLogin: false}},
-        { name: 'communitGuidelines', path: 'community-guidelines', component: CommunityGuidelinesPage, meta: {requiresLogin: false}},
+        { name: 'communityGuidelines', path: 'community-guidelines', component: CommunityGuidelinesPage, meta: {requiresLogin: false}},
         { name: 'contact', path: 'contact', component: ContactPage, meta: {requiresLogin: false}},
         { name: 'faq', path: 'faq', component: FAQPage, meta: {requiresLogin: false}},
         { name: 'features', path: 'features', component: FeaturesPage, meta: {requiresLogin: false}},
@@ -253,9 +252,7 @@ const router = new VueRouter({
         { name: 'maintenance', path: 'maintenance', component: MaintenancePage, meta: {requiresLogin: false}},
         { name: 'maintenance-info', path: 'maintenance-info', component: MaintenanceInfoPage, meta: {requiresLogin: false}},
         { name: 'merch', path: 'merch', component: MerchPage, meta: {requiresLogin: false}},
-        // { name: 'newStuff', path: 'newStuff', component: NewStuffPage, meta: {requiresLogin: false}},
         { name: 'overview', path: 'overview', component: OverviewPage, meta: {requiresLogin: false}},
-        { name: 'oldNews', path: 'old-news', component: ParentPage, meta: {requiresLogin: false}},
         { name: 'plans', path: 'plans', component: GroupPlansPage, meta: {requiresLogin: false}},
         { name: 'pressKit', path: 'press-kit', component: PressKitPage, meta: {requiresLogin: false}},
         { name: 'privacy', path: 'privacy', component: PrivacyPage, meta: {requiresLogin: false}},

website/common/locales/en/messages.json

@@ -22,9 +22,9 @@
   "messageNotEnoughGold": "Not Enough Gold",
   "messageTwoHandedEquip": "Wielding <%= twoHandedText %> takes two hands, so <%= offHandedText %> has been unequipped.",
   "messageTwoHandedUnequip": "Wielding <%= twoHandedText %> takes two hands, so it was unequipped when you armed yourself with <%= offHandedText %>.",
-  "messageDropFood": "You've found <%= dropArticle %><%= dropText %>! <%= dropNotes %>",
+  "messageDropFood": "You've found <%= dropArticle %><%= dropText %>!",
-  "messageDropEgg": "You've found a <%= dropText %> Egg! <%= dropNotes %>",
+  "messageDropEgg": "You've found a <%= dropText %> Egg!",
-  "messageDropPotion": "You've found a <%= dropText %> Hatching Potion! <%= dropNotes %>",
+  "messageDropPotion": "You've found a <%= dropText %> Hatching Potion!",
   "messageDropQuest": "You've found a quest!",
   "messageDropMysteryItem": "You open the box and find <%= dropText %>!",
   "messageFoundQuest": "You've found the quest \"<%= questText %>\"!",

website/common/locales/en/npc.json

@@ -101,7 +101,7 @@
   "alreadyUnlockedPart": "Full set already partially unlocked.",
 
   "USD": "(USD)",
-  "newStuff": "New Stuff",
+  "newStuff": "New Stuff by [Bailey](https://twitter.com/Mihakuu)",
   "cool": "Tell Me Later",
   "dismissAlert": "Dismiss This Alert",
   "donateText1": "Adds 20 Gems to your account. Gems are used to buy special in-game items, such as shirts and hairstyles.",