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(backgrounds): correct wrapping

Browse Source
This commit is contained in:
Sabe Jones
2024-05-07 17:19:14 -05:00
parent 21a0bf7d65
commit 44a7006295
1 changed files with 16 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -192,12 +192,12 @@
v-if="user.purchased.background.birthday_bash" v-if="user.purchased.background.birthday_bash"
> >
<div <div
class="row text-center title-row" class="row justify-content-center title-row mb-3"
> >
<strong>{{ allBackgrounds.eventBackgrounds.text }}</strong> <strong>{{ allBackgrounds.eventBackgrounds.text }}</strong>
</div> </div>
<div <div
class="row title-row" class="row justify-content-center mb-4"
> >
<div <div
v-for="bg in allBackgrounds.eventBackgrounds.items" v-for="bg in allBackgrounds.eventBackgrounds.items"
@@ -223,12 +223,12 @@
</div> </div>
<div v-if="timeTravelBackgrounds.length > 0"> <div v-if="timeTravelBackgrounds.length > 0">
<div <div
class="row text-center title-row mt-4" class="row justify-content-center title-row mb-3"
> >
<strong>{{ $t('timeTravelBackgrounds') }}</strong> <strong>{{ $t('timeTravelBackgrounds') }}</strong>
</div> </div>
<div <div
class="row title-row" class="row justify-content-center mb-4"
> >
<div <div
v-for="bg in timeTravelBackgrounds" v-for="bg in timeTravelBackgrounds"
@@ -258,7 +258,7 @@
> >
<strong>{{ $t('monthlyBackgrounds') }}</strong> <strong>{{ $t('monthlyBackgrounds') }}</strong>
</div> </div>
<div class="row justify-content-center mb-4"> <div class="d-flex background-row justify-content-center mx-auto mb-4">
<div <div
v-for="(bg) in monthlyBackgrounds" v-for="(bg) in monthlyBackgrounds"
:id="bg.key" :id="bg.key"
@@ -783,6 +783,11 @@
} }
#backgrounds { #backgrounds {
.background-row {
width: 85%;
flex-wrap: wrap;
}
.background-item { .background-item {
outline: 4px solid transparent; outline: 4px solid transparent;
@@ -793,15 +798,20 @@
background-position: -4px -4px; background-position: -4px -4px;
} }
&:not(:first-of-type) { &:not(:first-of-type):not(:nth-of-type(9n)) {
margin-left: 24px; margin-left: 24px;
} }
&:nth-of-type(n+9) {
margin-top: 24px;
}
&:hover { &:hover {
outline: 4px solid rgba($purple-300, .25); outline: 4px solid rgba($purple-300, .25);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
} }
&.selected { &.selected {
border-radius: 4px; border-radius: 4px;
outline: 4px solid $purple-300; outline: 4px solid $purple-300;