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

fix(layout): Justin positioning and shopdown

Browse Source
This commit is contained in:
Sabe Jones
2024-05-31 15:37:00 -05:00
parent bf46c798a6
commit 9ba986f5e5
2 changed files with 65 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -679,7 +679,7 @@
.top {
position: absolute;
top: -($dialogMarginTop + $userCreationBgHeight - 16px);
top: -80px;
right: 50%;
left: 50%;
}

124
website/client/src/components/shops/quests/index.vue
View File

@@ -115,23 +115,25 @@
</div>
</div>
</div>
<h1
v-once
class="mb-4 page-header"
>
{{ $t('quests') }}
</h1>
<div class="clearfix">
<div class="float-right">
<span class="dropdown-label">{{ $t('sortBy') }}</span>
<select-translated-array
:right="true"
:value="selectedSortItemsBy"
:items="sortItemsBy"
:inline-dropdown="false"
class="inline"
@select="selectedSortItemsBy = $event"
/>
<div class="d-flex justify-content-between w-75">
<h1
v-once
class="mb-4 page-header"
>
{{ $t('quests') }}
</h1>
<div class="clearfix">
<div class="float-right">
<span class="dropdown-label">{{ $t('sortBy') }}</span>
<select-translated-array
:right="true"
:value="selectedSortItemsBy"
:items="sortItemsBy"
:inline-dropdown="false"
class="inline"
@select="selectedSortItemsBy = $event"
/>
</div>
</div>
</div>
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
@@ -197,48 +199,52 @@
</itemRows>
<div
v-else-if="category.identifier === 'unlockable' || category.identifier === 'gold'"
class="grouped-parent"
class="d-flex justify-content-between flex-wrap w-75"
>
<!-- eslint-disable vue/no-use-v-if-with-v-for, max-len -->
<div
v-for="(items, key) in getGrouped(questItems(category, selectedSortItemsBy,searchTextThrottled, hideLocked, hidePinned))"
v-for="(items, key) in getGrouped(
questItems(
category, selectedSortItemsBy,searchTextThrottled, hideLocked, hidePinned
)
)"
:key="key"
class="group"
class="quest-group mb-3"
>
<!-- eslint-enable vue/no-use-v-if-with-v-for, max-len -->
<h3>{{ $t(key) }}</h3>
<div class="items">
<shopItem
v-for="item in items"
:key="item.key"
:item="item"
:price="item.value"
:empty-item="false"
:popover-position="'top'"
:owned="!isNaN(userItems.quests[item.key])"
@click="selectItem(item)"
>
<span slot="popoverContent">
<quest-popover :item="item" />
</span>
<template
slot="itemBadge"
slot-scope="ctx"
<div class="quest-container">
<h3>{{ $t(key) }}</h3>
<div class="items d-flex justify-content-left">
<shopItem
v-for="item in items"
:key="item.key"
:item="item"
:price="item.value"
:empty-item="false"
:popover-position="'top'"
:owned="!isNaN(userItems.quests[item.key])"
@click="selectItem(item)"
>
<span
class="badge-top"
@click.prevent.stop="togglePinned(ctx.item)"
>
<pin-badge
:pinned="ctx.item.pinned"
/>
<span slot="popoverContent">
<quest-popover :item="item" />
</span>
<countBadge
:show="userItems.quests[ctx.item.key] > 0"
:count="userItems.quests[ctx.item.key] || 0"
/>
</template>
</shopItem>
<template
slot="itemBadge"
slot-scope="ctx"
>
<span
class="badge-top"
@click.prevent.stop="togglePinned(ctx.item)"
>
<pin-badge
:pinned="ctx.item.pinned"
/>
</span>
<countBadge
:show="userItems.quests[ctx.item.key] > 0"
:count="userItems.quests[ctx.item.key] || 0"
/>
</template>
</shopItem>
</div>
</div>
</div>
</div>
@@ -317,18 +323,16 @@
margin: 24px auto;
}
.group {
display: inline-block;
width: 33%;
margin-bottom: 24px;
vertical-align: top;
.quest-container {
min-width: 330px;
}
.quest-group {
.items {
border-radius: 2px;
width: fit-content;
background-color: #edecee;
display: inline-block;
padding: 0;
margin-right: 12px;
}
.item-wrapper {