fix(layout): Justin positioning and shopdown

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

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%;
} }

View File

@@ -115,6 +115,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="d-flex justify-content-between w-75">
<h1 <h1
v-once v-once
class="mb-4 page-header" class="mb-4 page-header"
@@ -134,6 +135,7 @@
/> />
</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 -->
<div <div
v-for="category in categories" v-for="category in categories"
@@ -197,17 +199,20 @@
</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"
@@ -242,6 +247,7 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div <div
v-else v-else
class="items" class="items"
@@ -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 {