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

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

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

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

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

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

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

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

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