krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 14:47:53 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): correct bad popovers breaking Chrome

Browse Source
This commit is contained in:
SabreCat
2023-06-06 16:30:37 -05:00
parent 0a4bbbf173
commit 42e8dd1361
6 changed files with 258 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
website/client/src/components/creatorIntro.vue
View File

@@ -183,10 +183,8 @@
<div <div
v-for="bg in backgroundShopSets[0].items" v-for="bg in backgroundShopSets[0].items"
:key="bg.key" :key="bg.key"
:id="bg.key"
class="col-2" class="col-2"
:popover-title="bg.text"
:popover="bg.notes"
popover-trigger="mouseenter"
@click="unlock('background.' + bg.key)" @click="unlock('background.' + bg.key)"
> >
<div <div
@@ -195,6 +193,13 @@
> >
<div class="small-rectangle"></div> <div class="small-rectangle"></div>
</div> </div>
<b-popover
:target="bg.key"
triggers="hover focus"
placement="bottom"
:prevent-overflow="false"
:content="bg.notes"
/>
</div> </div>
</div> </div>
<div <div
@@ -211,16 +216,21 @@
<div <div
v-for="bg in backgroundShopSets[2].items" v-for="bg in backgroundShopSets[2].items"
:key="bg.key" :key="bg.key"
:id="bg.key"
class="col-4 text-center customize-option background-button" class="col-4 text-center customize-option background-button"
:popover-title="bg.text"
:popover="bg.notes"
popover-trigger="mouseenter"
@click="unlock('background.' + bg.key)" @click="unlock('background.' + bg.key)"
> >
<div <div
class="background" class="background"
:class="`background_${bg.key}`" :class="`background_${bg.key}`"
></div> ></div>
<b-popover
:target="bg.key"
triggers="hover focus"
placement="bottom"
:prevent-overflow="false"
:content="bg.notes"
/>
</div> </div>
</div> </div>
</div> </div>
@@ -236,10 +246,8 @@
<div <div
v-for="bg in backgroundShopSets[1].items" v-for="bg in backgroundShopSets[1].items"
:key="bg.key" :key="bg.key"
:id="bg.key"
class="col-4 text-center customize-option background-button" class="col-4 text-center customize-option background-button"
:popover-title="bg.text"
:popover="bg.notes"
popover-trigger="mouseenter"
@click="!user.purchased.background[bg.key] @click="!user.purchased.background[bg.key]
? backgroundSelected(bg) : unlock('background.' + bg.key)" ? backgroundSelected(bg) : unlock('background.' + bg.key)"
> >
@@ -270,6 +278,13 @@
:pinned="isBackgroundPinned(bg)" :pinned="isBackgroundPinned(bg)"
/> />
</span> </span>
<b-popover
:target="bg.key"
triggers="hover focus"
placement="bottom"
:prevent-overflow="false"
:content="bg.notes"
/>
</div> </div>
</div> </div>
</div> </div>
@@ -302,10 +317,8 @@
<div <div
v-for="bg in set.items" v-for="bg in set.items"
:key="bg.key" :key="bg.key"
:id="bg.key"
class="col-4 text-center customize-option background-button" class="col-4 text-center customize-option background-button"
:popover-title="bg.text"
:popover="bg.notes"
popover-trigger="mouseenter"
@click="!user.purchased.background[bg.key] @click="!user.purchased.background[bg.key]
? backgroundSelected(bg) : unlock('background.' + bg.key)" ? backgroundSelected(bg) : unlock('background.' + bg.key)"
> >
@@ -336,6 +349,13 @@
:pinned="isBackgroundPinned(bg)" :pinned="isBackgroundPinned(bg)"
/> />
</span> </span>
<b-popover
:target="bg.key"
triggers="hover focus"
placement="bottom"
:prevent-overflow="false"
:content="bg.notes"
/>
</div> </div>
<div <div
v-if="!ownsSet('background', set.items) && set.identifier !== 'incentiveBackgrounds'" v-if="!ownsSet('background', set.items) && set.identifier !== 'incentiveBackgrounds'"
@@ -358,16 +378,21 @@
<div <div
v-for="(bg) in ownedBackgrounds" v-for="(bg) in ownedBackgrounds"
:key="bg.key" :key="bg.key"
:id="bg.key"
class="col-4 text-center customize-option background-button" class="col-4 text-center customize-option background-button"
:popover-title="bg.text"
:popover="bg.notes"
popover-trigger="mouseenter"
@click="unlock('background.' + bg.key)" @click="unlock('background.' + bg.key)"
> >
<div <div
class="background" class="background"
:class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]" :class="[`background_${bg.key}`, backgroundLockedStatus(bg.key)]"
></div> ></div>
<b-popover
:target="bg.key"
triggers="hover focus"
placement="bottom"
:prevent-overflow="false"
:content="bg.notes"
/>
</div> </div>
</div> </div>
</div> </div>

