Added popovers to quests (#9655)

website/client/components/groups/startQuestModal.vue

@@ -3,9 +3,18 @@
     .left-panel.content
       h3.text-center Quests
       .row
-        .col-4.quest-col(v-for='(value, key, index) in user.items.quests', @click='selectQuest({key})', :class="{selected: key === selectedQuest}", v-if='value > 0')
+        .col-4.quest-col(
+          v-for='(value, key, index) in user.items.quests',
+          @click='selectQuest({key})',
+          :class="{selected: key === selectedQuest}", v-if='value > 0')
           .quest-wrapper
-            .quest(:class="'inventory_quest_scroll_' + key")
+            b-popover(
+              :target="`inventory_quest_scroll_${key}`"
+               placement="top"
+               triggers="hover")
+                 h4.popover-content-title {{ quests.quests[key].text() }}
+                 questInfo(:quest="quests.quests[key]")
+            .quest(:class="`inventory_quest_scroll_${key}`", :id="`inventory_quest_scroll_${key}`")
       .row
         .col-10.offset-1.text-center
           span.description(v-once) {{ $t('noQuestToStart') }}
@@ -111,12 +120,14 @@ import goldIcon from 'assets/svg/gold.svg';
 import difficultyStarIcon from 'assets/svg/difficulty-star.svg';
 import questDialogDrops from '../shops/quests/questDialogDrops';
 import questDialogContent from '../shops/quests/questDialogContent';
+import QuestInfo from '../shops/quests/questInfo';
 
 export default {
   props: ['group'],
   components: {
     questDialogDrops,
     questDialogContent,
+    QuestInfo,
   },
   data () {
     return {
@@ -133,6 +144,7 @@ export default {
         difficultyStarIcon,
       }),
       shareUserIdShown: false,
+      quests,
     };
   },
   mounted () {
@@ -154,7 +166,6 @@ export default {
     selectQuest (quest) {
       this.selectedQuest = quest.key;
     },
-
     async questInit () {
       this.loading = true;
 

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

@@ -32,7 +32,6 @@
 </style>
 
 <script>
-
   import QuestInfo from './questInfo.vue';
 
   export default {

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

@@ -8,7 +8,6 @@
     span.col-4 {{ $t('difficulty') }}
     span.col-8
       span.svg-icon.inline.icon-16(v-for="star of stars()", v-html="icons[star]")
-
 </template>
 <style lang="scss" scoped>
 

website/client/components/shops/shopItem.vue

@@ -39,7 +39,6 @@ div
         .popover-content-text(v-if="showNotes", v-once) {{ item.notes }}
 
       div(v-if="item.event") {{ limitedString }}
-
 </template>
 
 <style lang="scss" scoped>