embeddable-nfts - npm Package Compare versions

Comparing version 0.4.4 to 0.4.5

package.json

 {
   "name": "embeddable-nfts",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "description": "Resuable, embeddable webcomponent for OpenSea assets.",
@@ -5,0 +5,0 @@ "scripts": {

src/nft-card-front.ts

@@ -39,3 +39,2 @@ import { css, customElement, html, LitElement, property } from 'lit-element'
         transform: translateY(0);
-        overflow: hidden;
       }
@@ -42,0 +41,0 @@ .is-vertical {

src/nft-card.ts

@@ -48,5 +48,5 @@ import { css, customElement, html, LitElement, property } from 'lit-element'
   /* User configurable properties */
-  @property({ type: Boolean }) public horizontal: boolean = true
-  @property({ type: Boolean }) public orientationMode: OrientationMode =
-    OrientationMode.Auto
+  @property({ type: Boolean }) public horizontal?: boolean
+  @property({ type: Boolean }) public vertical?: boolean
+  @property({ type: String }) public orientationMode?: OrientationMode
   @property({ type: String }) public tokenAddress: string = ''
@@ -135,20 +135,32 @@ @property({ type: String }) public contractAddress: string = ''
 
-    let vertCardWidth
-    if (
-      window.innerWidth < MOBILE_BREAK_POINT &&
-      this.orientationMode === OrientationMode.Auto
-    ) {
-      vertCardWidth = VERT_CARD_WIDTH_MOBILE
+    /* If user sets any style overrides assume manual mode unless user has defined the mode */
+    if (!this.orientationMode) {
+      this.orientationMode =
+        this.width || this.height || this.horizontal || this.vertical
+          ? OrientationMode.Manual
+          : OrientationMode.Auto
+    }
+
+    this.horizontal = this.horizontal || !this.vertical
+
+    let vertCardWidth = ''
+    if (this.orientationMode === OrientationMode.Auto) {
+      vertCardWidth =
+        window.innerWidth < MOBILE_BREAK_POINT
+          ? VERT_CARD_WIDTH_MOBILE
+          : VERT_CARD_WIDTH
       this.horizontal = false
-    } else {
-      vertCardWidth = VERT_CARD_WIDTH
     }
 
     // Set default dimensions
-    if (!this.width) {
-      this.width = this.horizontal ? HORIZONTAL_CARD_WIDTH : vertCardWidth
-    }
-    if (!this.height) {
-      this.height = this.horizontal ? HORIZONTAL_CARD_HEIGHT : VERT_CARD_HEIGHT
-    }
+    this.width = this.width
+      ? this.width
+      : this.horizontal
+      ? HORIZONTAL_CARD_WIDTH
+      : vertCardWidth
+    this.height = this.height
+      ? this.height
+      : this.horizontal
+      ? HORIZONTAL_CARD_HEIGHT
+      : VERT_CARD_HEIGHT
     this.minHeight = this.horizontal
@@ -155,0 +167,0 @@ ? HORIZONTAL_MIN_CARD_HEIGHT

No alert changes

Improved metrics

Total package byte prevSize

7398811

0.02%

Lines of code

7944

0.11%

No dependency changes