feat(content): new Feathery Friends daterange

Also fixes up some style oddities in quest modals

website/client/src/components/shops/quests/buyQuestModal.vue

@@ -26,7 +26,10 @@
       class="content"
     >
       <div class="inner-content">
-        <questDialogContent :item="item" />
+        <questDialogContent
+          :item="item"
+          :abbreviated="true"
+        />
         <div
           v-if="!item.locked"
           class="purchase-amount"
@@ -131,11 +134,6 @@
       padding-bottom: 0px;
     }
 
-    .questInfo {
-      width: 70%;
-      margin: 0 auto 10px auto;
-    }
-
     .right-sidebar {
       position: absolute;
       right: -350px;

website/client/src/components/shops/quests/questDialogContent.vue

@@ -14,6 +14,7 @@
     <questInfo
       class="questInfo"
       :quest="item"
+      :abbreviated="true"
     />
   </div>
 </template>

website/client/src/components/shops/quests/questInfo.vue

@@ -1,42 +1,43 @@
 <template>
-  <div>
+  <div
+    class="d-flex flex-column justify-content-center"
+  >
     <div
-      class="row"
+      v-if="quest.collect"
+      class="table-row m-auto"
     >
-      <div
+      <dt>{{ $t('collect') + ':' }}</dt>
-        v-if="quest.collect"
+      <dd>
-        class="table-row"
+        <div
-      >
+          v-for="(collect, key) of quest.collect"
-        <dt>{{ $t('collect') + ':' }}</dt>
+          :key="key"
-        <dd>
+        >
-          <div
+          <span>{{ collect.count }} {{ getCollectText(collect) }}</span>
-            v-for="(collect, key) of quest.collect"
+        </div>
-            :key="key"
+      </dd>
-          >
-            <span>{{ collect.count }} {{ getCollectText(collect) }}</span>
-          </div>
-        </dd>
-      </div>
-      <div
-        v-if="quest.boss"
-        class="table-row"
-      >
-        <dt>{{ $t('bossHP') + ':' }}</dt>
-        <dd>{{ quest.boss.hp }}</dd>
-      </div>
-      <div class="table-row">
-        <dt>{{ $t('difficulty') + ':' }}</dt>
-        <dd>
-          <div
-            v-for="(star, index) of stars()"
-            :key="index"
-            class="svg-icon inline icon-16"
-            v-html="icons[star]"
-          ></div>
-        </dd>
-      </div>
     </div>
-    <div v-if="quest.event">
+    <div
+      v-if="quest.boss"
+      class="table-row m-auto"
+    >
+      <dt>{{ $t('bossHP') + ':' }}</dt>
+      <dd>{{ quest.boss.hp }}</dd>
+    </div>
+    <div class="table-row m-auto">
+      <dt>{{ $t('difficulty') + ':' }}</dt>
+      <dd>
+        <div
+          v-for="(star, index) of stars()"
+          :key="index"
+          class="svg-icon inline icon-16"
+          v-html="icons[star]"
+        ></div>
+      </dd>
+    </div>
+    <div
+      v-if="quest.event && !abbreviated"
+      class="m-auto"
+    >
       {{ limitedString }}
     </div>
   </div>
@@ -131,6 +132,10 @@ export default {
     quest: {
       type: Object,
     },
+    abbreviated: {
+      type: Boolean,
+      default: false,
+    },
   },
   data () {
     return {

website/common/script/content/bundles.js

@@ -21,8 +21,9 @@ const bundles = {
       'harpy',
       'owl',
     ],
+    event: EVENTS.potions202105,
     canBuy () {
-      return moment().isBetween('2019-05-09', '2019-06-02');
+      return moment().isBefore(EVENTS.potions202105.end);
     },
     type: 'quests',
     class: 'quest_bundle_featheredFriends',

website/common/script/libs/getItemInfo.js

@@ -122,6 +122,7 @@ export default function getItemInfo (user, type, item, officialPinnedItems, lang
         purchaseType: 'bundles',
         path: `bundles.${item.key}`,
         pinType: 'bundles',
+        event: item.event,
       };
       break;
     case 'quests': // eslint-disable-line no-case-declarations