Feat/cards redesign (#1593)

* feat: save changes of cards redesign * feat: wip * feat: fix types * feat: catalog items finished - missing cleaning comments * fix: saga tests * feat: updated common schemas * feat: some fixes * feat: fix on card height and build with best buying option * feat: updated dcl schemas * feat: added plural to listing price * feat: fix comments * feat: added million parse on prices * feat: added million parse on prices * fix: api call to catalog or nft/items * fix: some fixes in cards * fix: tests * fix: remove unnecesary changes * fix: selectors import * feat: last fixes * feat: some fixes * feat: fixed comments * Feat/catalog status filter (#1587) * feat: add new status filter for the catalog * feat: add tests for the getStatus selector and missing files for StatusFilter * feat: add Status filter to the defaultCollapsed object * fix: most_expensive new filter * feat: remove extra enum in object * test: add tests to new sortby options selector * test: update tests * fix: AssetCards styles for Catalog (#1632) --------- Co-authored-by: Juanma Hidalgo <[email protected]>
decentraland · Jun 1, 2023 · 7443042 · 7443042
1 parent 12f965d
commit 7443042
Show file tree

Hide file tree

Showing 58 changed files with 1,587 additions and 212 deletions.
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0-development",
   "dependencies": {
     "@dcl/crypto": "^3.0.0",
-    "@dcl/schemas": "^6.15.0",
+    "@dcl/schemas": "^6.17.0",
     "@dcl/ui-env": "^1.2.0",
     "@ethersproject/providers": "^5.6.2",
     "classnames": "^2.3.1",

diff --git a/webapp/src/components/AccountSidebar/CurrentAccountSidebar/CurrentAccountSidebar.tsx b/webapp/src/components/AccountSidebar/CurrentAccountSidebar/CurrentAccountSidebar.tsx
@@ -77,6 +77,7 @@ const CurrentAccountSidebar = ({ section, onBrowse }: Props) => (
     </Menu>
     <AssetFilters
       defaultCollapsed={{
+        [AssetFilter.Status]: true,
         [AssetFilter.Rarity]: true,
         [AssetFilter.Price]: true,
         [AssetFilter.Collection]: true,
@@ -85,7 +86,7 @@ const CurrentAccountSidebar = ({ section, onBrowse }: Props) => (
         [AssetFilter.BodyShape]: true,
         [AssetFilter.Network]: true,
         [AssetFilter.OnSale]: false,
-        [AssetFilter.More]: false,
+        [AssetFilter.More]: false
       }}
     />
   </>

diff --git a/webapp/src/components/AssetCard/AssetCard.container.ts b/webapp/src/components/AssetCard/AssetCard.container.ts
@@ -9,7 +9,7 @@ import { getAssetPrice, isNFT } from '../../modules/asset/utils'
 import { locations } from '../../modules/routing/locations'
 import { getOpenRentalId } from '../../modules/rental/utils'
 import { getRentalById } from '../../modules/rental/selectors'
-import { getPageName } from '../../modules/routing/selectors'
+import { getPageName, getSortBy } from '../../modules/routing/selectors'
 import { PageName } from '../../modules/routing/types'
 import { MapStateProps, OwnProps, MapDispatchProps } from './AssetCard.types'
 import AssetCard from './AssetCard'
@@ -39,7 +39,8 @@ const mapState = (state: RootState, ownProps: OwnProps): MapStateProps => {
       ? isClaimingBackLandTransactionPending(state, asset)
       : false,
     rental: rentalOfNFT,
-    showRentalChip: rentalOfNFT !== null && pageName === PageName.ACCOUNT
+    showRentalChip: rentalOfNFT !== null && pageName === PageName.ACCOUNT,
+    sortBy: getSortBy(state)
   }
 }
 

diff --git a/webapp/src/components/AssetCard/AssetCard.css b/webapp/src/components/AssetCard/AssetCard.css
@@ -1,5 +1,48 @@
 .AssetCard {
-  overflow: hidden;
+  height: 346px;
+  overflow: visible;
+}
+
+.ui.cards a.card.AssetCard.catalog:hover,
+.ui.link.card.AssetCard.catalog:hover,
+.ui.link.cards .card.AssetCard.catalog:hover,
+a.ui.card.AssetCard.catalog:hover,
+.ui.cards > .ui.card.AssetCard.catalog.link:hover,
+.ui.card.AssetCard.catalog.link:hover {
+  border: none !important;
+}
+
+.ui.card.AssetCard > .content,
+.ui.cards > .card.AssetCard > .content {
+  height: 185px;
+  transition: height 0.3s !important;
+}
+
+.ui.card.AssetCard > .content > .header:not(.ui),
+.ui.cards > .card.AssetCard > .content > .header:not(.ui) {
+  flex: unset;
+}
+
+.ui.card.AssetCard:hover > .content.catalog,
+.ui.cards > .card.AssetCard:hover > .content.catalog {
+  position: absolute;
+  margin-top: 161px;
+  width: 100%;
+  height: 222px;
+  background-color: var(--card);
+  box-shadow: 0px 4px 34px 0px rgba(255, 255, 255, 0.37) !important;
+  border-radius: 0px 0px 10px 10px !important;
+}
+
+.ui.card.AssetCard:hover .AssetImage.catalog,
+.ui.cards > .card.AssetCard:hover .AssetImage.catalog {
+  box-shadow: 0px 4px 34px 0px rgba(255, 255, 255, 0.37) !important;
+  border-radius: 10px !important;
+}
+
+.ui.card.AssetCard .AssetImage,
+.ui.card.AssetCard .AssetImage .rarity-background {
+  border-radius: 10px 10px 0px 0px !important;
 }
 
 .AssetCard .header,
@@ -9,22 +52,54 @@
   letter-spacing: -0.2px;
 }
 
+.AssetCard .extraInformation {
+  visibility: hidden;
+  height: 0px;
+}
+
+.AssetCard:hover .extraInformation {
+  visibility: visible;
+}
+
+.AssetCard .ui.header.small {
+  font-size: 14.5px;
+  font-weight: 400;
+}
+
+.AssetCard .CatalogItemInformation {
+  color: white;
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  transition: inherit;
+  flex: 1;
+}
+
+.AssetCard:hover .CatalogItemInformation {
+  margin-top: 13px;
+}
+
 .AssetCard .header .title {
   flex: 1 2 auto;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   margin-right: 20px;
+  margin-bottom: 0px;
+  display: flex;
+  flex-direction: column;
 }
 
-.ui.card.AssetCard > .content {
-  flex: none;
+.AssetCard .creator {
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--secondary-text);
 }
 
 .ui.card.AssetCard > .content > .header:not(.ui),
 .ui.cards > .card.AssetCard > .content > .header:not(.ui) {
   display: flex;
-  margin-bottom: 6px;
+  margin-bottom: 0px;
 }
 
 .AssetCard .dcl.mana.inline {
@@ -46,10 +121,6 @@ a.ui.card.link:hover .meta {
   margin-top: 12px;
 }
 
-.AssetCard .AssetImage {
-  overflow: hidden;
-}
-
 .AssetCard .AssetImage .ens-subdomain {
   background-size: 557px;
   background-position-y: -133px;
@@ -79,7 +150,7 @@ a.ui.card.link:hover .meta {
   align-self: flex-end;
   background-color: #ecebed;
   border: 1px solid #a09ba8;
-  color: #43404A;
+  color: #43404a;
   font-size: 11px;
   border-radius: 50px !important;
   display: flex;
@@ -92,6 +163,30 @@ a.ui.card.link:hover .meta {
   z-index: 2;
 }
 
+.AssetCard .AssetImage {
+  height: 223px;
+}
+
+.AssetCard .AssetImage.catalog {
+  height: 161px;
+}
+
+.AssetCard .PriceInMana .ui.header.large {
+  font-size: 30px;
+  font-weight: 600;
+  margin: 0px;
+}
+
+.AssetCard .mintIcon {
+  height: 14px;
+}
+
+.AssetCard .dcl.atlas {
+  overflow: hidden;
+  border-top-right-radius: 10px;
+  border-top-left-radius: 10px;
+}
+
 @media (max-width: 1199px) {
   .AssetCard .LandBubble {
     align-self: center;