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(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 { .top {
position: absolute; position: absolute;
top: -($dialogMarginTop + $userCreationBgHeight - 16px); top: -80px;
right: 50%; right: 50%;
left: 50%; left: 50%;
} }

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

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