Fixed images and layout

BAndiT1983 · Sep 23, 2023 · 35ac60a · 35ac60a
1 parent 75146a5
commit 35ac60a
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 47 deletions.
diff --git a/product-configurator/.pnp.cjs b/product-configurator/.pnp.cjs
diff --git a/product-configurator/package.json b/product-configurator/package.json
@@ -15,7 +15,7 @@
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@typescript-eslint/eslint-plugin": "^6.7.2",
     "@typescript-eslint/parser": "^6.7.2",
-    "eslint": "^8.49.0",
+    "eslint": "^8.50.0",
     "eslint-plugin-lit": "^1.9.1",
     "eslint-plugin-wc": "^2.0.3",
     "ts-lit-plugin": "^1.2.1",

diff --git a/product-configurator/public/images/wallet_test/Background.png b/product-configurator/public/images/wallet_test/Background.png
diff --git a/product-configurator/public/images/wallet_test/Layer1.png b/product-configurator/public/images/wallet_test/Layer1.png
diff --git a/product-configurator/public/images/wallet_test/Layer2.png b/product-configurator/public/images/wallet_test/Layer2.png
diff --git a/product-configurator/src/components/ProductConfigurator.ts b/product-configurator/src/components/ProductConfigurator.ts
@@ -171,15 +171,8 @@ export class ProductConfigurator extends LitElement {
             <style>
                 .configurator {
                     padding: 0.5rem;
-                    border: 1px solid lightgray;
-                    width: 100%,
-                    height: 100%,
-                    /* min-width: 10rem;
-                    min-height: 20rem; */
-                    /* width: 100vw; */
-                    /* height: 100vh; */
                     display: flex;
-                    flex-direction: column;>
+                    flex-direction: column;
                     align-items: center;
                 }
 
@@ -202,8 +195,8 @@ export class ProductConfigurator extends LitElement {
 
                 .image-container {
                     position: relative;
-                    /* width: 40rem; */
-                    height: 40rem;
+                    width: 100%;
+                    height: 85vh;
                     background-image: url("${this.imageFolder}/Background.png");
                     background-repeat: no-repeat;
                     background-position: center;
@@ -242,8 +235,8 @@ export class ProductConfigurator extends LitElement {
                     mask-image: url("${this.imageFolder}/Layer1.png");
                     -webkit-mask-image: url("${this.imageFolder}/Layer1.png");
                     mix-blend-mode: ${this.getMixMode(
-                    this.getActiveColorByLayer(0)
-                )};
+                        this.getActiveColorByLayer(0)
+                    )};
                 }
 
                 .layer2-image {
@@ -252,8 +245,8 @@ export class ProductConfigurator extends LitElement {
                     mask-image: url("${this.imageFolder}/Layer2.png");
                     -webkit-mask-image: url("${this.imageFolder}/Layer2.png");
                     mix-blend-mode: ${this.getMixMode(
-                    this.getActiveColorByLayer(1)
-                )};
+                        this.getActiveColorByLayer(1)
+                    )};
                 }
             </style>
 
@@ -268,7 +261,6 @@ export class ProductConfigurator extends LitElement {
                     ${this.materialData.materials.map(
                         (entry: Material[], layerIndex: number) =>
                             this.colorRowTemplate(layerIndex, entry)
-                        // console.log("ROW");
                     )}
                 </div>
             </div>

diff --git a/product-configurator/yarn.lock b/product-configurator/yarn.lock
@@ -210,10 +210,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@eslint/js@npm:8.49.0":
-  version: 8.49.0
-  resolution: "@eslint/js@npm:8.49.0"
-  checksum: a6601807c8aeeefe866926ad92ed98007c034a735af20ff709009e39ad1337474243d47908500a3bde04e37bfba16bcf1d3452417f962e1345bc8756edd6b830
+"@eslint/js@npm:8.50.0":
+  version: 8.50.0
+  resolution: "@eslint/js@npm:8.50.0"
+  checksum: 302478f2acaaa7228729ec6a04f56641590185e1d8cd1c836a6db8a6b8009f80a57349341be9fbb9aa1721a7a569d1be3ffc598a33300d22816f11832095386c
   languageName: node
   linkType: hard
 
@@ -1281,14 +1281,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint@npm:^8.49.0":
-  version: 8.49.0
-  resolution: "eslint@npm:8.49.0"
+"eslint@npm:^8.50.0":
+  version: 8.50.0
+  resolution: "eslint@npm:8.50.0"
   dependencies:
     "@eslint-community/eslint-utils": ^4.2.0
     "@eslint-community/regexpp": ^4.6.1
     "@eslint/eslintrc": ^2.1.2
-    "@eslint/js": 8.49.0
+    "@eslint/js": 8.50.0
     "@humanwhocodes/config-array": ^0.11.11
     "@humanwhocodes/module-importer": ^1.0.1
     "@nodelib/fs.walk": ^1.2.8
@@ -1324,7 +1324,7 @@ __metadata:
     text-table: ^0.2.0
   bin:
     eslint: bin/eslint.js
-  checksum: 4dfe257e1e42da2f9da872b05aaaf99b0f5aa022c1a91eee8f2af1ab72651b596366320c575ccd4e0469f7b4c97aff5bb85ae3323ebd6a293c3faef4028b0d81
+  checksum: 9ebfe5615dc84700000d218e32ddfdcfc227ca600f65f18e5541ec34f8902a00356a9a8804d9468fd6c8637a5ef6a3897291dad91ba6579d5b32ffeae5e31768
   languageName: node
   linkType: hard
 
@@ -2928,7 +2928,7 @@ __metadata:
     "@rollup/plugin-node-resolve": ^15.2.1
     "@typescript-eslint/eslint-plugin": ^6.7.2
     "@typescript-eslint/parser": ^6.7.2
-    eslint: ^8.49.0
+    eslint: ^8.50.0
     eslint-plugin-lit: ^1.9.1
     eslint-plugin-wc: ^2.0.3
     lit: ^2.8.0