21
website/client/src/components/hall/heroes.vue
View File

@@ -258,13 +258,22 @@
:key="hero._id" :key="hero._id"
> >
<td> <td>
<user-link <div
v-if="hasPermission(hero, 'userSupport')" v-if="hasPermission(hero, 'userSupport')"
class="width-content"
>
<user-link
:id="hero._id"
:user="hero" :user="hero"
:popover="$t('gamemaster')"
popover-trigger="mouseenter"
popover-placement="right"
/> />
<b-popover
:target="hero._id"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t('gamemaster')"
/>
</div>
<user-link <user-link
v-else v-else
:user="hero" :user="hero"
@@ -302,6 +311,10 @@
h4.expand-toggle::after { h4.expand-toggle::after {
margin-left: 5px; margin-left: 5px;
} }
.width-content {
width: fit-content;
}
</style> </style>
<script> <script>

68
website/client/src/components/settings/site.vue
View File

@@ -128,7 +128,10 @@
<hr> <hr>
</div> </div>
<div> <div>
<div class="checkbox"> <div
class="checkbox"
id="preferenceAdvancedCollapsed"
>
<label> <label>
<input <input
v-model="user.preferences.advancedCollapsed" v-model="user.preferences.advancedCollapsed"
@@ -136,17 +139,22 @@
class="mr-2" class="mr-2"
@change="set('advancedCollapsed')" @change="set('advancedCollapsed')"
> >
<span <span class="hint">
class="hint" {{ $t('startAdvCollapsed') }}
popover-trigger="mouseenter" </span>
popover-placement="right" <b-popover
:popover="$t('startAdvCollapsedPop')" target="preferenceAdvancedCollapsed"
>{{ $t('startAdvCollapsed') }}</span> triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t('startAdvCollapsedPop')"
/>
</label> </label>
</div> </div>
<div <div
v-if="party.memberCount === 1" v-if="party.memberCount === 1"
class="checkbox" class="checkbox"
id="preferenceDisplayInviteAtOneMember"
> >
<label> <label>
<input <input
@@ -155,12 +163,9 @@
class="mr-2" class="mr-2"
@change="set('displayInviteToPartyWhenPartyIs1')" @change="set('displayInviteToPartyWhenPartyIs1')"
> >
<span <span class="hint">
class="hint" {{ $t('displayInviteToPartyWhenPartyIs1') }}
popover-trigger="mouseenter" </span>
popover-placement="right"
:popover="$t('displayInviteToPartyWhenPartyIs1')"
>{{ $t('displayInviteToPartyWhenPartyIs1') }}</span>
</label> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
@@ -201,32 +206,47 @@
</div> </div>
<hr> <hr>
<button <button
id="buttonShowBailey"
class="btn btn-primary mr-2 mb-2" class="btn btn-primary mr-2 mb-2"
popover-trigger="mouseenter"
popover-placement="right"
:popover="$t('showBaileyPop')"
@click="showBailey()" @click="showBailey()"
> >
{{ $t('showBailey') }} {{ $t('showBailey') }}
<b-popover
target="buttonShowBailey"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t('showBaileyPop')"
/>
</button> </button>
<button <button
id="buttonFCV"
class="btn btn-primary mr-2 mb-2" class="btn btn-primary mr-2 mb-2"
popover-trigger="mouseenter"
popover-placement="right"
:popover="$t('fixValPop')"
@click="openRestoreModal()" @click="openRestoreModal()"
> >
{{ $t('fixVal') }} {{ $t('fixVal') }}
<b-popover
target="buttonFCV"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t('fixValPop')"
/>
</button> </button>
<button <button
v-if="user.preferences.disableClasses == true" v-if="user.preferences.disableClasses == true"
id="buttonEnableClasses"
class="btn btn-primary mb-2" class="btn btn-primary mb-2"
popover-trigger="mouseenter"
popover-placement="right"
:popover="$t('enableClassPop')"
@click="changeClassForUser(false)" @click="changeClassForUser(false)"
> >
{{ $t('enableClass') }} {{ $t('enableClass') }}
<b-popover
target="buttonEnableClasses"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t('enableClassPop')"
/>
</button> </button>
<hr> <hr>
<day-start-adjustment /> <day-start-adjustment />
@@ -516,6 +536,10 @@
input { input {
color: $gray-50; color: $gray-50;
} }
.checkbox {
width: fit-content;
}
.usersettings h5 { .usersettings h5 {
margin-top: 1em; margin-top: 1em;
} }

