mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-17 14:47:53 +01:00
WIP(shops): more layouts and fixes
This commit is contained in:
Sabe Jones
@@ -12,7 +12,7 @@
|
||||
}
|
||||
|
||||
&.color {
|
||||
svg path {
|
||||
svg path, svg polygon {
|
||||
fill: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,9 +80,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
.flat .item {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
.flat {
|
||||
.item {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.item-wrapper:hover {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bordered-item .item {
|
||||
|
||||
@@ -60,8 +60,9 @@ h1 {
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
line-height: 1.4;
|
||||
line-height: 28px;
|
||||
margin-bottom: 16px;
|
||||
color: $purple-300;
|
||||
}
|
||||
|
||||
h3, h4 {
|
||||
|
||||
@@ -31,8 +31,8 @@
|
||||
|
||||
.bottom-banner {
|
||||
background: linear-gradient(114.26deg, $purple-300 0%, $purple-200 100%);
|
||||
border-bottom-left-radius: 5px;
|
||||
border-bottom-right-radius: 5px;
|
||||
border-bottom-left-radius: 8px;
|
||||
border-bottom-right-radius: 8px;
|
||||
color: $white;
|
||||
height: 80px;
|
||||
line-height: 24px;
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
:key="option.key"
|
||||
class="outer-option-background"
|
||||
:class="{
|
||||
locked: option.gemLocked || option.goldLocked,
|
||||
premium: Boolean(option.gem),
|
||||
active: option.active || currentValue === option.key,
|
||||
none: option.none,
|
||||
@@ -117,7 +116,7 @@ export default {
|
||||
|
||||
&:not(.locked):not(.active) {
|
||||
.option:hover {
|
||||
background-color: rgba(213, 200, 255, .32);
|
||||
background-color: rgba($purple-300, .25);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -183,9 +182,6 @@ export default {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
|
||||
&.color-bangs {
|
||||
margin-top: 3px;
|
||||
}
|
||||
&.skin {
|
||||
margin-top: -4px;
|
||||
margin-left: -4px;
|
||||
@@ -204,14 +200,14 @@ export default {
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
&.color, &.bangs {
|
||||
margin-top: 4px;
|
||||
margin-left: -3px;
|
||||
&.color, &.bangs, &.beard {
|
||||
background-position-x: -5px;
|
||||
background-position-y: -12px;
|
||||
}
|
||||
|
||||
&.hair.base {
|
||||
margin-top: 0px;
|
||||
margin-left: -5px;
|
||||
background-position-x: -6px;
|
||||
background-position-y: -4px;
|
||||
}
|
||||
|
||||
&.headAccessory {
|
||||
@@ -225,89 +221,4 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-center {
|
||||
.gem-lock, .gold-lock {
|
||||
display: inline-block;
|
||||
margin: 0 auto 8px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.gem-lock, .gold-lock {
|
||||
.svg-icon {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.svg-icon, span {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.gem-lock span {
|
||||
color: $green-10
|
||||
}
|
||||
|
||||
.purchase-set {
|
||||
background: #fff;
|
||||
padding: 0.5em;
|
||||
border-radius: 0 0 2px 2px;
|
||||
box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12);
|
||||
cursor: pointer;
|
||||
|
||||
span {
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
span.price {
|
||||
color: #24cc8f;
|
||||
}
|
||||
|
||||
.gem, .coin {
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&.single {
|
||||
width: 141px;
|
||||
}
|
||||
|
||||
width: 100%;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.gem, .coin {
|
||||
width: 20px;
|
||||
margin: 0 .5em;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
|
||||
.background-set {
|
||||
background-color: #edecee;
|
||||
border-radius: 2px;
|
||||
|
||||
padding-top: 12px;
|
||||
margin-left: 12px;
|
||||
margin-right: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
width: calc(100% - 24px);
|
||||
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
max-width: unset; // disable col12 styling
|
||||
flex: unset;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -9,12 +9,10 @@
|
||||
:no-close-on-esc="!editing"
|
||||
:no-close-on-backdrop="!editing"
|
||||
>
|
||||
<span
|
||||
<close-x
|
||||
v-if="editing"
|
||||
class="close-icon svg-icon inline icon-10"
|
||||
@click="close()"
|
||||
v-html="icons.close"
|
||||
></span>
|
||||
@close="close()"
|
||||
/>
|
||||
<div
|
||||
v-if="modalPage === 1 && !editing"
|
||||
class="section row welcome-section"
|
||||
@@ -29,39 +27,47 @@
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<h2
|
||||
class="text-center pt-2 mt-4 mb-4"
|
||||
v-if="editing"
|
||||
>
|
||||
{{ $t('editAvatar')}}
|
||||
</h2>
|
||||
<div
|
||||
v-if="modalPage > 1"
|
||||
class="avatar-section row"
|
||||
class="avatar-section d-flex justify-content-center"
|
||||
:class="{'page-2': modalPage === 2}"
|
||||
>
|
||||
<div class="col-6 offset-3">
|
||||
<div>
|
||||
<div
|
||||
v-if="!editing"
|
||||
class="user-creation-bg"
|
||||
></div>
|
||||
class="user-creation-bg mt-5"
|
||||
>
|
||||
<avatar
|
||||
class="new-user"
|
||||
:member="user"
|
||||
:avatar-only="true"
|
||||
/>
|
||||
</div>
|
||||
<avatar
|
||||
v-else
|
||||
:member="user"
|
||||
:avatar-only="!editing"
|
||||
:class="{'edit-avatar': editing}"
|
||||
:avatar-only="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="modalPage === 2"
|
||||
class="section"
|
||||
:class="{'edit-modal': editing}"
|
||||
>
|
||||
<div
|
||||
id="options-nav"
|
||||
class="container section text-center customize-menu"
|
||||
class="container section text-center customize-menu px-5"
|
||||
>
|
||||
<div class="row">
|
||||
<div class="row justify-content-around">
|
||||
<div
|
||||
class="menu-container"
|
||||
:class="{
|
||||
'col-3': !editing,
|
||||
'col-2 offset-1': editing,
|
||||
active: activeTopPage === 'body'}"
|
||||
:class="{active: activeTopPage === 'body'}"
|
||||
@click="changeTopPage('body', 'size')"
|
||||
>
|
||||
<div class="menu-item">
|
||||
@@ -75,7 +81,7 @@
|
||||
</div>
|
||||
<div
|
||||
class="menu-container"
|
||||
:class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'skin'}"
|
||||
:class="{active: activeTopPage === 'skin'}"
|
||||
@click="changeTopPage('skin', 'color')"
|
||||
>
|
||||
<div class="menu-item">
|
||||
@@ -89,7 +95,7 @@
|
||||
</div>
|
||||
<div
|
||||
class="menu-container"
|
||||
:class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'hair'}"
|
||||
:class="{active: activeTopPage === 'hair'}"
|
||||
@click="changeTopPage('hair', 'color')"
|
||||
>
|
||||
<div class="menu-item">
|
||||
@@ -103,7 +109,7 @@
|
||||
</div>
|
||||
<div
|
||||
class="menu-container"
|
||||
:class="{'col-3': !editing, 'col-2': editing, active: activeTopPage === 'extra'}"
|
||||
:class="{active: activeTopPage === 'extra'}"
|
||||
@click="changeTopPage('extra', 'glasses')"
|
||||
>
|
||||
<div class="menu-item">
|
||||
@@ -117,7 +123,7 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="editing"
|
||||
class="menu-container col-2"
|
||||
class="menu-container"
|
||||
:class="{active: activeTopPage === 'backgrounds'}"
|
||||
@click="changeTopPage('backgrounds')"
|
||||
>
|
||||
@@ -558,18 +564,7 @@
|
||||
$dialogMarginTop: 56px;
|
||||
$userCreationBgHeight: 105px;
|
||||
|
||||
/* @TODO do not rely on avatar-modal___BV_modal_body_,
|
||||
it already changed once when bootstrap-vue reached version 1 */
|
||||
|
||||
#avatar-modal___BV_modal_body_, #avatar-modal___BV_modal_body_ {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.page-2 {
|
||||
#avatar-modal___BV_modal_body_ {
|
||||
margin-top: $dialogMarginTop;
|
||||
}
|
||||
|
||||
&#avatar-modal {
|
||||
.modal-dialog.modal-md {
|
||||
margin-top: 186px;
|
||||
@@ -578,6 +573,26 @@
|
||||
}
|
||||
|
||||
#avatar-modal {
|
||||
.avatar {
|
||||
cursor: auto;
|
||||
|
||||
&:not(.new-user) {
|
||||
box-shadow: 0px 1px 3px 0px rgba(26, 24, 29, 0.12), 0px 1px 2px 0px rgba(26, 24, 29, 0.24);
|
||||
}
|
||||
|
||||
&.new-user {
|
||||
padding-top: 0px;
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.first-page-footer {
|
||||
margin-bottom: 32px;
|
||||
@@ -617,14 +632,6 @@
|
||||
padding-top: 1px;
|
||||
}
|
||||
|
||||
.purchase-all {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.edit-modal {
|
||||
margin-top: 10em;
|
||||
}
|
||||
|
||||
.row.sub-menu + .row.sub-menu {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
@@ -646,12 +653,6 @@
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
position: absolute !important; // was overwritten in production build
|
||||
top: -22px;
|
||||
left: 4em;
|
||||
}
|
||||
|
||||
.top {
|
||||
position: absolute;
|
||||
top: -($dialogMarginTop + $userCreationBgHeight - 16px);
|
||||
@@ -667,10 +668,6 @@
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.edit-avatar {
|
||||
left: 9.2em;
|
||||
}
|
||||
|
||||
.justin-section {
|
||||
position: relative;
|
||||
}
|
||||
@@ -742,14 +739,18 @@
|
||||
}
|
||||
|
||||
.customize-menu {
|
||||
.menu-item .svg-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
.menu-item {
|
||||
width: 83px;
|
||||
|
||||
.svg-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
color: #a5a1ac;
|
||||
color: $gray-100;
|
||||
}
|
||||
|
||||
.menu-container:hover, .menu-container.active {
|
||||
@@ -970,6 +971,7 @@ import bodySettings from './avatarModal/body-settings';
|
||||
import skinSettings from './avatarModal/skin-settings';
|
||||
import hairSettings from './avatarModal/hair-settings';
|
||||
import extraSettings from './avatarModal/extra-settings';
|
||||
import closeX from './ui/closeX';
|
||||
|
||||
import logoPurple from '@/assets/svg/logo-purple.svg';
|
||||
import bodyIcon from '@/assets/svg/body.svg';
|
||||
@@ -988,6 +990,7 @@ import { avatarEditorUtilities } from '../mixins/avatarEditUtilities';
|
||||
export default {
|
||||
components: {
|
||||
avatar,
|
||||
closeX,
|
||||
customizeBanner,
|
||||
bodySettings,
|
||||
extraSettings,
|
||||
|
||||
@@ -69,7 +69,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div><div
|
||||
v-if="!closed"
|
||||
class="clearfix"
|
||||
>
|
||||
<div class="float-right">
|
||||
@@ -87,7 +86,7 @@
|
||||
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
||||
<div
|
||||
v-for="category in categories"
|
||||
v-if="!closed && (!anyFilterSelected || viewOptions[category.identifier].selected)"
|
||||
v-if="!anyFilterSelected || viewOptions[category.identifier].selected"
|
||||
:key="category.identifier"
|
||||
:class="category.identifier"
|
||||
>
|
||||
@@ -99,6 +98,7 @@
|
||||
:item-width="94"
|
||||
:item-margin="24"
|
||||
:type="category.identifier"
|
||||
:foldButton="false"
|
||||
>
|
||||
<template
|
||||
slot="item"
|
||||
@@ -229,10 +229,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.background-open {
|
||||
height: 188px;
|
||||
}
|
||||
.background-closed {
|
||||
.background-open, .background-closed {
|
||||
height: 216px;
|
||||
}
|
||||
|
||||
@@ -257,7 +254,7 @@
|
||||
position: absolute;
|
||||
bottom: -14px;
|
||||
margin: 0;
|
||||
left: 40px;
|
||||
left: 78px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,16 +15,15 @@
|
||||
@import '~@/assets/scss/colors.scss';
|
||||
|
||||
.modal-close {
|
||||
color: $black;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
.svg-close {
|
||||
color: $gray-50;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
vertical-align: middle;
|
||||
opacity: 0.5;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -70,9 +70,9 @@ export const avatarEditorUtilities = { // eslint-disable-line import/prefer-defa
|
||||
}
|
||||
case 'hair': {
|
||||
if (subType === 'color') {
|
||||
str += `hair_bangs_${this.user.preferences.hair.bangs || 1}_${key}`; // todo get current hair-bang setting
|
||||
str += `icon_hair_bangs_${this.user.preferences.hair.bangs || 1}_${key}`;
|
||||
} else {
|
||||
str += `hair_${subType}_${key}_${this.user.preferences.hair.color}`;
|
||||
str += `icon_hair_${subType}_${key}_${this.user.preferences.hair.color}`;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -7,6 +7,7 @@ export default prefill({
|
||||
baseHair3: { setPrice: 5, text: t('hairSet3') },
|
||||
facialHair: { setPrice: 5, text: t('titleFacialHair') },
|
||||
specialShirts: { setPrice: 5, text: t('specialShirts') },
|
||||
legacyShirts: { },
|
||||
winterHairColors: { setPrice: 5 },
|
||||
pastelHairColors: { setPrice: 5 },
|
||||
rainbowHairColors: { setPrice: 5, text: t('rainbowColors') },
|
||||
|
||||
@@ -10,7 +10,7 @@ export default prefill({
|
||||
yellow: {},
|
||||
|
||||
convict: { price: 2, set: sets.specialShirts },
|
||||
cross: { price: 2, set: sets.specialShirts },
|
||||
cross: { price: 2, set: sets.legacyShirts },
|
||||
fire: { price: 2, set: sets.specialShirts },
|
||||
horizon: { price: 2, set: sets.specialShirts },
|
||||
ocean: { price: 2, set: sets.specialShirts },
|
||||
|
||||
Reference in New Issue
Block a user