diff --git a/website/client/src/assets/images/sprites/spritesmith-main-17.png b/website/client/src/assets/images/sprites/spritesmith-main-17.png index c46e7b1eeb..31528099ec 100644 Binary files a/website/client/src/assets/images/sprites/spritesmith-main-17.png and b/website/client/src/assets/images/sprites/spritesmith-main-17.png differ diff --git a/website/client/src/assets/images/sprites/spritesmith-main-21.png b/website/client/src/assets/images/sprites/spritesmith-main-21.png index 250cebb864..78930c6237 100644 Binary files a/website/client/src/assets/images/sprites/spritesmith-main-21.png and b/website/client/src/assets/images/sprites/spritesmith-main-21.png differ diff --git a/website/client/src/assets/scss/badge.scss b/website/client/src/assets/scss/badge.scss index a89ef5f9a8..9616c9d6f6 100644 --- a/website/client/src/assets/scss/badge.scss +++ b/website/client/src/assets/scss/badge.scss @@ -4,23 +4,47 @@ line-height: 1.33; color: $gray-200; padding: 4px 8px; - box-shadow: 0 1px 1px 0 rgba($black, 0.12); + box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24); } .badge-pill { border-radius: 100px; } +.badge-round { + height: 1.5rem; + width: 1.5rem; + border-radius: 100%; +} + .badge-default { background: $gray-500; box-shadow: none; } +.badge-dialog { + position: absolute; + left: -16px; + top: -16px; + + .badge-pin { + width: 36px; + height: 36px; + padding: 0.5rem; + } +} + .badge-item { position: absolute; top: -9px; } +.badge-top { + position: absolute; + left: calc((100% - 24px) / 2); + top: -12px; +} + .badge-purple { position: absolute; color: $white; diff --git a/website/client/src/assets/scss/colors.scss b/website/client/src/assets/scss/colors.scss index 9ced003cc1..4e1536efa2 100644 --- a/website/client/src/assets/scss/colors.scss +++ b/website/client/src/assets/scss/colors.scss @@ -68,8 +68,6 @@ $purple-600: #D5C8FF; $header-color: #D5C8FF; $header-dark-background: #271B3D; -$suggested-item-color: #D5C8FF; - $healer-color: #FFA624; $rogue-color: #4F2A93; $warrior-color: #C92B2B; diff --git a/website/client/src/assets/scss/index.scss b/website/client/src/assets/scss/index.scss index 3919ff6efd..6842a80947 100644 --- a/website/client/src/assets/scss/index.scss +++ b/website/client/src/assets/scss/index.scss @@ -32,9 +32,8 @@ @import './dragdrop'; @import './banner'; @import './progress-bar'; -@import './pin'; @import './animals'; @import './iconalert'; @import './tiers'; @import './payments'; -@import './datepicker.scss'; \ No newline at end of file +@import './datepicker.scss'; diff --git a/website/client/src/assets/scss/item.scss b/website/client/src/assets/scss/item.scss index 20dd7d0e16..3b03d38a22 100644 --- a/website/client/src/assets/scss/item.scss +++ b/website/client/src/assets/scss/item.scss @@ -24,7 +24,7 @@ @media only screen and (min-width: 1440px){ margin-right: 1.71em; } - + // Desktop L (1280) @media only screen and (min-width: 1280px) and (max-width: 1439px) { margin-right: 0.43em; @@ -47,8 +47,9 @@ height: 92px; border-radius: 2px; background: $white; - box-shadow: 0 2px 2px 0 rgba($black, 0.15), 0 1px 4px 0 rgba($black, 0.1); + box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24); border: 1px solid transparent; + cursor: pointer; &-empty { background: $gray-10; @@ -61,8 +62,8 @@ } &:hover { - box-shadow: 0 4px 4px 0 rgba($black, 0.16), 0 1px 8px 0 rgba($black, 0.12); - border-color: $purple-500; + box-shadow: 0 3px 6px 0 rgba($black, 0.16), 0 3px 6px 0 rgba($black, 0.24); + border-color: $purple-400; } &.highlight { @@ -72,15 +73,6 @@ &.highlight-border { border-color: $purple-500; } - - &.suggested { - box-shadow: 0 2px 2px 0 rgba(26, 24, 29, 0.16), 0 1px 4px 0 rgba(26, 24, 29, 0.12); - border: solid 1px $suggested-item-color; - } - - &.suggested:hover { - border: solid 1px $purple-500; - } } .flat .item { diff --git a/website/client/src/assets/scss/pin.scss b/website/client/src/assets/scss/pin.scss deleted file mode 100644 index 0874cd8cc6..0000000000 --- a/website/client/src/assets/scss/pin.scss +++ /dev/null @@ -1,26 +0,0 @@ -.badge-svg { - left: calc((100% - 18px) / 2); - cursor: pointer; - color: $gray-400; - background: $white; - padding: 4.5px 6px; - - &.item-selected-badge { - background: $purple-300; - color: $white; - } -} - -span.badge.badge-pill.badge-item.badge-svg:not(.item-selected-badge) { - color: #a5a1ac; -} - -span.badge.badge-pill.badge-item.badge-svg.hide { - display: none; -} - -.item:hover { - span.badge.badge-pill.badge-item.badge-svg.hide { - display: block; - } -} \ No newline at end of file diff --git a/website/client/src/assets/svg/pin.svg b/website/client/src/assets/svg/pin.svg index 2e0bf00699..849d42a6ab 100644 --- a/website/client/src/assets/svg/pin.svg +++ b/website/client/src/assets/svg/pin.svg @@ -1,3 +1,3 @@ - - + + diff --git a/website/client/src/components/creatorIntro.vue b/website/client/src/components/creatorIntro.vue index 843a382759..2d0cc44adb 100644 --- a/website/client/src/components/creatorIntro.vue +++ b/website/client/src/components/creatorIntro.vue @@ -227,7 +227,7 @@ >
- +
@@ -295,7 +291,7 @@ >
- +
-

+

{{ group.label }} {{ items[group.key].length }}

-

+

{{ $t(group.key) }} {{ group.quantity }}

- +
- + @@ -55,14 +53,14 @@ diff --git a/website/client/src/components/shops/market/index.vue b/website/client/src/components/shops/market/index.vue index cb660cbf72..1034353616 100644 --- a/website/client/src/components/shops/market/index.vue +++ b/website/client/src/components/shops/market/index.vue @@ -176,15 +176,9 @@ import FilterDropdown from '@/components/ui/filterDropdown'; import MarketFilter from './filter'; import SellModal from './sellModal.vue'; - -import svgPin from '@/assets/svg/pin.svg'; -import svgGem from '@/assets/svg/gem.svg'; -import svgInformation from '@/assets/svg/information.svg'; - import getItemInfo from '@/../../common/script/libs/getItemInfo'; import shops from '@/../../common/script/libs/shops'; - import notifications from '@/mixins/notifications'; import buyMixin from '@/mixins/buy'; import currencyMixin from '../_currencyMixin'; @@ -222,13 +216,6 @@ export default { searchText: null, searchTextThrottled: null, - - icons: Object.freeze({ - pin: svgPin, - gem: svgGem, - information: svgInformation, - }), - sortItemsBy: sortItems, selectedSortItemsBy: sortItems[0], diff --git a/website/client/src/components/shops/quests/buyQuestModal.vue b/website/client/src/components/shops/quests/buyQuestModal.vue index 1367414d13..2e9a86761e 100644 --- a/website/client/src/components/shops/quests/buyQuestModal.vue +++ b/website/client/src/components/shops/quests/buyQuestModal.vue @@ -6,14 +6,12 @@ > - +
-
+
{{ $t('howManyToBuy') }}
@@ -59,7 +60,8 @@
@@ -181,14 +195,12 @@ slot-scope="ctx" > - + @@ -205,43 +217,6 @@ @import '~@/assets/scss/colors.scss'; @import '~@/assets/scss/variables.scss'; - .badge-svg { - left: calc((100% - 18px) / 2); - cursor: pointer; - color: $gray-400; - background: $white; - padding: 4.5px 6px; - - &.item-selected-badge { - background: $purple-300; - color: $white; - } - } - - span.badge.badge-pill.badge-item.badge-svg:not(.item-selected-badge) { - color: #a5a1ac; - } - - span.badge.badge-pill.badge-item.badge-svg.hide { - display: none; - } - - .item:hover { - span.badge.badge-pill.badge-item.badge-svg.hide { - display: block; - } - } - - .icon-12 { - width: 12px; - height: 12px; - } - - .hand-cursor { - cursor: pointer; - } - - .featured-label { margin: 24px auto; } @@ -273,6 +248,14 @@ position: relative; } + .badge-pin:not(.pinned) { + display: none; + } + + .item:hover .badge-pin { + display: block; + } + h3.classgroup { line-height: 1.5; display: flex; @@ -392,20 +375,19 @@ import _groupBy from 'lodash/groupBy'; import _reverse from 'lodash/reverse'; import { mapState } from '@/libs/store'; -import ShopItem from '../shopItem'; import Checkbox from '@/components/ui/checkbox'; +import PinBadge from '@/components/ui/pinBadge'; +import ShopItem from '../shopItem'; import toggleSwitch from '@/components/ui/toggleSwitch'; import buyMixin from '@/mixins/buy'; import currencyMixin from '../_currencyMixin'; import pinUtils from '@/mixins/pinUtils'; -import svgPin from '@/assets/svg/pin.svg'; import svgWarrior from '@/assets/svg/warrior.svg'; import svgWizard from '@/assets/svg/wizard.svg'; import svgRogue from '@/assets/svg/rogue.svg'; import svgHealer from '@/assets/svg/healer.svg'; - import isPinned from '@/../../common/script/libs/isPinned'; import getOfficialPinnedItems from '@/../../common/script/libs/getOfficialPinnedItems'; @@ -415,9 +397,10 @@ import shops from '@/../../common/script/libs/shops'; export default { components: { + Checkbox, + PinBadge, ShopItem, toggleSwitch, - Checkbox, }, mixins: [buyMixin, currencyMixin, pinUtils], data () { @@ -427,7 +410,6 @@ export default { searchTextThrottled: null, icons: Object.freeze({ - pin: svgPin, warrior: svgWarrior, wizard: svgWizard, rogue: svgRogue, @@ -476,7 +458,10 @@ export default { const itemsNotOwned = seasonal.featured.items .filter(item => !this.user.items.gear.owned[item.key]); - seasonal.featured.items = itemsNotOwned; + seasonal.featured.items = _map(itemsNotOwned, e => ({ + ...e, + pinned: isPinned(this.user, e, this.usersOfficalPinnedItems), + })); // If we are out of gear, show the spells // @TODO: add dates to check instead? @@ -609,7 +594,6 @@ export default { return false; }, itemSelected (item) { - if (item.locked) return; this.$root.$emit('buyModal::showItem', item); }, }, diff --git a/website/client/src/components/shops/shopItem.vue b/website/client/src/components/shops/shopItem.vue index 6568dd502b..8ecc313054 100644 --- a/website/client/src/components/shops/shopItem.vue +++ b/website/client/src/components/shops/shopItem.vue @@ -16,45 +16,47 @@ > -
+ + +
+
+ +
+
-
-
- -
-
- - {{ getPrice() }} -
+ v-once + class="price-label" + :class="currencyClass" + >{{ getPrice() }}
@@ -121,60 +123,66 @@ } .item { - min-height: 106px; - } - - .item:not(.locked) { + height: 7.5rem; + width: 94px; + border-radius: 4px; + background-color: $white; + box-shadow: 0 1px 3px 0 rgba($black, 0.12), 0 1px 2px 0 rgba($black, 0.24); cursor: pointer; - } - .item.item-empty { - border-radius: 2px; - background-color: #f9f9f9; - box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12); - } - - .shop-content { - display: flex; - flex-direction: column; - align-items: center; - - & > * { - margin-top : 12px; + &.locked .price { + opacity: 0.5; } } .image { - height: 50px; + margin: 12px 13px; } - .price { - .svg-icon { - padding-top: 2px; - margin-right: 4px; + height: 1.75rem; + width: 94px; + margin-left: -1px; + margin-right: -1px; + border-radius: 0px 0px 4px 4px; + + &.gems { + background-color: rgba($green-100, 0.15); } - margin-top: 1.25em; + &.gold { + background-color: rgba($yellow-100, 0.15); + } + + &.hourglasses { + background-color: rgba($blue-50, 0.15); + } + + &.unlock { + background-color: rgba($gray-400, 0.15); + } } .price-label { - height: 16px; font-family: Roboto; - font-size: 16px; + font-size: 12px; font-weight: bold; line-height: 1.33; &.gems { - color: $green-10; + color: $green-1; } &.gold { - color: $yellow-10 + color: $yellow-1; + } + + &.unlock { + color: $gray-100; } &.hourglasses { - color: $blue-10; + color: $blue-1; } } @@ -185,9 +193,10 @@ right: 8px; top: 8px; margin-top: 0; + color: $gray-200; } - span.badge.badge-pill.badge-item.badge-clock { + span.badge.badge-round.badge-item.badge-clock { height: 24px; width: 24px; background-color: $purple-300; @@ -206,7 +215,7 @@ .suggestedDot { width: 6px; height: 6px; - background-color: $suggested-item-color; + background-color: $purple-400; border-radius: 4px; position: absolute; @@ -219,6 +228,10 @@ width: 48px; height: 48px; } + + .w-0 { + width: 0rem; + } diff --git a/website/client/src/components/ui/starBadge.vue b/website/client/src/components/ui/starBadge.vue index d1edf6364a..ebf62aaffc 100644 --- a/website/client/src/components/ui/starBadge.vue +++ b/website/client/src/components/ui/starBadge.vue @@ -1,36 +1,53 @@