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