10
website/client/src/components/static/clearBrowserData.vue
View File

@@ -7,13 +7,19 @@
<br> <br>
<p class="text-center"> <p class="text-center">
<button <button
id="buttonClearBrowserData"
class="btn btn-lg btn-danger" class="btn btn-lg btn-danger"
popover-trigger="mouseover"
:popover="$t('localStorageClearExplanation')"
@click="clearLocalStorage()" @click="clearLocalStorage()"
> >
{{ $t('localStorageClear') }} {{ $t('localStorageClear') }}
</button> </button>
<b-popover
target="buttonClearBrowserData"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t('localStorageClearExplanation')"
/>
</p> </p>
<br> <br>
<p v-html="$t('localStorageTryNext', localStorageTryNext) "></p> <p v-html="$t('localStorageTryNext', localStorageTryNext) "></p>

23
website/client/src/components/userMenu/profileStats.vue
View File

@@ -190,14 +190,10 @@
class="col-12 col-md-6" class="col-12 col-md-6"
> >
<div class="row col-12 stats-column"> <div class="row col-12 stats-column">
<div class="col-12 col-md-4 attribute-label"> <div
<span :id="`${stat}-information`"
class="hint" class="col-12 col-md-4 attribute-label"
:popover-title="$t(statInfo.title)" >
popover-placement="right"
:popover="$t(statInfo.popover)"
popover-trigger="mouseenter"
></span>
<div <div
class="stat-title" class="stat-title"
:class="stat" :class="stat"
@@ -206,6 +202,13 @@
</div> </div>
<strong class="number">{{ totalStatPoints(stat) | floorWholeNumber }}</strong> <strong class="number">{{ totalStatPoints(stat) | floorWholeNumber }}</strong>
</div> </div>
<b-popover
:target="`${stat}-information`"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t(statInfo.popover)"
/>
<div class="col-12 col-md-6"> <div class="col-12 col-md-6">
<ul class="bonus-stats"> <ul class="bonus-stats">
<li> <li>
@@ -355,7 +358,7 @@ export default {
}, },
allocateStatsList: { allocateStatsList: {
str: { title: 'allocateStr', popover: 'strengthText', allocatepop: 'allocateStrPop' }, str: { title: 'allocateStr', popover: 'strText', allocatepop: 'allocateStrPop' },
int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' }, int: { title: 'allocateInt', popover: 'intText', allocatepop: 'allocateIntPop' },
con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' }, con: { title: 'allocateCon', popover: 'conText', allocatepop: 'allocateConPop' },
per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' }, per: { title: 'allocatePer', popover: 'perText', allocatepop: 'allocatePerPop' },
@@ -364,7 +367,7 @@ export default {
stats: { stats: {
str: { str: {
title: 'strength', title: 'strength',
popover: 'strengthText', popover: 'strText',
}, },
int: { int: {
title: 'intelligence', title: 'intelligence',

204
website/client/src/components/userMenu/stats.vue
View File

@@ -146,17 +146,19 @@
:key="stat" :key="stat"
class="row" class="row"
> >
<div class="col-4"> <div
<span class="col-4"
class="hint" :id="statInfo.title"
:popover-title="$t(statInfo.title)"
popover-placement="right"
:popover="$t(statInfo.popover)"
popover-trigger="mouseenter"
> >
<strong>{{ $t(statInfo.title) }}</strong> <strong> {{ $t(statInfo.title)}} </strong>
</span>
<strong>: {{ statsComputed[stat] }}</strong> <strong>: {{ statsComputed[stat] }}</strong>
<b-popover
:target="statInfo.title"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t(statInfo.popover)"
/>
</div> </div>
<div class="col-6"> <div class="col-6">
<ul class="bonus-stats"> <ul class="bonus-stats">
@@ -183,27 +185,38 @@
</ul> </ul>
</div> </div>
</div> </div>
<div v-if="user.stats.buffs.stealth"> <div
v-if="user.stats.buffs.stealth"
id="stealthBuff"
>
<strong <strong
v-once v-once
class="hint" class="hint"
:popover-title="$t('stealth')"
popover-trigger="mouseenter"
popover-placement="right"
:popover="$t('stealthNewDay')"
>{{ $t('stealth') }}</strong> >{{ $t('stealth') }}</strong>
<strong>: {{ user.stats.buffs.stealth }}&nbsp;</strong> <strong>: {{ user.stats.buffs.stealth }}&nbsp;</strong>
<b-popover
target="stealthBuff"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t('stealthNewDay')"
/>
</div> </div>
<div v-if="user.stats.buffs.streaks"> <div
v-if="user.stats.buffs.streaks"
id="streaksFrozenBuff"
>
<div> <div>
<strong <strong>
class="hint"
popover-title="$t('streaksFrozen')"
popover-trigger="mouseenter"
popover-placement="right"
:popover="$t('streaksFrozenText')"
></strong>
{{ $t('streaksFrozen') }} {{ $t('streaksFrozen') }}
</strong>
<b-popover
target="streaksFrozenBuff"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t('streaksFrozenText')"
/>
</div> </div>
</div> </div>
</div> </div>
@@ -237,19 +250,27 @@
> >
{{ $t('noMoreAllocate') }} {{ $t('noMoreAllocate') }}
</p> </p>
<p v-if="user.stats.points || userLevel100Plus"> <p
v-if="user.stats.points || userLevel100Plus"
id="pointAllocation"
>
<strong class="inline">{{ user.stats.points }}&nbsp;</strong> <strong class="inline">{{ user.stats.points }}&nbsp;</strong>
<strong <strong> {{ $t('unallocated') }} </strong>
class="hint" <b-popover
popover-trigger="mouseenter" target="pointAllocation"
popover-placement="right" triggers="hover focus"
:popover="$t('levelPopover')" placement="right"
>{{ $t('unallocated') }}</strong> :prevent-overflow="false"
:content="$t('levelPopover')"
/>
</p> </p>
</div> </div>
<div> <div>
<fieldset class="auto-allocate"> <fieldset class="auto-allocate">
<div class="checkbox"> <div
id="preferenceAutomaticAllocation"
class="checkbox"
>
<label> <label>
<input <input
v-model="user.preferences.automaticAllocation" v-model="user.preferences.automaticAllocation"
@@ -259,19 +280,24 @@
'preferences.allocationMode': 'taskbased' 'preferences.allocationMode': 'taskbased'
})" })"
> >
<span <b-popover
class="hint" target="preferenceAutomaticAllocation"
popover-trigger="mouseenter" triggers="hover focus"
popover-placement="right" placement="right"
:popover="$t('autoAllocationPop')" :prevent-overflow="false"
>{{ $t('autoAllocation') }}</span> :content="$t('autoAllocationPop')"
/>
{{ $t('autoAllocation') }}
</label> </label>
</div> </div>
<form <form
v-if="user.preferences.automaticAllocation" v-if="user.preferences.automaticAllocation"
style="margin-left:1em" style="margin-left:1em"
> >
<div class="radio"> <div
id="optionFlatAllocation"
class="radio"
>
<label> <label>
<input <input
v-model="user.preferences.allocationMode" v-model="user.preferences.allocationMode"
@@ -280,15 +306,22 @@
value="flat" value="flat"
@change="set({'preferences.allocationMode': 'flat'})" @change="set({'preferences.allocationMode': 'flat'})"
> >
<span <span class="hint">
class="hint" {{ $t('evenAllocation') }}
popover-trigger="mouseenter" </span>
popover-placement="right" <b-popover
:popover="$t('evenAllocationPop')" target="optionFlatAllocation"
>{{ $t('evenAllocation') }}</span> triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t('evenAllocationPop')"
/>
</label> </label>
</div> </div>
<div class="radio"> <div
id="optionClassAllocation"
class="radio"
>
<label> <label>
<input <input
v-model="user.preferences.allocationMode" v-model="user.preferences.allocationMode"
@@ -297,47 +330,63 @@
value="classbased" value="classbased"
@change="set({'preferences.allocationMode': 'classbased'})" @change="set({'preferences.allocationMode': 'classbased'})"
> >
<span <span class="hint">
class="hint" {{ $t('classAllocation') }}
popover-trigger="mouseenter" </span>
popover-placement="right" <b-popover
:popover="$t('classAllocationPop')" target="optionClassAllocation"
>{{ $t('classAllocation') }}</span> triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t('classAllocationPop')"
/>
</label> </label>
</div> </div>
<div class="radio"> <div
id="optionTaskAllocation"
class="radio"
>
<label> <label>
<input <input
v-model="user.preferences.allocationMode" v-model="user.preferences.allocationMode"
type="radio" type="radio"
name="allocationMode" name="allocationMode"
value="taskbased" value="classbased"
@change="set({'preferences.allocationMode': 'taskbased'})" @change="set({'preferences.allocationMode': 'taskbased'})"
> >
<span <span class="hint">
class="hint" {{ $t('taskAllocation') }}
popover-trigger="mouseenter" </span>
popover-placement="right" <b-popover
:popover="$t('taskAllocationPop')" target="optionTaskAllocation"
>{{ $t('taskAllocation') }}</span> triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t('taskAllocationPop')"
/>
</label> </label>
</div> </div>
</form> </form>
<div <div
v-if="user.preferences.automaticAllocation v-if="user.preferences.automaticAllocation
&& !(user.preferences.allocationMode === 'taskbased') && (user.stats.points > 0)" && !(user.preferences.allocationMode === 'taskbased') && (user.stats.points > 0)"
id="buttonDistributePoints"
> >
<button <button
class="btn btn-primary btn-xs" class="btn btn-primary btn-xs"
popover-trigger="mouseenter"
popover-placement="right"
:popover="$t('distributePointsPop')"
@click="allocateNow({})" @click="allocateNow({})"
> >
<span class="glyphicon glyphicon-download"></span> <span class="glyphicon glyphicon-download"></span>
&nbsp; &nbsp;
{{ $t('distributePoints') }} {{ $t('distributePoints') }}
</button> </button>
<b-popover
target="buttonDistributePoints"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t('distributePointsPop')"
/>
</div> </div>
</fieldset> </fieldset>
</div> </div>
@@ -346,28 +395,35 @@
:key="stat" :key="stat"
class="row" class="row"
> >
<div class="col-8"> <div
<span :id="`${stat}-info`"
class="hint" class="col-8"
popover-trigger="mouseenter" >
popover-placement="right"
:popover="$t(statInfo.popover)"
></span>
{{ $t(statInfo.title) + user.stats[stat] }} {{ $t(statInfo.title) + user.stats[stat] }}
<b-popover
:target="`${stat}-info`"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t(statInfo.popover)"
/>
</div> </div>
<div <div
v-if="user.stats.points" v-if="user.stats.points"
:id="`${stat}-allocate`"
class="col-4" class="col-4"
@click="allocate(stat)" @click="allocate(stat)"
> >
<button <button class="btn btn-primary">
class="btn btn-primary"
popover-trigger="mouseenter"
popover-placement="right"
:popover="$t(statInfo.allocatepop)"
>
+ +
</button> </button>
<b-popover
:target="`${stat}-allocate`"
triggers="hover focus"
placement="right"
:prevent-overflow="false"
:content="$t(statInfo.allocatePop)"
/>
</div> </div>
</div> </div>
</div> </div>